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: 'foo' }"></div>Vue 命令を使用するには、まず命令関数を定義する必要があります。 Vue 命令関数は、el、binding、vnode、oldVnode の 4 つのパラメータを受け入れることができます。これらのパラメータは、命令によってバインドされた要素の DOM 要素、命令によってバインドされたオブジェクト、Vue コンパイルによって生成された仮想ノード、および古い仮想ノードです。
命令関数には、Vue コンポーネントのフック関数に似たいくつかのフック関数があります。一般的なディレクティブ フックをいくつか示します。
以下は簡単なカスタム ディレクティブの例です:
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 を返します。 }＃＃＃ 価値。
v-bind ディレクティブの省略形 : が提供されます。したがって、属性を null に設定することでディレクティブを削除できます。
<div v-bind:my-directive="condition ? message : null"></div>
condition が満たされる場合、ディレクティブは要素にバインドされ、そうでない場合は要素にバインドされません。要素の結び目。
以上がvueで命令を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
