Directive

看上去雖然和Angular中的定義類似，Directive 都是對(duì)DOM功能的一種拓展，但是 Vue 的 Directive 要弱的多。因?yàn)?Vue Component 其實(shí)本來(lái)就會(huì)包含對(duì)DOM的操作，所以大多數(shù)時(shí)候我們寫一個(gè)通用組件都是一個(gè)Component 而不是一個(gè) Directive，而 在 Angular 我們寫一個(gè)通用的組件一般都是一個(gè) Directive 。
所以我說(shuō) Vue 的 Directive 相比于 Angular 要弱的多，也可以說(shuō)純粹的多，他就是對(duì) DOM 功能的一個(gè)拓展，而不是為了封裝和DOM相關(guān)的邏輯。有興趣可以通過(guò)對(duì)比這兩個(gè)UI庫(kù)就能明白：
 •Vux https://github.com/airyland/vux
 •Angular Bootstrap https://github.com/angular-ui/bootstrap 

對(duì)比就會(huì)發(fā)現(xiàn)，其實(shí)在 Vue 中我們封裝一個(gè)通用的組件（其實(shí)不管是不是通用）都是一個(gè) Component，但是在 Angular 中卻是一個(gè) Directive，因?yàn)?Angular 中的 Controller 其實(shí)只能創(chuàng)建一個(gè) $scope 作用域?？梢院?jiǎn)單的認(rèn)為在 Vue Directive = Angular Directive + Controller。前面講到過(guò) Vue 很多設(shè)計(jì)都和Angular2類似，Vue 中的 Directive 基本可以等價(jià)于 Angular2 的 Directive，但是千萬(wàn)不要和 Angular 中的 Directive 搞混了。

為了避免誤導(dǎo)，所以后面不再拿 Angular Directive 作對(duì)比了。

生命周期

生命周期分為三步：
 •bind 第一次綁定到DOM元素上的時(shí)候觸發(fā)
 •update bind完成之后立刻觸發(fā)，以后每當(dāng)參數(shù)更新的時(shí)候都會(huì)觸發(fā)
 •unbind 解除和DOM元素的綁定時(shí)觸發(fā) 

API 簡(jiǎn)潔到哭。。。
其中 update 是最重要的，也就是當(dāng) Directive 接收到一個(gè)值的更新的時(shí)候就會(huì)執(zhí)行對(duì)應(yīng)的代碼。update函數(shù)接收的參數(shù)就是用戶通過(guò) Attr 傳入的值。

我們下面實(shí)現(xiàn)一個(gè)簡(jiǎn)單的 Directive，它的作用是對(duì) Todo List 輸入的內(nèi)容進(jìn)行校驗(yàn)（表單校驗(yàn)）。Directive 基本結(jié)構(gòu)如下：

Vue.directive("minlength", {
 bind: function() {
 },
 update: function(value) {
 },
 unbind: function() {
 }
});

 然后，我們需要在用戶輸入的時(shí)候進(jìn)行校驗(yàn)，這里實(shí)現(xiàn)一個(gè)簡(jiǎn)單的 minlength 校驗(yàn)，代碼如下：

Vue.directive("minlength", {
 bind: function() {
 var self = this;
 var el = this.el;
 el.addEventListener("keydown", function(e) {
  if(e.keyCode === 13) {
  if(el.value.length < self.minlength) {
   e.preventDefault();
  }
  }
 });
 var submit = el.parentNode.querySelector("button, [type='submit']");
 submit.disabled = true;
 el.addEventListener("keyup", function(e) {
  submit.disabled = (el.value.length < self.minlength);
 });

 },
 update: function(value) {
 this.minlength = parseInt(value);
 },
 unbind: function() {
 }
});

基本邏輯就在在 bind 階段的時(shí)候就綁定事件，然后根據(jù) update 時(shí)候傳入的 minlength 值來(lái)進(jìn)行判斷。

目前看，Directive 應(yīng)該就是為了實(shí)現(xiàn)類似的功能存在的，當(dāng)然還有很多細(xì)枝末節(jié)的用法就不再細(xì)講了。Directive 在 Vue 中并不是很重要的一塊，大家平時(shí)寫代碼的時(shí)候更多還是寫 Component。

Filter 和 Mixins 看起來(lái)比較簡(jiǎn)單，略過(guò)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論