vue.js深入篇(五、自定义指令)

桃扇骨 2024-04-17 16:35 71阅读 0赞

需要对纯 DOM 元素进行底层操作,可以会用到自定义指令；

下面这个例子将聚焦一个 input 元素，像这样：

![format_png][]

当页面加载时，元素将获得焦点。事实上，你访问后还没点击任何内容，input 就获得了焦点。现在让我们完善这个指令：

也可以注册局部指令，组件中接受一个 directives 的选项：

![format_png 1][]

然后你可以在模板中任何元素上使用新的 v-focus 属性：

![format_png 2][]

### 钩子函数 ###

指令定义函数提供了几个钩子函数（可选）：

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

inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。

update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。

componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。

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 钩子中可用。除了 el 之外，其它参数都应该是只读的，尽量        不要修改他们。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。

一个使用了这些参数的自定义钩子样例：

![format_png 3][]

函数简写

大多数情况下，我们可能想在 bind 和 update 钩子上做重复动作，并且不想关心其它的钩子函数。可以这样写:

![format_png 4][]

对象字面量

如果指令需要多个值，可以传入一个 JavaScript 对象字面量。记住，指令函数能够接受所有合法类型的 Javascript 表达式。

![format_png 5][]

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9zczEuYmFpZHUuY29tLzZPTlhzamlwMFFJWjh0eWhucS9pdC91PTk4NjM2MDY1Myw2NTc5MTk4NjImZm09MTczJmFwcD0yNSZmPUpQRUc_dz02NDAmaD00MTAmcz1FMkUwQjM0MTlBQTZEMzZDNDJFNTY0MEYwMDAwRTBDMg?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9zczIuYmFpZHUuY29tLzZPTllzamlwMFFJWjh0eWhucS9pdC91PTk0NDUxMDExNyw4MzcxMjg1NTYmZm09MTczJmFwcD0yNSZmPUpQRUc_dz02NDAmaD0xNDEmcz1FQUQyODM0NkVGQTJGNzc0MUNGOEQ0MEYwMDAwRTBDMg?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9zczIuYmFpZHUuY29tLzZPTllzamlwMFFJWjh0eWhucS9pdC91PTE3MjY3OTczMjksMjkyNjY3ODE0NyZmbT0xNzMmYXBwPTI1JmY9SlBFRz93PTY0MCZoPTYw?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9zczEuYmFpZHUuY29tLzZPTlhzamlwMFFJWjh0eWhucS9pdC91PTM4MjgzMzc0NzQsMjYyNDcwNTU3MCZmbT0xNzMmYXBwPTI1JmY9SlBFRz93PTY0MCZoPTUzOCZzPUUyQzBCMzQwOTJCRkQ0NkUwNkUxMjkwQjAwMDA3MEMy?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9zczEuYmFpZHUuY29tLzZPTlhzamlwMFFJWjh0eWhucS9pdC91PTMwODkzMzU1NDYsMzM0Mzc0OTg5NiZmbT0xNzMmYXBwPTI1JmY9SlBFRz93PTY0MCZoPTEwMA?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9zczIuYmFpZHUuY29tLzZPTllzamlwMFFJWjh0eWhucS9pdC91PTIyODE1MTA3MzYsMzE2NDExMTA5JmZtPTE3MyZhcHA9MjUmZj1KUEVHP3c9NjQwJmg9MTU4JnM9RTJCMDMzQzBDRDg0OEQ3MDAwRDU0NTA5MDAwMEEwQzI?x-oss-process=image/format,png