Vue除了内置的v-bind、v-model、v-once、v-pre等内置指令外，我们还可以注册自定义指令，以便封装对DOM元素的重复处理行为，提高代码的复用率。
指令的注册
自定义指令分为两种，全局自定义指令及组件（局部）自定义指令。全局自定义指令在所有组件中都可以使用，组件（局部）自定义指令顾名思义，只能在当前组件中使用。
全局自定义指令
全局自定义指令通过Vue.directive(id,definition)进行注册。
如下，我们定义一个自动获取焦点的自定义组件。实现功能，当页面打开时，让<input>控件自动获取焦点。
<html>
<head>
<title></title>
</head>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js" type="text/javascript"></script>
<body>
<div id='app'>
<input type="text" v-g-focus="'1111'"/>
</div>
<script>
Vue.directive('gFocus', {
inserted: function (el,binding) {
el.focus();
}
})
let vm = new Vue({
el: '#app'
})
</script>
</body>
</html>
组件（局部）自定义指令
组件（局部）自定义指令通过组件的directives进行注册，如下
let comp = Vue.extend({
directives: {
'localDirective': {}
}
})该指令只能在当前组件内调用，其他组件无法使用。
指令的定义对象
我们在注册指令的同时，可以传入definition定义对象，对指令赋予一些特殊的功能。这些对象主要包括五个钩子函数。
bind:只被调用一次，在指令第一次绑定到元素上时调用。
inserted:指令所绑定的元素插入到DOM中时调用
update:指令在绑定之后以初始值作为参数进行第一次调用，之后每次当绑定值发生变化时调用。描述的是组件更新前的状态。
componentUpdated:被绑定元素所在模板完成一次更新周期时调用。描述的是组件更新后的状态
unbind:只被调用一次，当指令与元素解绑时调用。
我们可以通过以下代码简单看一下使用方法
<div id='app'>
<input type="text" v-g-focus="param" v-if="exist" />
</div>
<script>
Vue.directive('gFocus', {
bind:function(el, binding){
console.log('bind:' + binding.value)
},
inserted: function (el, binding) {
el.focus();
console.log('inserted:' + binding.value)
},
update: function (el, binding) {
console.log('update:' + binding.value)
},
unbind:function(el, binding){
console.log('unbind:' + binding.value)
},
componentUpdated:function(el, binding){
console.log('componentUpdated:' + binding.value)
},
})
let vm = new Vue({
el: '#app',
data: {
param: 'first',
exist: true
}
})
</script>当我们第一次打开页面时，查看控制台，会看到如下输出
我们在控制台输入vm.param='second'，可以看到如下输出
我们在控制台输入vm.exist=false，可以看到如下输出
钩子函数参数
钩子函数参数 (即 el、binding、vnode 和 oldVnode)
指令钩子函数会被传入以下参数：
el：指令所绑定的元素，可以用来直接操作DOM。
binding：一个对象，包含以下属性：
name：指令名，不包括v-前缀。
value：指令的绑定值，例如：我们上面代码传递的param。
oldValue：指令绑定的前一个值，仅在update和componentUpdated钩子中可用。无论值是否改变都可用。
expression：字符串形式的指令表达式。例如v-my-directive="1 + 1"中，表达式为1 + 1。
arg：传给指令的参数，可选。例如v-my-directive:foo中，参数为foo。
modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
vnode：Vue 编译生成的虚拟节点。
oldVnode：上一个虚拟节点，仅在update和componentUpdated钩子中可用。
评论 (0)