Vueでカスタム命令を作成する方法

Vue.directive() メソッドを使用して、Vue でカスタム ディレクティブを作成します。ディレクティブ名は v- プレフィックスで始まり、ディレクティブ オプションには、bind、insert、update、componentUpdated などのライフ サイクル フックが含まれます。 unbind はさまざまな状況で使用され、DOM 要素を操作します。パラメータを指定する場合は、コマンド名の後ろにコロン（:パラメータ名）を付けて指定します。

Vue でカスタム ディレクティブを作成する

Vue に Vue.directive()## を渡す # メソッドカスタム ディレクティブを作成します。このメソッドは、ディレクティブ名とディレクティブのオプションを含むオブジェクトという 2 つのパラメーターを受け入れます。

コマンド名

v-myDirective です。

ディレクティブ オプション

• bind (オプション) on要素 DOM への挿入時に 1 回呼び出されます。
• inserted (オプション) 要素が DOM に挿入された直後に呼び出されます。
• update (オプション) 要素が更新されるときに呼び出されます。
• componentUpdated (オプション) 親コンポーネントが更新された後に呼び出されます。
• unbind (オプション) 要素が DOM から削除されるときに呼び出されます。

例

v-highlight というカスタム ディレクティブを作成します。

<code class="javascript">Vue.directive('highlight', {
  bind: function (el, binding, vnode) {
    el.style.backgroundColor = 'yellow';
  }
});</code>

<code class="html"><div v-highlight>突出显示此文本</div></code>

パラメータ付きディレクティブ

v-size というカスタム ディレクティブを作成します。

<code class="javascript">Vue.directive('size', {
  bind: function (el, binding, vnode) {
    el.style.fontSize = binding.value + 'px';
  }
});</code>

rree

以上がVueでカスタム命令を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。