カスタム命令を使用して Vue で DOM 操作を実装する方法

Vue は、高性能でスケーラブルなシングルページ アプリケーション (SPA) の構築に使用できる、非常に人気のある JavaScript フレームワークです。強力な機能の 1 つはカスタム ディレクティブです。これは Vue のコア ディレクティブ (v-model、v-if、v-for など) の拡張であり、DOM 要素に動作を追加するために使用できます。この記事では、Vue でカスタム ディレクティブを使用して DOM 操作を実装する方法を学びます。

1. カスタム ディレクティブの作成

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) {

// 解绑时触发

}
}) ;

2. カスタム ディレクティブの使用

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': {
  // ...
}

##) #}

})

その後、HTML で次のようにカスタム ディレクティブを使用できます:

カスタム命令の例

以下では、カスタム命令を使用するための一般的なシナリオをいくつか紹介します。

3.1. 自動フォーカス

ページ内の入力ボックスがレンダリングされるとき、通常は入力ボックスが自動的にフォーカスすることが期待されます。この機能はカスタム命令によって実現できます。以下はオートフォーカス ディレクティブの例です:

Vue.directive('focus', {

挿入: function(el) {

el.focus()

}

})

HTML では、自動フォーカスを実現するには v-focus ディレクティブを追加するだけです:

3.2. ローリング ローディングを実装する

スクロール ロードは一般的な無限スクロール ロード方法であり、ユーザーがページの一番下までスクロールすると、さらにデータのロードがトリガーされます。この機能はカスタム命令によって実現できます。以下はローリング読み込みディレクティブの例です:

Vue.directive('scroll', {

挿入: function (el, binding) {

window.addEventListener('scroll', function() {
  if ((window.innerHeight + window.pageYOffset+ 50) >= document.body.offsetHeight) {
    binding.value()
  }
})

}

} )

HTML では、v-scroll ディレクティブを通じてスクロール読み込みを追加できます:

ユーザーが一番下までスクロールすると、この命令により、loadMoreData 関数がトリガーされ、さらにデータがロードされます。

3.3. 右クリック メニューを無効にする

シナリオによっては、ユーザーがページ上の機密データをコピーできないようにするなど、右クリック メニューを無効にする必要がある場合があります。この問題はカスタム命令によって解決できます。以下は、右クリック メニューを無効にするディレクティブの例です。

Vue.directive('disable-right-click', {

binding: function(el) {

el.addEventListener('contextmenu', function(event) {
  event.preventDefault()
})

}

})

HTML では、v-disable-right-click ディレクティブを使用して右クリック メニューを無効にできます:

コンテンツ

結論

カスタム ディレクティブは Vue の非常に強力な機能です。DOM 操作ロジックをカプセル化して再利用するために使用できます。複数のコンポーネント間で共有するために使用できます。この記事では、Vue でカスタム ディレクティブを作成して使用する方法を学びました。 Vue の手順とコンポーネントについて詳しく知りたい場合は、Vue の公式ドキュメントを参照してください。

以上がカスタム命令を使用して Vue で DOM 操作を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。