vue创建自定义指令

vue创建自定义指令

作用：操作dom

使用场景：对纯 DOM 元素进行底层操作，比如：文本框获得焦点

自定义指令分为：全局自定义指令、局部自定义指令

全局指令

示例：
功能：完成输入框的获取焦点操作
<div id="app">
<!-- 使用 自定义指令，在自定义指令的前面添加 v- 前缀 -->
<input type="text" v-model="msg" v-if="isShow" v-focus:foo="123 + 1">
</div>

<script>
// 创建全局指令
// 第一个参数：表示指令的名称，不带 v- 前缀
// 第二个参数：表示一个配置对象，对象中是指令的 钩子函数
/* Vue.directive('focus', {
// inserted 在元素被插入到页面中的时候调用
inserted: function (el) {
// el 表示当前元素, 是一个DOM对象
el.focus()
}
}) */

Vue.directive('focus', {
// 指令的钩子函数--第一次绑定元素时调用
bind(el) {
console.warn('指令的钩子函数：bind');
console.log(el);
// el.focus()
},

// inserted 在元素被插入到页面中的时候调用---vm实例的钩子函数
inserted: function (el, binding) {
console.warn('指令的钩子函数：inserted');

// binding是一个对象，包括指令的所有信息
console.log(binding);

// 其中foo是指令参数--可以打印看看
console.log(binding.arg);

// el 表示当前元素, 是一个DOM对象
el.focus()
},

// 指令的钩子函数，只调用一次，指令与元素解绑时调用（即当标签被删除时）。
unbind() {
// 当指令所在的元素，从页面中移除的时候，unbind钩子函数会被执行
console.warn('指令的钩子函数：unbind');
}
})

var vm = new Vue({
el: '#app',
data: {
msg: '',
isShow: true
}
})
</script>

局部指令

用法和全局指令一样，只是在vm实例内部定义，只能被这一个实例使用，而全局只能可以被多个实例使用。

示例：
功能：完成输入框的获取焦点操作
<div id="app">
<!-- 使用 自定义指令，在自定义指令的前面添加 v- 前缀 -->
<input type="text" v-model="msg" v-if="isShow" v-focus:foo="123 + 1">
</div>

<script>
// 实现的功能一样
var vm = new Vue({
el: '#app',
data: {
msg: '',
isShow: true
},
directives:{
focus:{
// 创建局部指令
// inserted 在元素被插入到页面中的时候调用---vm实例的钩子函数
inserted: function (el, binding) {
console.warn('指令的钩子函数：inserted');

// binding是一个对象，包括指令的所有信息
console.log(binding);

// 其中foo是指令参数--可以打印看看
console.log(binding.arg);

// el 表示当前元素, 是一个DOM对象
el.focus()
})
}
}
})
</script>

详解自定义指令钩子函数

链接地址：https://cn.vuejs.org/v2/guide/custom-directive.html

bind

：只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。

inserted

：被绑定元素插入父节点时调用 (父节点存在即可调用，不必存在于 document 中)。

update

：所在组件的 VNode 更新时调用，但是可能发生在其孩子的 VNode 更新之前。指令的值可能发生了改变也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

componentUpdated

：所在组件的 VNode 及其孩子的 VNode 全部更新时调用。

unbind

：只调用一次，指令与元素解绑时调用。

接下来我们来看一下钩子函数的参数 (包括

el

，

binding

，

vnode

，

oldVnode

)。

钩子函数参数：

el：指令所绑定的元素，可以用来直接操作 DOM 。

binding：一个对象，包含以下属性：name：指令名，不包括

v-

前缀。value：指令的绑定值，例如：

v-my-directive="1 + 1"

, value 的值是

2

。oldValue：指令绑定的前一个值，仅在

update

和

componentUpdated

钩子中可用。无论值是否改变都可用。expression：绑定值的字符串形式。例如

v-my-directive="1 + 1"

，expression 的值是

"1 + 1"

。arg：传给指令的参数。例如

v-my-directive:foo

，arg 的值是

"foo"

。modifiers：一个包含修饰符的对象。例如：

v-my-directive.foo.bar

, 修饰符对象 modifiers 的值是

{ foo: true, bar: true }

。

vnode：Vue 编译生成的虚拟节点，查阅 VNode API 了解更多详情。

oldVnode：上一个虚拟节点，仅在

update

和

componentUpdated

钩子中可用。

简写模式

大多数情况下，我们可能想在

bind

和

update

钩子上做重复动作，并且不想关心其它的钩子函数。可以这样写:

Vue.directive('color-swatch', function (el, binding) {
el.style.backgroundColor = binding.value
})