目录
1. 自定义指令注册
1.1 全局注册
1.2 局部注册
2. 自定义指令写法
2.1.对象式（常用）
2.2.函数式
3.总结
1. 自定义指令注册
1.1 全局注册
Vue.directive('name', {})
1.2 局部注册
directives: {
name: {}
}
注意全局注册的单词是directive，局部注册的单词是directives，局部注册单词要加 s 哦
2. 自定义指令写法
（以局部注册为例）
2.1.对象式（常用）
键值对的写法
directives: {
// 二、对象式
bfocus: {
bind(element, bingding) {
element.value = bingding.value
},
inserted(element, bingding) {
element.value = bingding.value
},
update(element, bingding) {
element.value = bingding.value
},
}
},
缺点：写法比较麻烦
优点：可以处理细节问题
自定义指令的几个钩子函数：
-
bind：指令第一次绑定到元素时调用，只执行一次。
-
inserted：被绑定的元素，插入到父节点的 DOM 中时调用。
-
update：组件更新时调用。
- componentUpdated：组件与子组件更新时调用。
- unbind：指令与元素解绑时调用，只执行一次。
注意自定义组件的钩子函数的 update没有 d 哦，vue生命周期钩子函数是updatad
2.2.函数式
缺点：不可以处理细节问题
优点：写法简单
写法：
<body>
<div id="root">
<h2>值是{{n}} </h2>
<h2>减小十倍的值是<span v-big="n"></span></h><br>
<button @click="n++">点我加加一</button>
</div>
<script>
Vue.config.productionTip = false;
new Vue({
el: '#root',
data: {
n: 10
},
directives: {
big(element, binding) {
element.innerHTML = binding.value * 10
}
}
})
</script>
函数调用的时候
3.总结
- 在注册指令时用 xxx，使用时用 v-xxx
- 自定义指令里面的this指向window对象
- 指令名是由多个单词注册，使用a-b命名法，不要用aB命名法
