1.自定义指令的使用

在组件中定义一个自定义指令，作用：将当前DOM节点中字体颜色设置为红色。

在自定义指令中简化了钩子函数，下面的钩子函数相当于 bind 和 unbind 的缩写：

在页面结构中，通过 v-set-red 来使用上面自定义的指令：

2.认识自定义指令的钩子函数

自定义指令也是存在生命周期的，也存在生命周期钩子。

在实际使用的时候，一般只关注三个钩子函数：

• 绑定时调用的钩子 bind
• 被绑定元素插入父节点时调用的钩子 inserted
• 解绑时调用的钩子 unbind

在实际调用的时候，bind和inserted都会调用，而unbind只有在页面热刷新(即在vue-cli中增加或删除节点)的时候才会调用。

钩子函数的参数可以参照官网的内容：

3.钩子函数参数el

• el 当前的DOM节点
• el.style 当前节点的样式，如el.style.width
• el.dataset 当前节点的自定义属性，如data-test="123"

输出的结果：

 "text" "内容" "wang" "100%"

可以看出 el el.value el.dataset.test el.style.width 分别输出的内容是什么。

4.参考内容