一. 自定义指令
自定义指令总结:
1. 定义语法:
(1).局部指令
new Vue({
directives:{指令名,配置对象}
})
或者
new Vue({
directives(指令名,回调函数){}
})
(2).全局指令
Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)
2. 配置对象中常用的3个回调:
(1).bind:指令与元素成功绑定时调用
(2).inserted:指令所在元素被插入页面是调用
(3).update:指令所在模板结构被重新解析时调用
3. 备注
(1).指令定义时不加v-,但使用时要加v-
(2).指令名如果是多个单词,要使用"-"连接的命名方式,不要用小驼峰命名
二. vue生命周期
生命周期:
1. 又名:生命周期回调函数,生命周期函数,生命周期钩子
2. 生命周期是什么:Vue在关键时刻帮我们调用的一些特殊名称功能的函数.
3. 生命周期函数的名字不可更改,但函数的具体内容是程序员根据需求编写的
4. 生命周期函数中的this指向是vm或组件实例对象
常用的生命周期钩子:
1. mounted:发送ajax请求,启动定时器,绑定自定义事件,订阅消息等[初始化操作]
2. beforeDestroy;清除定时器,绑定自定义事件,取消订阅消息等[收尾].
关于销毁Vue实例:
1. 销毁后借助Vue开发者工具看不到任何信息
2. 销毁后自定义事件会失效,但原生DOM事件依然有效
3. 一般不会在beforeDestroy操作数据,因为即便操作数据,也不会再触发更新流程
new Vue({
el: '#myApp',
beforeCreate() {
console.log("beforeCreate:数据监测和数据代理创建之前,将要创建");
},
created() {
console.log("created:数据监测和数据代理创建完毕,创建完毕");
},
beforeMount() {
console.log("beforeMount:将要挂载");
},
mounted() {
console.log("mounted:挂载完毕");
},
beforeUpdate() {
console.log("beforeUpdate:数据将要更新");
},
updated() {
console.log("updated:数据更新完毕");
},
beforeDestroy() {
console.log('beforeDestroy:vm将要销毁');
},
destroyed() {
console.log('destroyed:vm销毁完毕');
},
})