vue ディレクティブ ディレクティブ

この記事では、Vue ディレクティブの使用方法を共有します。具体的な内容は次のとおりです

1. ディレクティブの登録

ディレクティブを使用するには、次の 2 つの方法があります。 1 つはグローバル登録です:

Vue.directive('dirName',function(){
 
　　//定义指令
 
});

もう 1 つは部分登録です:

new Vue({
 
　　directives:{
 
　　　　dirName:{
 
　　　　　　//定义指令
 
　　　　}
 
　　}
 
});

2. コマンドの定義

命令定義では、公式は使用する 5 つのフック関数を提供しており、それぞれが表すものです。コンポーネント

bind: の各ライフサイクルは、命令が初めて要素にバインドされるときに 1 回だけ呼び出されます。このフック関数を使用して、バインド時に 1 回実行される初期化アクションを定義できます。

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

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

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

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

その他のテンプレートの更新 (更新) については、私の理解では、命令が配置されているテンプレートが変更され、再レンダリングが必要になる場合、たとえば、入力ボックスのモデルが変更される場合です。コマンドをトリガーします。もちろん、ここで述べられていることはかなり曖昧であり、詳細についてはまだ研究する必要があります。

このコードは update

<p id="app">
　　<input type="text" v-focus="name" v-model="name" :data-name="name">
　　<button type="button" @click="name=&#39;zw&#39;">click</button>
 
　　<!--当点击按钮的时候name改变，继而触发update中的方法-->
</p>
<script>
 
　　Vue.directive(&#39;focus&#39;,{
　　　　bind: function(el, binding){
　　　　console.log(&#39;bind:&#39;,binding.value);
　　},
　　inserted: function(el, binding){
　　　　console.log(&#39;insert:&#39;,binding.value);
　　},
　　update: function(el, binding, vnode, oldVnode){
　　　　el.focus();
　　　　console.log(el.dataset.name);//这里的数据是可以动态绑定的
　　　　console.table({
　　　　　　name:binding.name,
　　　　　　value:binding.value,
　　　　　　oldValue:binding.oldValue,
　　　　　　expression:binding.expression,
　　　　　　arg:binding.arg,
　　　　　　modifiers:binding.modifiers,
　　　　　　vnode:vnode,
　　　　　　oldVnode:oldVnode
　　　　});
　　},
　　componentUpdated: function(el, binding){
　　　　console.log(&#39;componentUpdated:&#39;,binding.name);
　　}
});
new Vue({
　　el:&#39;#app&#39;,
　　data:{
　　　　name:&#39;zwzhai&#39;
　　}
});
</script>

の使用を実現できます

3. フック関数の定義

以下は公式によって提供されるいくつかのパラメータです:

el: 命令によってバインドされた要素を直接使用できますDOMを操作します。
binding: 次のプロパティを含むオブジェクト:
name: v- プレフィックスを除く命令名。
value: ディレクティブのバインディング値。例: v-my-directive="1 + 1"、value の値は 2 です。
oldValue: 命令バインディングの以前の値。update フックとcomponentUpdated フックでのみ使用できます。値が変更されているかどうかに関係なく使用できます。
式: バインディング値の文字列形式。 たとえば、 v-my-directive="1 + 1" の場合、expression の値は「1 + 1」です。
arg: コマンドに渡される引数。たとえば、v-my-directive:foo の場合、arg の値は「foo」です。
modifiers: モディファイアを含むオブジェクト。 例: v-my-directive.foo.bar、修飾子オブジェクト modifiers の値は { foo: true, bar: true } です。
vnode: Vue コンパイルによって生成された仮想ノード。詳細については、VNode API を確認してください。
oldVnode: 以前の仮想ノード。update フックとcomponentUpdated フックでのみ使用できます。

これらのパラメーターはドキュメントを読めば誰でも理解できるので、bingding のいくつかの属性について私の見解を共有します (上記のように)。

vue 命令では双方向のデータ バインディングは許可されていません: el を除いて、他のパラメータは変更しないようにしてください。フック間でデータを共有する必要がある場合は、要素のデータセットを通じてそれを行うことをお勧めします。データセットに関する追加の知識は次のとおりです:

data- は HTML5 の新しい属性です。ブラウザーのサポート レベルを確認すると、IE の場合、現在の主流のブラウザーはすべて 10 以上である必要があります。具体的な使用法: HTML の属性として data-yourname="value" として記述します。js でこの属性を取得するには、getAttribute メソッドを使用する必要はありませんが、js の ele.dataset.yourname に直接アクセスします。また、追加と削除もできます。追加: ele.dataset.dessert="yourname"、削除: dette ele.dataset.name。さらに、この属性は CSS セレクターとして使用できます: .class[data-name]:{}。

上記は vue 命令ディレクティブの内容です。その他の関連内容については、PHP 中国語 Web サイト (m.sbmmt.com) に注目してください。