vue.js ディレクティブとは

vue.js 命令には、[v-if] や [v-show] などの多くの組み込み命令があります。これらの豊富な命令は、ほとんどのビジネス ニーズを満たすことができます。カスタム命令にはフック関数があります。 [バインド、挿入、更新]。

#このチュートリアルの動作環境: Windows10 システム、vue2.9、この記事はすべてのブランドのコンピューターに適用されます。

[関連記事の推奨:

vue.js]

質問 1: vue.js のカスタム命令とは何ですか?

基盤となる DOM を操作するようにいくつかの命令をカスタマイズする

その他の参考資料

Vue には、v-if や v-show などの組み込み命令が多数あります。これらの豊富な命令はほとんどのビジネス ニーズを満たすことができますが、いくつかの特別な機能が必要な場合は、やはり DOM 上で低レベルの操作を実行する必要があり、その場合はカスタム命令を使用する必要があります。

質問 2: カスタム命令のいくつかのフック関数

• bind: 命令が最初に要素にバインドされるときに 1 回だけ呼び出されます。時間移動。ここではワンタイムの初期化設定を行うことができます。

• inserted: バインドされた要素が親ノードに挿入されるときに呼び出されます (親ノードのみが存在することが保証されますが、必ずしもドキュメントに挿入されるわけではありません)。

• update: コンポーネントの VNode が更新されるときに呼び出されますが、その子 VNode が更新される前に発生する場合もあります。ディレクティブの値は変更されている場合もあれば、変更されていない場合もあります。ただし、更新前後の値を比較することで、不要なテンプレートの更新を無視できます。

• componentUpdated: 命令が配置されているコンポーネントの VNode とそのサブ VNode がすべて更新された後に呼び出されます。

• unbind: 命令が要素からバインドされていないときに、1 回だけ呼び出されます。

質問 3: フック関数のパラメーター

el を除き、他のすべてのパラメーターは読み取り専用であり、変更してはなりません。フック間でデータを共有する必要がある場合は、要素のデータセットを通じて行うことをお勧めします。

命令フック関数は次のパラメータで渡されます:

1. el: 命令にバインドされた要素を使用して DOM を直接操作できます。

2. バインディング: 次の属性を含むオブジェクト:

• name: v- プレフィックスを除く命令名。

• value: ディレクティブのバインディング値。例: v-my-directive="1 1"。バインディング値は 2 です。

• oldValue: 命令バインディングの以前の値。update フックとcomponentUpdated フックでのみ使用できます。値が変更されているかどうかに関係なく使用できます。

• #expression: 文字列形式の命令式。たとえば、v-my-directive="1 1" の場合、式は「1 1」になります。

• #arg: コマンドに渡されるパラメータ (オプション)。たとえば、v-my-directive:foo の場合、パラメーターは「foo」です。

• modifiers: モディファイアを含むオブジェクト。例: v-my-directive.foo.bar では、修飾子オブジェクトは { foo: true, bar: true } です。

• vnode: Vue のコンパイルによって生成された仮想ノード。

3. oldVnode: 以前の仮想ノードで、update フックとcomponentUpdated フックでのみ使用できます。

質問 4: vue-cli でカスタム命令を使用するにはどうすればよいですか?

ファイル構造:

.
├── src
│   ├── directives
│   │    ├── index.js
│   │    ├── modules
│   └── main.js
└── ...

modules配下にfoucs.jsを作成

// 聚焦指令
export default {
  bind (el, binding, vnode) {},
  inserted (el, binding, vnode) {
    el.focus()
  },
  update (el, binding, vnode) {},
  componentUpdated (el, binding, vnode) {},
  unbind (el, binding, vnode) {}
}

src/directives/index.js配下

import focus from './modules/focus'
export {focus}

src/配下にmain.js、ディレクティブのカスタム命令を使用します

//引入自定义指令
import * as directives from './directives'
//注册指令
Object.keys(directives).forEach(k => Vue.directive(k, directives[k]));

.vue コンポーネントで

<input v-focus type="text" />

を使用します。関連する無料学習の推奨事項:

JavaScript (ビデオ)

以上がvue.js ディレクティブとはの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。