自定义指令
1.自定义全局指令
在 Vue 中，可以自定义
v-ifv-focus等指令的行为，当然你也可以自己取指令的名字。
定义方式：在 js 中使用 Vue.derective 定义
Vue.directive('focus', {
})
上述代码可以看出，directive 也是vue的内置方法，有两个参数，
- 第一个参数为指令名称（注意：这里的指令不需要带上
v-的前缀）。 - 第二个参数为一个对象，里面有内置的钩子函数，可以在函数中定义指令的自定义行为。
Vue.directive('focus', {
bind: function(el){
}, //每当指令绑定到元素上，立即执行 bind 函数。注意：绑定时 DOM 树还未被构建。
inserted: function(el){
}, //inserted 表示元素插入到 DOM 中的时候（已经插入），执行 inserted 函数
updated: function(el){
} //当VNode更新时，会执行 updated
})
上述代码，在directive中输入了需要自定义的指令，使用了几个钩子函数，可以在其中规定自定义行为
在每一个钩子函数中，还可以传入参数，传入的第一个参数指向当前操作的 DOM 节点
还可以传入其他参数，如下
注意：binding 参数为一个对象
2.自定义私有指令
私有的自定义指令在vue实例对象中定义
//html
<p v-code> </p> //在 p 标签中使用自定的 v-code 指令
//js
let vm = Vue({
//...
directives:{
//实例内部的 directives 规定自定义指令
'code': {
bind: function(el,binding){
},
inserted: function(el,binding){
},
updated: function(el,binding){
},
// 这些指令同样可以使用 el , binding 等参数来获得你所需要的数据
}
}
//...
})
生命周期
在进行小程序开发时，对于生命周期也有了解，在Vue中的生命周期也大同小异。
生命周期就是指从Vue实例被创建，运行再到销毁期间的事件，统称为生命周期
生命周期函数 = 生命周期钩子 = 生命周期事件
先来看看从创建Vue实例开始生命周期函数的执行流程
//Vue创建阶段
//1.声明 Vue实例，准备创建Vue实例
beforeCreate(){
}
//2.Vue实例创建完成，初始化完毕
created(){
}
//3.编译VUE，判断是否有其他 templete，若没有,则将此 Vue实例编译为模板，此时并未将模板挂载至页面
beforeMount(){
}
//4.此时将编译好的模板替换到页面中去
mounted(){
}
//mounted 的执行代表Vue实例已经被创建完毕
//Vue运行阶段
//1.当数据改变时
beforeUpdata(){
} // 执行它时，此时实例中的数据已经被更新，而页面中的数据还是被修改之前的
//2.数据改变后
updata(){
} // 执行时，页面与实例的数据已经完全同步
//Vue销毁阶段
//销毁之前
beforeDestroy(){
}
//已经销毁
destroyed(){
}
在生命周期函数中，你可以编写自己想在某个周期中进行的操作
let vm = new Vue({
//....
beforeCreate(){
} //在 Vue实例完全被创建出来之前，就会执行它。此时 data和 methods都未被初始化
created(){
} //VUE实例已经被创建后，紧接着执行它。此时 data和 methods刚刚初始化完毕
beforeMount(){
} //在 VUE实例被挂载之前执行。通俗的说，就是在此 VUE模板挂载至页面之前，它就会执行
mounted(){
} //此时 Vue已经把页面渲染完毕，执行此生命周期函数
beforeUpdata(){
} // 执行它时，此时实例中的数据已经被更新，而页面中的数据还是被修改之前的
updata(){
} // 执行时，页面与实例的数据已经完全同步
beforeDestroy(){
} //执行此函数时，Vue实例还没有被销毁，数据和方法还都是可用状态
destroyed(){
} //此函数的执行，代表Vue实例被销毁完毕。
//....
})