如何实现Vue中v-bind:style效果的自定义指令详解？

本文共计1675个文字，预计阅读时间需要7分钟。

自定义指令+1.什么是自定义指令？以+v-为前缀，后面加上自己定义的好看的名字组成的指令就是自定义指令。为什么要自定义指令呢？在有些时候，你也许需要对普通的DOM元素进行操作。“

自定义指令

1.什么是自定义指令

以 v- 为前缀，然后加上自己定义好的名字组成的一个指令就是自定义指令。为什么要有自定义指令呢？在有些时候，你仍然需要对普通的DOM元素进行底层的操作，这个时候就可以用到自定义指令。

2.自定义指令的语法

全局自定义指令

// 注册一个全局自定义指令 `v-focus` Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() } })

局部自定义指令

directives: { focus: { // 指令的定义 inserted: function (el) { el.focus() } } }

3.钩子函数

看了上述的代码，如果你从来没接触过这类内容，你可能会很生疏，下面我给大家讲讲其每一步所需要掌握的东西

首先是钩子函数：

bind ：只会调用一次的函数，表示指令第一次绑定元素时调用

inserted ：被绑定元素插入到父节点时调用(仅保证父节点存在，但不一定已被插入文档中)。

update ：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。