Vue的土著指令和自定義指令實(shí)例詳解

1.土著指令

　　當(dāng)我開(kāi)始學(xué)習(xí)Vue的時(shí)候，看官網(wǎng)的時(shí)候看到了“指令”兩個(gè)字。我愣住了，what？指令是啥啊？后來(lái)繼續(xù)往下看，像這種什么“v-for”“v-show”“v-if”都叫做指令。等到后來(lái)Vue玩的差不多了，開(kāi)始寫(xiě)項(xiàng)目的時(shí)候發(fā)現(xiàn)，常見(jiàn)的指令也就那么幾個(gè)，比如“v-if”“v-show”“v-model”“v-for”“v-bind”“v-on”。

　　你可以認(rèn)為這是一種語(yǔ)法糖或者這是一種命令。在常見(jiàn)的這些指令中，大體的使用方法如下：

1.v-text ：string  用法：更新元素的textContent,更新部分的textContent，需要使用{{Mustache}}插值。

2.v-show：any 用法：根據(jù)表達(dá)式真假值，切換元素的 display css 屬性 。

3.v-if：any  用法：表達(dá)式的真假條件渲染元素。在切換時(shí)元素以及它的數(shù)據(jù)綁定/組件被銷毀并且重建。如果是<template>,并提出它的內(nèi)容作為條件塊。 條件變化時(shí)改指令出發(fā)過(guò)渡效果。

4.v-for :Array | Object | number | string  用法：基于源數(shù)據(jù)多次渲染元素或者模板塊 語(yǔ)法：alias in expression。

5.v-on：Function |  Inline Statement  參數(shù) $event( required) 修飾符。　

6.v-bind：any 類型: any (with argument)  | Object  (without argument) 參數(shù)：attrOrProp (optional) ;修飾符： .prop ---被用于綁定DOM 屬性；.camel ---transform the kebab-case attribute name into camelCase .(supported since 2.1.0) 用法： 在綁定 class 和 style 特性時(shí)，支持其它類型的值。如對(duì)象和數(shù)組；在綁定prop時(shí)，子組件必須聲明prop。

7.v-model ：限制<input> <select> components 。

2.自定義指令

　　　但是，僅僅靠上面的這些有時(shí)候是不夠的，比如最近我司做的一個(gè)項(xiàng)目中，UI做了一個(gè)頁(yè)面。然后我和UI在聊需求的時(shí)候，我說(shuō)這個(gè)輸入框吧最好給他加一個(gè)效果，彈出輸入框的時(shí)候獲得焦點(diǎn)，顯示一個(gè)跳動(dòng)的光標(biāo)。這樣用戶可以更清楚的看到在哪輸入。

　　達(dá)成共識(shí)之后，寫(xiě)功能的時(shí)候我突然發(fā)現(xiàn)，WTF？我這是用的Vue啊，數(shù)據(jù)驅(qū)動(dòng)視圖啊，總不能document.getElementById(inputid).focus()吧。

　　于是乎，我就去找文檔，突然發(fā)現(xiàn)了一個(gè)單詞directive，我去查了查這個(gè)單詞的意思：

　　看了一下文檔，大體意思就是，雖然吧這個(gè)v-model和v-show已經(jīng)很好用了，但是總是擋不住天馬行空的前端人員的騷操作，所以在有的情況下，需要對(duì)普通 DOM 元素進(jìn)行底層操作，這時(shí)候就會(huì)用到自定義指令。當(dāng)然呢，官方的例子就是我需要的這個(gè)，當(dāng)即我就get了一波新知識(shí)。

　　如同我隨手寫(xiě)下的這個(gè)HTML，里面有一個(gè)v-focus，大概沒(méi)見(jiàn)過(guò)，這是啥？別急，繼續(xù)往下看：

　　沒(méi)錯(cuò)，這個(gè)v-focus就是我自己定義的指令，當(dāng)然啦，你也可以用除了關(guān)鍵字之外的單詞去命名，方便自由。

　　我們來(lái)看一下這個(gè)自定義指令，相信大家對(duì)下面的這部分都明白，無(wú)非就是如果value的值等同于true，那么el就focus即獲得焦點(diǎn)。

　　那個(gè)前面的update什么意思呢？update是更新的意思，這是一個(gè)鉤子函數(shù)，即focusState更新時(shí)調(diào)用function，在調(diào)用函數(shù)時(shí)，繼續(xù)判斷focusState——如果真，則獲得焦點(diǎn)；為假，一邊涼快去吧。同樣，我們?cè)诓榭垂俜轿臋n的時(shí)候，就會(huì)發(fā)現(xiàn)，同樣的鉤子函數(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ā)生了改變，也可能沒(méi)有。但是你可以通過(guò)比較更新前后的值來(lái)忽略不必要的模板更新。

•componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用。

•unbind：只調(diào)用一次，指令與元素解綁時(shí)調(diào)用。

利用這些操作，我們可以完成很多比較騷的套路，比如可以在加載大的圖片時(shí)，可以先用純色占位，當(dāng)圖片加載完成后才直接渲染出來(lái)。例如下圖：

　　在這個(gè)例子中，我們調(diào)用的鉤子函數(shù)是inserted，即插入父節(jié)點(diǎn)后觸發(fā)。當(dāng)圖片還未加載好時(shí)，先用隨機(jī)的顏色代替，等圖片加載好之后，去掉背景色，替換成圖片。

　　我們?cè)诖颂巶魅氲膮?shù)為el----當(dāng)前的dom節(jié)點(diǎn)和binding-----一個(gè)對(duì)象，包含以下屬性：

•def:鉤子函數(shù)。

•rawName：指令的名稱。

•value：向指令傳入的值

　　　　同樣，我們也可以封裝多種已經(jīng)造好的輪子為自定義指令。畢竟，我們站在巨人的肩膀上才會(huì)看的更遠(yuǎn)，走的更遠(yuǎn)。