vue注册自定义指令
目录
简介
钩子函数
钩子函数参数
动态指令参数
函数简写
对象字面量
简介
除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。举个聚焦输入框的例子，如下：
当页面加载时，该元素将获得焦点 (注意：autofocus 在移动版 Safari 上不工作)。事实上，只要你在打开这个页面后还没点击过任何内容，这个输入框就应当还是处于聚焦状态。现在让我们用指令来实现这个功能：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Vue 测试实例 - 菜鸟教程(runoob.com)</title><script src="https://cdn.staticfile.net/vue/2.7.14/vue.min.js"></script>
</head><body><div id="app"><p>页面载入时，input 元素自动获取焦点：</p><input v-focus></div><script>// 注册一个全局自定义指令 v-focusVue.directive('focus', {// 当绑定元素插入到 DOM 中。inserted: function (el) {console.log(el);// 聚焦元素el.focus()}})// 创建根实例new Vue({el: '#app'})</script>
</body></html> 如果想注册局部指令，组件中也接受一个 directives 的选项：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Vue 测试实例 - 菜鸟教程(runoob.com)</title><script src="https://cdn.staticfile.net/vue/2.7.14/vue.min.js"></script>
</head><body><div id="app"><p>页面载入时，input 元素自动获取焦点：</p><input v-focus></div><script>// 创建根实例new Vue({el: '#app',directives: {// 注册一个局部的自定义指令 v-focusfocus: {// 指令的定义inserted: function (el) {// 聚焦元素el.focus()}}}})</script>
</body></html>然后你可以在模板中任何元素上使用新的 v-focus property，如下：
<input v-focus>钩子函数
一个指令定义对象可以提供如下几个钩子函数 (均为可选)：
-
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 -
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。 -
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
我们会在稍后讨论渲染函数时介绍更多 VNodes 的细节。
-
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 }。
- name: 指令名，不包括
- vnode: Vue 编译生成的虚拟节点。
- oldVnode: 上一个虚拟节点，仅在
update和componentUpdated钩子中可用。
以下实例演示了这些参数的使用：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Vue 测试实例 - 菜鸟教程(runoob.com)</title><script src="https://cdn.staticfile.net/vue/2.7.14/vue.min.js"></script>
</head><body><div id="app" v-runoob:hello.a.b="message"><script>Vue.directive('runoob', {bind: function (el, binding, vnode) {var s = JSON.stringifyel.innerHTML ='name: ' + s(binding.name) + '指令名，不包括 v- 前缀。' + '<br>' +'value: ' + s(binding.value) + '指令的绑定值' + '<br>' +'expression: ' + s(binding.expression) + '字符串形式的指令表达式' + '<br>' +'argument: ' + s(binding.arg) + '传给指令的参数' + '<br>' +'modifiers: ' + s(binding.modifiers) + "一个包含修饰符的对象" + '<br>' +'vnode keys: ' + Object.keys(vnode).join(', ') + "Vue 编译生成的虚拟节点"}})new Vue({el: '#app',data: {message: '菜鸟教程!'}})</script>
</body></html> 
有时候我们不需要其他钩子函数，我们可以简写函数，如下格式：
Vue.directive('runoob', function (el, binding) {// 设置指令的背景颜色el.style.backgroundColor = binding.value.color
})指令函数可接受所有合法的 JavaScript 表达式，以下实例传入了 JavaScript 对象：
<div id="app"><div v-runoob="{ color: 'green', text: '菜鸟教程!' }"></div></div><script>Vue.directive('runoob', function (el, binding) {// 简写方式设置文本及背景颜色el.innerHTML = binding.value.textel.style.backgroundColor = binding.value.color})new Vue({el: '#app'})</script>动态指令参数
指令的参数可以是动态的。例如，在 v-mydirective:[argument]="value" 中，argument 参数可以根据组件实例数据进行更新！这使得自定义指令可以在应用中被灵活使用。
例如你想要创建一个自定义指令，用来通过固定布局将元素固定在页面上。我们可以像这样创建一个通过指令值来更新竖直位置像素值的自定义指令：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Vue 测试实例 - 菜鸟教程(runoob.com)</title><script src="https://cdn.staticfile.net/vue/2.7.14/vue.min.js"></script>
</head><body><div id="app"><p>Scroll down the page</p><p v-pin="200">Stick me 200px from the top of the page</p></div><script>Vue.directive('pin', {bind: function (el, binding, vnode) {el.style.position = 'fixed'el.style.top = binding.value + 'px'}})new Vue({el: '#baseexample'})</script>
</body></html>这会把该元素固定在距离页面顶部 200 像素的位置。但如果场景是我们需要把元素固定在左侧而不是顶部又该怎么办呢？这时使用动态参数就可以非常方便地根据每个组件实例来进行更新。
<div id="dynamicexample"><h3>Scroll down inside this section ↓</h3><p v-pin:[direction]="200">I am pinned onto the page at 200px to the left.</p>
</div>Vue.directive('pin', {bind: function (el, binding, vnode) {el.style.position = 'fixed'var s = (binding.arg == 'left' ? 'left' : 'top')el.style[s] = binding.value + 'px'}
})new Vue({el: '#dynamicexample',data: function () {return {direction: 'left'}}
})这样这个自定义指令现在的灵活性就足以支持一些不同的用例了。
函数简写
在很多时候，你可能想在 bind 和 update 时触发相同行为，而不关心其它的钩子。比如这样写：
Vue.directive('color-swatch', function (el, binding) {el.style.backgroundColor = binding.value
})对象字面量
如果指令需要多个值，可以传入一个 JavaScript 对象字面量。记住，指令函数能够接受所有合法的 JavaScript 表达式。
<div v-demo="{ color: 'white', text: 'hello!' }"></div>Vue.directive('demo', function (el, binding) {console.log(binding.value.color) // => "white"console.log(binding.value.text) // => "hello!"
})