ホームページ > 記事 > ウェブフロントエンド > Vue.JS でカスタム ディレクティブを使用する方法
Vue.JS でカスタム ディレクティブを使用する方法
- php中世界最好的语言オリジナル
- 2018-03-07 11:50:331573ブラウズ
今回は、Vue.JSのカスタム命令の使い方と、Vue.JSのカスタム命令を使用する際の注意点を紹介します。実際の事例を見てみましょう。
Vue.js を使用すると、カスタム ディレクティブを登録できます。これにより、基本的に、データの変更を DOM の動作にマッピングする方法など、新しいスキルを Vue に教えることができます。 Vue.directive(id, Definition) メソッドを使用して、ディレクティブ ID と定義オブジェクトを渡すことでグローバル カスタム ディレクティブを登録できます。オブジェクトを定義するには、いくつかのフック関数 (すべてオプション) を提供する必要があります:
bind: 命令が初めて要素をバインドするときに 1 回だけ呼び出されます。
更新: バインド直後に初めて呼び出されるとき、取得されるパラメータはバインディングの初期値です。今後はバインド値が変更されるたびに呼び出され、新しい値と古い値の 2 つのパラメータが取得されます。 、が得られます。
unbind: 命令が要素をアンバインドするときに 1 回だけ呼び出されます。
例:
Vue.directive('my-directive', { bind: function () { // 做绑定的准备工作
// 比如添加事件监听器，或是其他只需要执行一次的复杂操作
}, update: function (newValue, oldValue) { // 根据获得的新值执行对应的更新
// 对于初始值也会被调用一次
}, unbind: function () { // 做清理工作
// 比如移除在 bind() 中添加的事件监听器
}
})カスタム ディレクティブが登録されたら、次のように Vue.js テンプレートで使用できます (Vue.js ディレクティブ プレフィックスを追加する必要があります。デフォルトは v-):
<div v-my-directive="someValue"></div>
場合更新関数が必要な場合のみ、定義オブジェクトの代わりに関数を渡すことができます:
Vue.directive('my-directive', function (value) { // 这个函数会被作为 update() 函数使用})すべてのフック関数は実際のコマンド オブジェクトにコピーされ、このコマンド オブジェクトはすべてのフック関数の this
コンテキストになります。いくつかの便利なパブリック プロパティがディレクティブ オブジェクトで公開されています:
el: ディレクティブがバインドされている要素
vm: ディレクティブを所有するコンテキスト ViewModel
expression: パラメーターと フィルターを除く、ディレクティブの 式
arg: コマンドのパラメーター
raw: 解析されていない生の式
name: プレフィックスのないコマンド名
これらのプロパティは読み取り専用であり、変更しないでください。カスタム プロパティをディレクティブ オブジェクトにアタッチすることもできますが、既存の内部プロパティを上書きしないように注意してください。
ディレクティブオブジェクト属性の使用例:
<!DOCTYPE html><html><head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.12.16/vue.min.js"></script></head><body><div id="demo" v-demo-directive="LightSlateGray : msg"></div><script>
Vue.directive('demoDirective', {
bind: function () { this.el.style.color = '#fff'
this.el.style.backgroundColor = this.arg
},
update: function (value) { this.el.innerHTML = 'name - ' + this.name + '<br>' + 'raw - ' + this.raw + '<br>' + 'expression - ' + this.expression + '<br>' + 'argument - ' + this.arg + '<br>' + 'value - ' + value
}
}); var demo = new Vue({
el: '#demo',
data: {
msg: 'hello!'
}
})</script></body></html>複数の句
同じ機能内で、カンマで区切られた複数の句が複数のディレクティブインスタンスとしてバインドされます。次の例では、命令が作成され、2 回呼び出されます:
<div v-demo="color: 'white', text: 'hello!'"></div>
単一の命令インスタンスを使用して複数のパラメータを処理したい場合は、リテラル オブジェクトを式として使用できます:
<div v-demo="{color: 'white', text: 'hello!'}"></div>
Vue.directive('demo', function (value) { console.log(value) // Object {color: 'white', text: 'hello!'}})Literal命令
selfを作成する場合ディレクティブの定義時に isLiteral: true が渡された場合、属性値は直接文字列として扱われ、ディレクティブの式に割り当てられます。リテラル命令はデータ監視を確立しようとするものではありません。
例:
<div v-literal-dir="foo"></div>
Vue.directive('literal-dir', { isLiteral: true, bind: function () { console.log(this.expression) // 'foo'
}
})動的リテラルディレクティブ
ただし、リテラルディレクティブにMustacheタグが含まれている場合、ディレクティブは次のように動作します:
ディレクティブインスタンスには属性があり、this._isDynamicLiteralがtrueに設定されます。 update 関数が提供されていない場合、Mustache 式は 1 回だけ評価され、値は this.expression に割り当てられます。式に対してデータ監視は実行されません。
update 関数が提供されている場合、命令は式のデータ監視を確立し、計算結果が変化したときに update を呼び出します。
双方向ディレクティブ
ディレクティブが Vue インスタンスにデータを書き戻す場合は、 twoWay: true を渡す必要があります。このオプションにより、ディレクティブで this.set(value) を使用できるようになります。
Vue.directive('example', { twoWay: true, bind: function () { this.handler = function () { // 把数据写回 vm
// 如果指令这样绑定 v-example="a.b.c",
// 这里将会给 `vm.a.b.c` 赋值
this.set(this.el.value)
}.bind(this) this.el.addEventListener('input', this.handler)
}, unbind: function () { this.el.removeEventListener('input', this.handler)
}
})インラインステートメント
acceptStatement: true を渡すと、カスタム ディレクティブが v-on: のようなインライン ステートメントを受け入れることができます:
<div v-my-directive="a++"></div>
Vue.directive('my-directive', { acceptStatement: true, update: function (fn) { // the passed in value is a function which when called,
// will execute the "a++" statement in the owner vm's
// scope.
}
})ただし、一般にテンプレートでの副作用を回避したいため、この機能は賢明に使用してください。
詳細なデータ監視
オブジェクトに対してカスタム命令を使用する場合、オブジェクト内のネストされたプロパティが変更されたときに命令の更新関数をトリガーできる場合は、命令の定義を深く渡す必要があります。 ： 真実。
<div v-my-directive="obj"></div>
Vue.directive('my-directive', { deep: true, update: function (obj) { // 当 obj 内部嵌套的属性变化时也会调用此函数
}
})コマンドの優先順位
コマンドの優先順位番号を指定することを選択できます (デフォルトは 0)。同じ要素に対する優先度の高い命令は、他の命令よりも早く処理されます。同じ優先度を持つ命令は、要素属性リストに表示される順序で処理されますが、この順序が異なるブラウザーで一貫していることは保証されません。
一般的に、ユーザーは組み込み命令の優先順位を気にする必要はありません。興味があればソースコードを参照してください。論理制御命令 v-repeat および v-if は「端末命令」とみなされ、コンパイル プロセス中に常に最高の優先順位を持ちます。
要素ディレクティブ
場合によっては、ディレクティブを機能としてではなくカスタム要素として利用できるようにしたい場合があります。これは、Angular の E タイプ ディレクティブの概念に非常に似ています。要素ディレクティブは、軽量の自己定義コンポーネントとみなすことができます (後で説明します)。次のようなカスタム要素コマンドを登録できます:
Vue.elementDirective('my-directive', { // 和普通指令的 API 一致
bind: function () { // 对 this.el 进行操作...
}
}) これを使用するときは、次のように記述することはなくなりました: <div v-my-directive></div>
代わりに、次のように記述します:
<my-directive></my-directive>
元素指令不能接受参数或表达式，但是它可以读取元素的特性，来决定它的行为。与通常的指令有个很大的不同，元素指令是终结性的，这意味着，一旦 Vue 遇到一个元素指令，它将跳过对该元素和其子元素的编译 - 即只有该元素指令本身可以操作该元素及其子元素。
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
相关阅读：
一个用Vue.js 2.0+做出的石墨文档样式的富文本编辑器
以上がVue.JS でカスタム ディレクティブを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。