ホームページ >ウェブフロントエンド >フロントエンドQ&A >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: '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 サイトの他の関連記事を参照してください。