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

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

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

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

コマンド名

コマンド名は v- プレフィックスで始まり、その後にディレクティブを識別するためのキャメルケース名が続く必要があります。たとえば、

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 サイトの他の関連記事を参照してください。