文章目錄一、vue中內(nèi)置的指令v-text 指令用于將數(shù)據(jù)填充到標(biāo)簽中，作用和插值表達(dá)式類似，但是不會出現(xiàn)閃動問題。
v-html 指令用于將HTML片段填充到標(biāo)簽中，可能有安全問題。
v-pre 指令用于顯示原始信息。
v-once 指令是只渲染一次，后面元素中的數(shù)據(jù)再更新變化，都不會重新渲染。
v-for 指令用于遍歷，把一個(gè)數(shù)組對應(yīng)為一組元素。
v-on 指令監(jiān)聽 DOM 事件，并在觸發(fā)時(shí)運(yùn)行一些 JavaScript 代碼。指令簡寫為 @
v-bind 指令用于屬性綁定,把數(shù)據(jù)綁定在HTML元素的屬性上，指令簡寫為 : 要綁定的屬性。
v-model 指令可以實(shí)現(xiàn)表單元素和 Model 中數(shù)據(jù)的雙向數(shù)據(jù)綁定。
v-if & v-else-if & v-else 指令用于條件渲染。
v-if & v-show 指令用于隱藏和顯示元素
v-if 的特點(diǎn)：每次都會重新刪除或創(chuàng)建元素
v-show 的特點(diǎn)： 每次不會重新進(jìn)行DOM的刪除和創(chuàng)建操作，只是切換了元素的 display:none 樣式
注意：
① 如果元素涉及到頻繁的切換，最好不要使用 v-if 指令, 應(yīng)該選擇使用 v-show 指令； ② 如果元素可能一直不會被顯示出來被用戶看到，則選擇使用 v-if 指令
二、vue中自定義指令在 Vue2.0 中，代碼復(fù)用和抽象的主要形式是組件。然而，有的情況下，開發(fā)人員仍然需要對普通 DOM 元素進(jìn)行底層操作，這時(shí)候就會用到自定義指令。
1. 自定義全局指令注冊一個(gè) v-focus 指令，實(shí)現(xiàn)了在頁面加載完成之后自動讓輸入框獲取到焦點(diǎn)的小功能。 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>全局自定義指令</title><script src="js/vue.js"></script></head><body><div id="app"><p>頁面載入時(shí)，input 元素自動獲取焦點(diǎn)：</p><input type="text" placeholder="我是全局自定義指令" v-focus></div><script>// 注冊一個(gè)全局自定義指令 `v-focus`Vue.directive('focus', {// 當(dāng)被綁定的元素插入到 dom 中時(shí)…… ，其中參數(shù) el 為dom元素inserted: function (el) {// 聚焦元素el.focus()}})var vm = new Vue({el: '#app',data: {}})</script></body></html>
只要打開這個(gè)頁面后還沒點(diǎn)擊過任何內(nèi)容，這個(gè)輸入框就應(yīng)當(dāng)還是處于聚焦?fàn)顟B(tài)。
效果演示： 
2. 自定義局部指令<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>局部自定義指令</title><script src="js/vue.js"></script></head><body><div id="app"><input type="text" placeholder="我是局部自定義指令" v-color="color"></div><script>var vm = new Vue({el: '#app',data: {color: 'red'},// 注冊一個(gè)局部自定義指令 `v-color`directives: {color: {// binding 為自定義的函數(shù)形參,通過自定義屬性傳遞過來的值,存到 binding.value 里面bind: function (el, binding) { // 根據(jù)指令的參數(shù)進(jìn)行設(shè)置背景色 el.style.backgroundColor = binding.value}}}})</script></body></html>
只要通過指令綁定給了元素，不管元素有沒有被插入到頁面中去，這個(gè)元素肯定會有一個(gè)內(nèi)聯(lián)樣式.
效果演示：
 注意：
3. 鉤子函數(shù)① 指令定義對象可以提供如下幾個(gè)鉤子函數(shù) (均為可選)： | 鉤子函數(shù) | 使用 |
|---|
| bind | 只調(diào)用一次，指令第一次綁定到元素時(shí)調(diào)用。在這里可以進(jìn)行一次性的初始化設(shè)置。 | | inserted | 被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用 (僅保證父節(jié)點(diǎn)存在，但不一定已被插入文檔中)。 | | update | 所在組件的 VNode 更新時(shí)調(diào)用，但是可能發(fā)生在其子 VNode 更新之前。指令的值可能發(fā)生了改變，也可能沒有。但是你可以通過比較更新前后的值來忽略不必要的模板更新 。 | | componentUpdated | 指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用。 | | unbind | 只調(diào)用一次，指令與元素解綁時(shí)調(diào)用。 |
② 指令鉤子函數(shù)會被傳入以下參數(shù)： | 參數(shù) | 說明 |
|---|
| el | 指令所綁定的元素，可以用來直接操作 DOM。 | | binding | 綁定一個(gè)對象。 | | vnode | Vue 編譯生成的虛擬節(jié)點(diǎn)。 | | oldVnode | 上一個(gè)虛擬節(jié)點(diǎn)，僅在 update 和 componentUpdated 鉤子中可用。 |
③ 綁定對象屬性說明： | 屬性 | 說明 | 示例 |
|---|
| name | 指令名，不包含前綴 v-。 | v-focus 中的 focus。 | | value | 指令的綁定的值（計(jì)算后）。 | v-my-directive=“1 + 1” 中，綁定值為 2。 | | oldValue | 指令綁定的前一個(gè)值，僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。 | —— | | expression | 字符串形式的指令表達(dá)式（不計(jì)算）。 | v-my-directive=“1 + 1” 中，表達(dá)式為 “1 + 1”。 | | arg | 傳給指令的參數(shù)，可選。 | v-my-directive:foo 中，參數(shù)為 “foo”。 | | modifiers | 一個(gè)包含修飾符的對象。 | v-my-directive.foo.bar 中，修飾符對象為 { foo: true, bar: true }。 |
|
