Vue.directive() の使い方を詳しく説明します (例を含む詳細なチュートリアル)

この記事では主に Vue.directive() の使用法と例を紹介します。必要な方は公式 Web サイトの例を参照してください:

https://cn.vuejs.org/v2/api/#Vue-directive

https://cn.vuejs.org/v2/guide/custom-directive.html

ディレクティブ定義関数には、いくつかのフック関数が用意されています (オプション):

bind: ディレクティブが初めて Called にバインドされたときに、1 回だけ呼び出されます。要素が呼び出されるときに、このフック関数を使用して、バインド時に 1 回実行される初期化アクションを定義できます。

inserted: バインドされた要素が親ノードに挿入されるときに呼び出されます (親ノードが存在する限り呼び出すことができ、必ずしもドキュメント内にある必要はありません)。

update: バインディング値が変更されるかどうかに関係なく、バインドされた要素が配置されているテンプレートが更新されるときに呼び出されます。更新前後のバインディング値を比較することで、不要なテンプレートの更新を無視することができます（フック関数のパラメータの詳細については下記を参照）。

componentUpdated: バインドされた要素が配置されているテンプレートが更新サイクルを完了すると呼び出されます。

unbind: 命令が要素からバインド解除されるときに 1 回だけ呼び出されます。

私は初心者で、公式 Web サイトを見て混乱しましたが、Baidu

の例と使用法、非常に奥深いものもあれば、完璧ではないものもあります。2 つの簡単なデモを投稿しました。ご覧ください:

Vue.directive()1、公式 Web サイトが提供するデモ、ページ入力を更新し、自動的にフォーカスを取得します:

<p id="app"> 
<SPAN style="WHITE-SPACE: pre"> </SPAN><input type="text" v-focus/> 
</p> 

<p id="app">
 <input type="text" v-focus/>
</p>

// 注册一个全局自定义指令 v-focus  
Vue.directive(&#39;focus&#39;, { 
  // 当绑定元素插入到 DOM 中。  
  inserted: function (el,binding) { 
    <SPAN style="WHITE-SPACE: pre"> </SPAN>// 聚焦元素  
    <SPAN style="WHITE-SPACE: pre"> </SPAN>el.focus(); 
  } 
}); 
new Vue({ 
　　el:&#39;#app&#39; 
}); 
// 注册一个全局自定义指令 v-focus
Vue.directive(&#39;focus&#39;, {
  // 当绑定元素插入到 DOM 中。
  inserted: function (el,binding) {
   // 聚焦元素
   el.focus();
 }
});
new Vue({
　　el:&#39;#app&#39;
});

2. ドラッグ アンド ドロップのデモ: 1) ドラッグされた要素は、位置を指定して配置する必要があります。ドラッグ;

2) カスタム コマンドが完了しました。その後、Vue をインスタンス化して要素をマウントする必要があります。

3)inserted: バインドされた要素が親ノードに挿入されるときに呼び出されます (親ノードが存在する場合に呼び出すことができます)。ドキュメント内に存在する必要はありません)。

rreee

以上が皆さんのためにまとめたもので、今後皆さんのお役に立てれば幸いです。

関連記事:

JSでEL式を使ってコンテキストパラメータの値を取得する方法

JSで左のリストを右のリストに移動する機能を実現する

でのEL式の使用jsと空でない判定メソッド

以上がVue.directive() の使い方を詳しく説明します (例を含む詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。