什么是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, 以區分傳遞的舊值和較新的值.