版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
首先我们要先了解一下内容
1. 理解模块化
为了解决前端用户交互和数据交互，能够更好的反映到视图中，我们发现视图层的职责太重了，它不仅要展示数据，还要管理逻辑，还得处理数据
所以我们选择将视图的任务分离出去，给其他部分来处理，慢慢的就出现了模块化
2. 理解组件化
当今项目是由团队开发的，我们会将项目功能拆分，交由不同的成员来完成，每一个成员必须保证自己完成的功能是独立的，这样它的功能可以用于多个项目，最后再将每一个成员的项目组合起来，这就是组件化
3. 什么是组件 ？
组件是一个html、css 、 js 、img等的一个聚合体，直接就可以在多个项目中应用
Vue中的组件其实就是Vue的扩展功能
------------------------------------------------------------------------------------------------------------------------
全局注册 vs 局部注册
-
全局注册是使用了
Vue.component()来实现，Vue.component(组件的名称，组件配置)它的作用范围是全局的，也就是任意一个实例范围内都可以使用- 例子：
<div id="app"> <Hello></Hello> </div> <div id="root"> <Hello></Hello> </div>const Hello = Vue.extend({ // template选项是为了确定一个模板，模板中写的就是jsx template:"<div> hello component </div>" }) Vue.component('Hello',Hello) new Vue({ el: '#app' }) new Vue({ el:"#root" }) -
局部注册是在组件内通过一个
components选项来进行注册，components: { '组件名称': 组件选项}它的作用范围仅仅是当前实例- 例子：
<div id="app"> <Hello></Hello> </div> <div id="root"> <Hello></Hello> </div>const Hello = Vue.extend({ // template选项是为了确定一个模板，模板中写的就是jsx template:"<div> hello 局部注册 </div>" }) new Vue ({ el:"#app", components:{ // 组件名称 ：组件的选项 'Hello':Hello } }) new Vue ({ el:"#root", components:{ // 组件名称 ：组件的选项 'Hello':Hello } }) -
new Vue()也是组件，我们称之为’根实例组件’，用 ,这个组件是Vue组件树的最上层
我们希望大家了解 组件中的 options 选项是来源 Vue.extend( options )
全局注册选项简写
- 选项可以不适用
Vue.extend()来得到，可以直接写在注册的配置项中 Vue.compontent ('Hello',options)
<div id="app">
<Hello></Hello>
</div>
<div id="root">
<Hello></Hello>
</div>
// 选项可以不适用Vue.extend() 来得到，可以直接写在注册的配置项中
// Vue.component('Hello',options)
Vue.component('Hello',{
template: '<div> 预祝大家国庆嗨起来 </div>'
})
new Vue({
el: '#app',
})
new Vue({
el: '#root',
})
局部注册选项简写
- components:{ ‘组件名字’: {template:“组件选项”} }
<div id="app">
<Hello></Hello>
</div>
<div id="root">
<Hello></Hello>
</div>
new Vue ({
el:"#app",
// 局部注册选项 简写
components:{
'Hello':{
template:"<div> 局部注册选项 </div>"
}
}
})
new Vue ({
el:"#root",
components:{
'Hello':{
template:"<div> 局部注册选项 </div>"
}
}
})
组件的命名
- 一个单词，只要首字母大写就可以了
- 组件用大写表示，作用是为了区分原生 html 提供的标签
- 如果是两个以上单词，每个单词首字母大写，但是记得使用的时候，写成小写带横杠
HeadTitle—>head-title
- 组件名称可以直接定义为小写带横杠
- 案例
<div id="app">
<Hello></Hello>
<hellotitle></hellotitle>
<banner-list></banner-list>
</div>
Vue.component('Hello',{
template: '<div> Hello </div>'
})
Vue.component('HeadTitle',{
//模板解析不出来这种写法
template: '<div> 头部标题 </div>'
})
Vue.component('banner-list',{
template: '<div> banner </div>'
})
new Vue({
el: '#app'
})
组件的规则---------> is属性
-
is 属性的作用就是将一个绑定的容器解析为一个组件的模板
-
我们的html中有些标签是特殊的，它规定了它的父子级，这类型标签有
- ul li
- ol li
- dl dt dd
- select option
- table tr td
-
这类型的直接父子级关系的标签，是不能直接用组件代替的，如果代替了，那么父级会将组件排斥在外面
-
解决：is 属性
-
例子：
<div id="app"> <table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <!-- <Rule></Rule> --> <!-- 无法用组件名字形式来写入 用下面is属性的方式 --> <tr is = "Rule"></tr> </table> </div>Vue.component('Rule',{ template:` <tr> <td>4</td> <td>5</td> <td>6</td> </tr> ` }) new Vue({ el: '#app' }) -
动态组件 动态缓存
- 动态组件：可以改变的组件 Vue 中提供了一个叫做 component 的动态组
- 动态缓存：
- deactived 正在使用应用
- inactived 将应用[ 组件 ] 放到了后台，再次使用时，从后台拿取
- keep-alive组件的好处 类比： 我们手机的 app应用
- 没有使用
keep-alive， 就相当于用完 app 就直接关了，在用的时候，重启 - 如果使用 keep-alive `, 就相当于用完 app 之后，不关闭，切换到后台，用的时候，直接从后台调用
- 没有使用
- 例子:
<div id="app">
<h3> {{ loginWay }} </h3>
<button @click = "changeLogin"> {{ tabBtn }} </button><br><br>
<!-- 缓存中加载 -->
<keep-alive> //重点
<component :is = " comp "></component>
</keep-alive>
</div>
Vue.component('TelLogin',{
template:`
<div>
手机号： <input type="text"><br><br>
验证码： <input type="text"><br>
</div>
`
})
Vue.component('UserLogin',{
template:`
<div>
用户名： <input type="text"><br><br>
密码： <input type="text"><br>
</div>
`
})
new Vue ({
el:"#app",
data:{
comp:'UserLogin'
},
methods: {
changeLogin () {
this.comp = this.comp === 'UserLogin' && 'TelLogin' || 'UserLogin'
}
},
computed: {
loginWay () {
return this.comp === 'UserLogin' && '用户名账号登陆' || '手机号验证码登陆'
},
tabBtn () {
return this.comp === 'UserLogin' && '点击切换手机号验证码登陆方式'|| '点击切换账号密码登陆方式'
}
},
})
template标签 书写方式
- 如果在 实例范围内 书写template标签，那么将来它是不会在渲染中出现的
- template标签在 实例范围外是直接显示的
- 组件的模板可以放在实例范围外书写，但是不好的一点就是这个template标签将来还会存在
- 后期我们可以解决这个问题
<div id="app">
<!-- template标签在渲染的时候是不会出现的 -->
<template>
{{ info }}
</template>
<Hello></Hello>
</div>
<!-- 写在外面的组件模板 -->
<template id="hello">
<div>
<p> Hello组件 的模板 </p>
</div>
</template>
Vue.component('Hello',{
template:"#hello" //对于上面的template 的id属性
})
new Vue({
el: '#app',
data:{
info:"测试template"
}
})
data选项
-
data选项为什么是一个函数？
- 组件是一个独立的个体，它应该拥有属于它自己的数据
- 组件的数据是要有独立作用域的，不容易被外界干扰
- 函数恰好提供了一个独立作用域，所以我们data在除根组件外都是函数
-
为什么data选项要返回一个对象？
- Vue通过es5的
Object.definePerproty属性对一个对象进行getter和setter设置，而data选项是作为Vue深入响应式核心的选项
- Vue通过es5的
-
补充一点 组件的数据在组件的模板中相当于全局变量
- 例子：
<div id="app">
<Hello></Hello>
</div>
<template id="hello">
<div>
<!-- 唯一根元素 -->
<p> {{ money }} </p>
</div>
</template>
/*
1. 组件是一个独立的个体，那么它应该拥有属于它自己的数据
2. 组件的数据是要有独立作用域的，不容易被外界干扰
3. 除了根实例以外，组件的data选项都是一个函数
4. 为什么data选项要返回一个对象？
- 因为Vue深入响应式原理要求是对一个对象进行getter和setter设置
5. 组件的数据在组件的模板中相当于全局变量
*/
Vue.component('Hello',{
template: '#hello',
data () {
return {
money: 2000
}
}
})
new Vue({
el: '#app'
})
组件的嵌套
- 组件嵌套就是将子组件以标签化的形式放到父组件的模板中即可
- 例子：
<div id="app">
<Father></Father>
</div>
<template id="father">
<div>
父亲
<!-- 子组件 -->
<Son></Son>
</div>
</template>
<template id="son">
<div>
儿子
</div>
</template>
Vue.component('Father', {
template: "#father"
})
Vue.component('Son', {
template: "#son"
})
new Vue({
el: '#app'
})
组件通信
- 为什么要进行组件通信？
- 将来组件要进行组合时，各个组件之间需要进行联系，这个联系就是组件通信
- 通件通信的方式
-
父子组件通信
- 组件嵌套就是将子组件以标签化的形式放到父组件的模板中即可
- 父组件将自己的数据同 v-bind 绑定在 子组件身上
- 子组件通过 props属性接收
- 案例
<div id="app"> <Father></Father> </div> <template id="father"> <div> father <Son :money = "money"></Son> </div> </template> <template id="son"> <div> son <p> 老爸给了我 {{ money }} 生活费 </p> </div> </template>//组件嵌套就是将子组件以标签化的形式放到父组件的模板中即可 Vue.component('Father',{ template: '#father', data () { return { money: 2000 } } }) Vue.component('Son',{ template: '#son', props: ['money'] }) new Vue({ el: '#app' })-
属性验证
- props属性数据验证
props: ['money'] 数据验证 props: { 'money': Number //验证属性 } props: { 'money': { validator ( val ) { // 验证函数 return val > 2000 } } }-
vue提供
-
第三方也有 vue-validate
-
现在流行用TS[ typescript ]
-
子父组件通信
-
非父子组件通信
-
多组件状态共享： Vuex
-
其他
-
作业：
-
todolist
-
整理笔记然后发送博客
{
‘money’: Number //验证属性
}
props: {
‘money’: {
validator ( val ) { // 验证函数
return val > 2000
}
}
}
```2. vue提供 3. 第三方也有 vue-validate 4. 现在流行用TS[ typescript ]-
子父组件通信
-
非父子组件通信
-
多组件状态共享： Vuex
-
其他
-