Vue自定义指令写法与个人理解

什么是Vue指令?

指令是一种可以附加到DOM元素的微命令(tiny commands). 它们通常以"v-"作为前缀, 以方便Vue知道你在使用一种特殊的标记, 从而确保语法的一致性. 如果你需要对HTML元素的低级别(low-level)访问来控制一些行为, 它们通常很有用.

如果你正在使用Vue(或者Angular), 你可能已经很熟悉其中的一些指令, 如: v-if, v-else等等. 我们将从了解一些基础开始, 但是如果你更愿意直接看例子, 请直接往下滚动. 这些例子也能很好的让你理解这些概念.

以下是一些指令的使用方法, 以及对应的例子片段. 这些例子不是规定性的, 它们只是一些用例. 这里的"例子"实际上是"指令".

v-example: 这将实例化一个指令, 但不接受任何参数. 虽然不带参数的指令, 在使用的过程中并不是很灵活, 但是你仍然可以通过这种类型的指令对DOM元素做一些操作.

v-example="value": 这将传递一个值给指令, 并且该指令根据该值计算出要做的操作.

<div v-if="stateExample">I will show up if stateExample is true</div>

v-example="'string'": 这将让你把'string'作为一个表达式.

<p v-html="'<strong>this is an example of a string in some text</strong>'"></p>

v-example:arg="value": 这允许我们传入一个参数给指令. 下面的例子中, 我们绑定到一个类, 将其样式化为一个对象, 单独存储.

<div v-bind:class="someClassObject"></div>

v-example:arg.modifier="value": 这允许我们使用修饰语. 下面的例子中, 允许我们在点击事件时, 调用preventDefault().

<button v-on:submit.prevent="onSubmit"></button>

理解Vue自定义指令

既然我们已经大致过了一遍所有的我们所用过的指令类型方法, 让我们想一想我们如何通过自己编写的自定义指令来实现它们? 使用自定义指令的一个很好的例子是滚动事件, 让我们看看如何实现它.

首先, 最基本的是如何创建一个全局的指令. (是的, 它什么也不做.) 仅仅是创建了一个指令.

Vue.directive('tack');

HTML:

<p v-tack>This element has a directive on it</p>

我们有几个可用的钩子, 每个钩子可以选择一些参数. 钩子如下:

bind: 一旦指令附加到元素时触发
inserted: 一旦元素被添加到父元素时触发
update: 每当元素本身更新(但是子元素还未更新)时触发
componentUpdate: 每单组件和子组件被更新时触发
unbind: 一旦指令被移除时触发

就个人而言, bind和update也许是这五个里面最有用的两个钩子了.
每个钩子都有el, binding, 和vnode参数可用. update和componentUpdated钩子还暴露了oldVnode, 以区分传递的旧值和较新的值.