指令
Angularの定義には似ていますが、指令はDOM関数の拡張ですが、Vueの指令ははるかに弱いようです。 Vueコンポーネントには実際にはDOMの操作が含まれているため、ほとんどの場合、一般的なコンポーネントを作成するときは、指令ではなくコンポーネントであり、Angularでは一般的なコンポーネントを書きます。通常、それは指令です。
だから私は、Vueの指令はAngularよりもはるかに弱いと言ったか、それははるかに純粋であると言えます。 DOMに関連するロジックをカプセル化するのではなく、DOM関数の拡張です。興味がある場合は、これら2つのUIライブラリを比較することで理解できます。
•vux https://github.com/airyland/vux
•Angular Bootstrap https://github.com/angular-ui/bootstrap
それに比べて、VUEでは、実際に一般的なコンポーネントをカプセル化します（実際、一般的であるかどうか）がコンポーネントであることがわかりますが、Angularでは、Angularのコントローラーは$スコープスコープのみを作成できるためです。 Vue Directive = Angular Directive + Controllerで単純に考えることができます。前述のように、Vueの多くの設計はAngular2に似ています。 VUEの指令は基本的にAngular2の指令に相当する可能性がありますが、Angularの指令と混同しないでください。
誤解を招くのを避けるために、Angularディレクティブは後で比較されなくなります。
ライフサイクル
ライフサイクルは3つのステップに分かれています。
•バインドトリガーは、初めてDOM要素に縛られたときにトリガーをトリガーします
•更新バインドは、完了後すぐにトリガーされ、将来的にパラメーターが更新されるたびにトリガーされます。
•バインディングを解除し、DOM要素がバインドされていない場合、アンバインドトリガー
APIは非常に簡潔です。 。 。
その中でも、更新は最も重要なことです。つまり、ディレクティブが値の更新を受信すると、対応するコードが実行されます。更新関数によって受信されたパラメーターは、ユーザーがATTRを介して渡された値です。
以下に簡単な指令を実装しましょう。これは、TODOリストによるコンテンツ入力を検証するために使用されます（フォーム検証）。指令の基本構造は次のとおりです。
vue.directive（ "minlength"、{bind：function（）{}、update：function（value）{}、unbind：function（）{}}）;次に、ユーザーが入力されたときに確認を実行する必要があります。ここでは、単純な最小長さの検証を実装します。コードは次のとおりです。
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.minlengtion）{e.preventdefault（）; var（ el.parentnode.queryselector（ "type = 'submit']）; 関数（） { }}）;基本ロジックは、バインド段階でイベントに結合し、更新中に渡された最小値に基づいて判断を下します。
現在、指令は同様の機能を達成することであるべきであり、もちろん使用の詳細はまだたくさんあるので、詳細は説明しません。指令は、Vueの非常に重要な部分ではありません。人々は通常、コードを書くときにコンポーネントを書きます。
フィルターとミキシンは比較的シンプルに見え、スキップします。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。