Vue提供了一些常用的指令给我们,如
v-html/v-show/v-model等,但有时候想扩展自定义指令,完成特定的操作,vue也提供了相关的功能
语法
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
//被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)
// 聚焦元素
el.focus()
},
bind(){
//只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
},
update(){
//所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。
//指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
}
})
简写形式
//此写法简化了 bind 和 update
Vue.directive('demo', function (el, binding) {
console.log(binding.value.color) // => "white"
console.log(binding.value.text) // => "hello!"
})
案例: 实现一个v-red指令,标签加入后变红色
Vue.directive("red", (el, data) => {
el.style.color = "red"
})
调用时: <h1 v-red>xuew</h1>
指令也分为局部指令和全局指令,局部指令只有当前实例才能使用
//全局指令
Vue.directive("red", (el, data) => {
el.style.color = "red"
})
//局部指令写在VUE实例里
directives: {
color: (el, data) => {
el.style.color = data.value
}
},
