深入學習vue指令，自定義指令解決開發痛點

vue.js的定義是乙個mvvm框架，將它發揮到極致能夠極大的提公升工作效率。在vuejs中，指令（directive）無疑是最關鍵，最重要的一環之一，官方api自帶的指令提供了非常方便的方式，將常見的編碼場景進行提煉，使用這些指令能令人感到愉悅。

v-model

資料繫結指令，它最常見的用法是可以將指定的data物件中的屬性繫結到乙個form元素中，例如：

上面的**，我們在data物件裡建立了乙個text屬性，在標籤中使用v-model繫結到text，這時候這個input輸入框會和text屬性進行同步。當你修改input中的值，text屬性值隨之改變，然後這個改變被繫結到元素的value值上。

它的內部原理使用了html5的oninput事件，上面的**經過內部操作，其實可以表示成：

注意這段：

v-model其實只是乙個語法糖，它與angular的model是不同的。 vue中其實它通過解析，在@input事件中設定響應，在響應中修改text的值，然後再通過繫結屬性v-bind繫結value同步value值，看到這裡你應該

對v-model有了更深入的理解了吧，那麼這個知識點對我們有什麼幫助呢？

從這裡我們可以看出，v-model不僅僅可以繫結form元素，它還可以繫結元件：

上面**我們使用vue-component定義乙個元件，叫demo-el,它接受乙個prop屬性，這裡為什麼是value呢？結合上面的v-model原理再看。

原來是這樣，解析model時，繫結的就是value屬性，傳入元件就是prop啦。

v-model不能直接繫結的元素相信大家一定遇到過，那就是checkbox radio。

在建立類似核取方塊或者單選框的常見元件時，v-model就不好用了。這裡博主用自定義元件解決這個問題，

ps：現在最新版本的vue解決了一部分問題，v-model作用在checkbox上時可以繫結對應的true或者false了，但是它還不完美，例如在多選功能上，我們往往希望直接繫結選擇的多個值，而不是true或者false。

我們希望checkbox能夠根據自己的定義實現true和false的自由轉換，例如我們在專案json中，0是false，1是true，亦或者是 '是'是true，'否'是false，這要怎麼實現呢，

平時我們開發可能會在watch中監控屬性，例如：

}
} }

我們需要手動判斷n的true或false，並且在請求到資料是需要將

'是'

'否'

轉換成 true false，我們可以用自定義指令來解決這個問題。

vue.directive("checkmodel",
el.addeventlistener("click",function()
}},false);
}});

我們建立了乙個自定義指令，名稱叫checkmodel，它根據api接受三個引數，el【標籤物件】，binding繫結物件，vnode，node節點物件。

然後我們在下面規定獲取了繫結物件的value，繫結物件的condition表示式，然後將表示式的值繫結給el的checked，最後建立click監聽事件，當點選時根據表示式的值進行繫結轉換。

最後它的使用方法就像下面這樣：

我們指定1是false，2是true，然後通過v-checkmodel繫結到checkbox，在點選時候，指令會根據condition中的值轉換true和false；

你也可以基於這個中心思想，定製自己的指令，使它契合你的業務。例如我可以定義乙個全域性condition這個屬性，統管全域性的字典轉換。

（此圖**未經測試... gif錄製太大，修改思想呈現就好）

mvvm框架和webpack的出現確實改變了前端的開發方式，使得學習前端變成了一門有著深入學問的課題。在我們日常開發中應該不斷地學習，歸納，總結，尋找新的思想，對原有的**有好的補充和好的改進。