vueで命令を作成する方法

Vue.js は、インタラクティブな Web アプリケーションを構築するための多くの機能を提供する拡張可能な JavaScript フレームワークです。 DOM 要素をカスタマイズおよび制御するための機能の 1 つは、Vue ディレクティブです。この記事では、Vue.jsでディレクティブを作成する方法を紹介します。

概要

Vue.js では、ディレクティブは特別なプレフィックスが付いた HTML 属性です。たとえば、「v-」は Vue ディレクティブの接頭辞です。ディレクティブの値は、JavaScript 式またはディレクティブ名の後のコロンで区切られた値である「ディレクティブ パラメーター」にすることができます。ディレクティブは 1 つ以上のパラメーターを受け取り、ライフサイクル フックを持つことができます。

次の例は、Vue.js でディレクティブを使用する方法を示しています。

<div v-my-directive:foo.bar></div>

ここで、「v-my-directive」はディレクティブ名、「foo」はディレクティブ パラメーター、および「 bar" は命令修飾子です。命令では式を受け入れることもできます。

<div v-my-directive="{ arg1: 1, arg2: &#39;foo&#39; }"></div>

命令の作成

Vue 命令を使用するには、まず命令関数を定義する必要があります。 Vue 命令関数は、el、binding、vnode、oldVnode の 4 つのパラメータを受け入れることができます。これらのパラメータは、命令によってバインドされた要素の DOM 要素、命令によってバインドされたオブジェクト、Vue コンパイルによって生成された仮想ノード、および古い仮想ノードです。

命令関数には、Vue コンポーネントのフック関数に似たいくつかのフック関数があります。一般的なディレクティブ フックをいくつか示します。

• bind: ディレクティブが初めて要素にバインドされるときに、1 回だけ呼び出されます。ここでいくつかの初期設定を行うことができます。
• inserted: バインドされた要素が親ノードに挿入されるときに呼び出されます (要素ノードにのみ適用されます)。
• update: コンポーネントが更新されるときに呼び出されますが、場合によってはその子コンポーネントが更新される前に呼び出されます。
• componentUpdated: コンポーネントの更新が完了した後に呼び出されます。
• unbind: 命令が要素からバインドされていないときに、1 回だけ呼び出されます。

以下は簡単なカスタム ディレクティブの例です:

Vue.directive('my-directive', {
  bind: function (el, binding) {
    el.innerHTML = binding.value.toUpperCase();
  }
});

ここでは、Vue.directive 関数 my- directive を使用してグローバル ディレクティブを定義します。 。このコマンド関数には、el および binding パラメーターを受け入れる bind フックがあります。このディレクティブが要素にバインドされると、el.innerHTML は binding.value の大文字バージョンに設定されます。

ディレクティブの使用

ディレクティブを定義した後、それを HTML 要素の属性として使用できます。次の例は、my-directive ディレクティブの使用法を示しています。

<div v-my-directive="message"></div>

ここで、message は、Vue インスタンスで定義されたデータ属性です。ディレクティブが要素にバインドされると、message の値がディレクティブ関数の binding.value パラメーターに渡されて処理されます。

コロンを使用して命令の修飾子を指定することもできます。

<div v-my-directive.some-modifier="message"></div>

命令関数では、binding.modifiers を使用して、命令の修飾子にアクセスできます。命令。この例では、ディレクティブ名が my-directive で some-modifier 修飾子がある場合、binding.modifiers は {someModifier: true を返します。 }＃＃＃ 価値。

命令の削除

命令を動的に追加または削除する必要がある場合があります。 Vue.js では、

v-bind ディレクティブの省略形 : が提供されます。したがって、属性を null に設定することでディレクティブを削除できます。

<div v-bind:my-directive="condition ? message : null"></div>

この例では、条件

condition が満たされる場合、ディレクティブは要素にバインドされ、そうでない場合は要素にバインドされません。要素の結び目。

結論

この記事では、DOM 要素とそれらと対話するロジックを制御できる Vue.js でのディレクティブの作成と使用方法を紹介します。これで、ディレクティブをカスタマイズし、Vue.js アプリケーションを強化できるようになりました。

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