1、组件
01-什么是组件
02-组件的创建
1、组件创建的三种方式
(1) Vue.extend() + Vue.component() 定义
// 1.
使用vue.extend()定义组件模板
var dv = Vue.extend({
template:'
我是一个组件
'
})
// 2.
使用Vue.component()注册组件Vue.component(
组件名,组件模板
)
Vue.component('
com
',dv)
// 3.
在Vue托管区域像使用普通HTML标签一样使用组件
注意:
1、模板template只能有一个根节点
2、组件名是驼峰,那么使用需要以-连接 如indexA 使用就是 index-A
(2) Vue.component() 定义
// 1.
使用Vue.component定义组件
Vue.component('com',{
template:'
我是一个组件中的元素
'
})
// 2.
使用组件
(3) 使用template标签定义模板
// 1.
使用Vue.component定义组件,并且使用选择器选择模板
Vue.component('com',{
template:'#temp'
})
// 2.
使用template标签定义模板,并且给template标签添加id
注意:
template
模板需要在
vue
范围外写
我是p元素
我是span元素
或者:
<</span>scripttype="x-template"id="heima">
indexD
</</span>script>
// 3.
使用组件
03-组件中使用事件和指令
https://cn.vuejs.org/v2/guide/components.html#data-必须是一个函数
注意:data是一个函数,而且函数中以返回值的形式返回数据对象,其他的在跟vue实例是一样的
04-父子组件的创建
注意:子组件需要写在父组件里面
方法1:
方法2:
05-父组件传值给子组件
1、步骤分析:
(1) 父组件:父组件中的值传给子组件 , 使用绑定的方式传递
(2) 子组件接收父组件传过来的值即可在子组件中使用 ,
在子组件中定义一个props属性,该属性是一个数组,数组中定义用于接收传过来的变量。这个变量和第一步绑定的这个属性同名
06-子组件传值给父组件
提示:template可以接模板字符串
// 1.
在父组件中定义好要传递的数据
Vue
.component
(
“father”,
{
template
:
`
父亲年纪大了,记性不好,我儿子告诉我他叫
{{mySonName}}
`
data:{
mySonName
:'
???
'
},
components:{
son:{
template:'<</span>
button
>
点击我就告诉我爸爸我叫
{{
myName
}}</</span>
button>',
data(){
myName:”
小明
”
}
}
,
}
})
// 2.
在子组件中使用this.$emit触发一个自定义的方法名,然后传递数据
//
第一个参数就是自定义的
事件名
//
第二个参数就是需要传递给父组件的数据
this.$emit('
func
',this.
myName
)
// 3.
在父组件中使用子组件时,绑定一个事件,事件名称和子组件触发的
事件名
同名
父亲年纪大了,记性不好,我儿子告诉我他叫
{{mySonName}}
func
= 'getmsg'>
// 4.
在父组件的methods中定义一个事件处理函数
methods:{
getmsg:function(data){
// data
就是子组件传过来的数据
}
}
07-兄弟组件间传值
步骤分析:
1、
创建好兄弟组件
2、
传递方式:创建一个空的实例事件总线 var eventBus=new Vue();
3、
daughter
传递方式
实例事件总线.$emit
(“
事件名称”,需传递的值)
4、brother
获取方式
实例事件总线.$on
(“
事件名称”,函数)函数中参数即传递过来的值
08-创建动态组件 (is动态组件)
1、is属性和component实现组件切换
// comname
是哪个组件名,则component就会被渲染成哪个组件
// component
就是一个占位标签
new Vue({
el:'#app',
comname:'login' //
此时显示login组件
})
2、:is=”correntCom”和is=”correntCom”的区别
(1)
:is=”correntCom”
是绑定事件
原型是v-on:is=”correntCom”
(2)
is=”correntCom”
是默认值
09-局部过滤器和局部自定义指令
局部自定义指令和过滤器只能在局部使用,不能在外部全局使用
// 自定义指令通过Vue.directive()创建,它包含两个参数,一个是自定义指令的名字,
可以随便取,但是全部小写;另一个是一个对象,表示自定义指令的配置项。
// inserted钩子函数,它表示自定义指令插入到标签中的时候就执行
// inserted钩子函数有两个参数(el,binding) el表示使用自定义指令的元素,binding表示自定义指令的信息
1
、局部过滤器
filters:{
'
过滤器的名称':function(value){
注意:过滤器的名称是一个函数
return
处理完毕的数据
}
}
2
、局部自定义指令
directives:{
'
自定义指令的名称':{
自定义指令的名称必须小写
inserted:function(){},
}
}
3
、全局指令
Vue.directive('
指令名称',{
注意:指令名称必须全部小写
//
当前指令所在元素插入到父节点时调用(不保证DOM已经渲染完毕)
inserted:function(){},
})
10-实例生命周期
回调函数:一个函数被当做参数进行传递的时候,称作这个函数为回调函数
构造函数:一个函数被new 关键字引导执行的时候,称作这个函数为构造函数
钩子函数: 一个应用程序或者框架内部提前定义好的一批函数,这些函数会在特定的时间段自动执行
生命周期: 一个程序会存在初始化 - 运行 - 销毁等阶段,这些阶段统称为该程序的生命周期
new Vue({
el:'#app',
data:{},
methods:{},
beforeCreated(){},
// data
中的数据和methods中的方法已经初始化完毕会去自动执行created方法
created(){
//
用于发生数据请求,也可以初始化一些数据
},
beforeMount(){},
//
真实DOM已经渲染完毕会执行mounted函数
mounted(){
//
操作真实DOM
}
beforeUpdate(){},
// data
中的发生了变化而且被重新渲染到了界面上时才会执行
updated(){
//
数据更新后重新操作DOM
},
//
实例销毁之前,实例上面的各种属性和方法都还可以正常访问,通常可以在这里手动回收一些页面没有被释放的变量,比如清楚定时器的操作。
beforeDestroy(){},
//
实例已经从内存中被销毁
destroyed(){}
})