Vue は、高性能でスケーラブルなシングルページ アプリケーション (SPA) の構築に使用できる、非常に人気のある JavaScript フレームワークです。強力な機能の 1 つはカスタム ディレクティブです。これは Vue のコア ディレクティブ (v-model、v-if、v-for など) の拡張であり、DOM 要素に動作を追加するために使用できます。この記事では、Vue でカスタム ディレクティブを使用して DOM 操作を実装する方法を学びます。
Vue のディレクティブ関数を使用してカスタム ディレクティブを作成できます。コマンド関数は、コマンドの動作を制御する複数のフック関数 (フック) を含むオブジェクトを返す必要があります。以下はカスタム ディレクティブのテンプレートです:
Vue.directive("directive-name", {
binding: function (el, binding, vnode) {
// 在绑定元素和指令之间建立联接时触发
},
挿入: 関数 (el、バインディング、vnode) {
// 元素插入父元素之后触发
},
更新: 関数 (el、バインディング、vnode、oldVnode) {
// 在元素和指令所绑定的组件的 VNode 更新之后调用
},
ComponentUpdated:関数 (el、バインディング、vnode、oldVnode) {
// 在组件的 VNode 及其子 VNode 全部更新后调用
},
unbind:関数 (el、バインディング、vnode) {
// 解绑时触发
}
}) ;
Vue でカスタム ディレクティブを使用するには 2 つの方法があります:
2.1. グローバル登録
Globallyカスタム命令の登録とは、カスタム命令関数を Vue インスタンスのグローバル命令関数リストに追加することを意味します。このようにして、すべてのコンポーネントでカスタム ディレクティブを使用できます。
Vue.directive() 構文を使用してディレクティブをグローバルに登録します:
Vue.directive("directive-name", {
//...
});
その後、HTML では次の方法でカスタム ディレクティブを使用できます:
2.2 部分登録
ローカル登録ディレクティブとは、Vue コンポーネントの directives 属性にディレクティブ関数を追加することを指します。このようにして、コンポーネント内でカスタム ディレクティブを使用できます。
次は、ディレクティブを Vue コンポーネントにローカルに登録する例です:
Vue.component('my-component', {
directives: {
'directive-name': {
// ...
}})
挿入: function(el) {
el.focus()
})
挿入: function (el, binding) {
window.addEventListener('scroll', function() {
if ((window.innerHeight + window.pageYOffset+ 50) >= document.body.offsetHeight) {
binding.value()
}
})} )
binding: function(el) {
el.addEventListener('contextmenu', function(event) {
event.preventDefault()
}) })
以上がカスタム命令を使用して Vue で DOM 操作を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
