7週間7種類のフロントエンドフレーム4:Vue.js Directive

Directive
Angularの定義と似ているように見えますが、DirectiveはDOM機能の拡張ですが、VueのDirectiveはずっと弱いです.Vue ComponentはもともとDOMに対する操作を含んでいるので、多くの場合、ComponentではなくDirectiveと書かれていますが、Angularでは一般的にDirectiveと書かれています.だから私はVueのDirectiveがAngularに比べて弱いと言って、純粋な多さと言ってもいいです.彼はDOMに関する論理をカプセル化するためではなく、DOM機能の拡張です.興味があれば、この2つのUIライブラリを比較することで理解できます.

Vux https://github.com/airyland/vux

Angular Bootstrap https://github.com/angular-ui/bootstrap

比較すると、Vueでは共通のコンポーネント(共通かどうかにかかわらず)をパッケージ化するのはComponentですが、AngularではDirectiveです.AngularのControllerは実際には$scopeの役割ドメインしか作成できないからです.Vue Directive = Angular Directive + Controllerで簡単に考えられます.前述したように、Vueの多くのデザインはAngular 2と似ています.VueのDirectiveは基本的にAngular 2のDirectiveに等価ですが、AngularのDirectiveと混同してはいけません.
誤導を避けるため、後からAngular Directiveを比較しなくなった.
ライフサイクル
ライフサイクルは3つのステップに分かれています.

bindがDOM要素に最初にバインドされたときに

がトリガーされる.

update bindが完了するとすぐにトリガーされ、以降パラメータが更新されるたびに

がトリガーされる.

unbind解除とDOM要素のバインド時に

がトリガーされる
APIは泣くほど簡潔...このうちupdateが最も重要であり、すなわちDirectiveが1つの値の更新を受信すると対応するコードが実行される.update関数が受信するパラメータは、Attrを介してユーザが入力した値である.
次に、Todoリストに入力された内容を検証(フォーム検証)する役割を果たす簡単なDirectiveを実現します.Directiveの基本構造は次のとおりです.

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

次に、ユーザーが入力したときに検証する必要があります.ここでは、簡単なminlength検証を実現します.コードは以下の通りです.

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段階でイベントをバインドし、update時に渡されたminlength値に基づいて判断する.
今のところ、Directiveは似たような機能を実現するために存在するはずだが、もちろん細かい使い方はもう詳しく話さないことが多い.DirectiveはVueでは重要ではありませんが、普段コードを書くときはCorponentを書くことが多いです.
FilterとMixinsは簡単に見えますが、省略します.