vue基础学习（三）
因为小编的博客是会放在简历上去的~~~
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(){}
})
