Vue.directive()の使い方を詳しく解説

命令定義関数は、いくつかのフック関数 (オプション) を提供します。

bind: 1 回だけ呼び出され、命令が初めて要素にバインドされたときに呼び出されます。このフック関数は、1 回実行される初期化を定義するために使用できます。バインドアクションのとき。
inserted: バインドされた要素が親ノードに挿入されるときに呼び出されます (親ノードが存在する限り呼び出すことができ、必ずしもドキュメント内にある必要はありません)。

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

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

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

私は初心者で、公式 Web サイトを見て混乱しましたが、Baidu Vue.directive() の例と使用法、非常に奥深いものもあれば、完璧ではないものもあります。2 つの簡単なデモを投稿しました。参照してください:

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: バインドされた要素が親ノードに挿入されるときに呼び出されます。親ノードは存在しますが、ドキュメント内に存在する必要はありません)。

りー

以上がVue.directive()の使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。