まずはvueコマンドを理解しましょう
1.1. 手順
Vue は、ページとデータのより便利な出力を提供します。これらの操作は命令と呼ばれ、v-xxx で表されます (HTML ページの属性など)。 <div v-xxx ></div>。自定义指令很大程度提高了开发效率，提高了工程化水平，一定要认真学习。
1.2. 組み込みコマンド
Vue では、v-if、v-for、v-on などの命令は組み込み命令と呼ばれ、すべて v- で始まり、登録なしでグローバルに使用でき、組み込み命令は非常に便利です。 v-for コマンドなどを使用すると、多くの dom 要素をすばやくループアウトできます。
1.3. カスタムコマンド
名前のとおり、必要な命令機能を実現するための自己定義命令のメソッドを定義します。
2. カスタム命令フック
2.1、vue2 カスタム コマンド フック
bind(): ディレクティブが HTML 要素にバインドされるとトリガーされます。
insert(): 命令によってバインドされた要素が親ノードに挿入されるときにトリガーされます。
update(): 命令によってバインドされた要素の状態/スタイルおよびコンテンツ (ここでは要素によってバインドされた vue データを指します) が変更されたときにトリガーされます
ComponentUpdated(): update() が実行されるとトリガーされます。
unbind(): ディレクティブによってバインドされた要素が dom から削除されるとトリガーされます。
2.2、vue3 カスタム コマンド フック
created: バインドされた要素の属性またはイベント リスナーが適用される前に呼び出されます。これは、通常の v-on イベント リスナーが呼び出される前に、イベント リスナーにディレクティブを付加する必要がある場合に便利です。
beforeMount: ディレクティブが最初に要素にバインドされるとき、親コンポーネントがマウントされる前に呼び出されます。
Mounted: バインディング要素の親コンポーネントがマウントされた後に呼び出され、ほとんどのカスタム命令がここに記述されます。
beforeUpdate: コンポーネントを含む VNode を更新する前に呼び出されます。
updated: 含まれているコンポーネントの VNode とそのサブコンポーネントの VNode が更新された後に呼び出されます。
beforeUnmount: バインドされた要素の親コンポーネントをアンマウントする前に呼び出されます。
unmounted: ディレクティブが要素からバインドされておらず、親コンポーネントがアンマウントされているときに、1 回だけ呼び出されます。
3. カスタムコマンドパラメータ
作成された(el、バインディング、vnode、prevNode) {}
el: ディレクティブがバインドされている要素。これを使用して DOM を直接操作できます。
binding: 次のプロパティを含むオブジェクト:
value: ディレクティブに渡される値。たとえば、v-my-directive="1 + 1" の場合、値は 2 です。
oldValue: 以前の値。beforeUpdate でのみ使用可能であり、更新されます。値が変更されているかどうかに関係なく使用できます。
arg: ディレクティブに渡される引数 (存在する場合)。たとえば、v-my-directive:foo のパラメータは「foo」です。
modifiers: モディファイアがある場合は、それを含むオブジェクト。たとえば、v-my-directive.foo.bar では、修飾子オブジェクトは { foo: true, bar: true } です。
dir: ディレクティブの定義オブジェクト。
インスタンス: このディレクティブを使用するコンポーネントのインスタンス。
vnode: バインドされた要素の基礎となる VNode を表します。
prevNode: 前回のレンダリングでコマンドにバインドされた要素を表す VNode。beforeUpdate および更新されたフックでのみ使用できます。
4 番目、vue3 + ts のカスタム命令を実践する
4.1. 部分的なカスタムコマンド
4.1.1. <script setup> 定義コンポーネントのディレクティブでは、v で始まるキャメルケース変数をカスタム ディレクティブとして使用できます。
<template>
<input v-focus />
</template>
<script setup>
// 在模板中启用 v-focus
const vFocus = {
mounted: (el: any) => el.focus()
}
</script>
<style scoped lang="less">
input{
border: 1px solid #000;
}
</style>
4.1.2、オプション API カスタム命令をdirectivesオプションに登録する必要があります
<template>
<input v-focus />
</template>
<script>
export default{
setup() {},
directives: {
// 指令名
focus: {
// 生命周期
mounted(el) {
// 处理DOM的逻辑
el.focus()
},
}
}
}
</script>
4.2. グローバルカスタムコマンド
4.2.1、src/directives/focus.ts
export default function(app: any) {
app.directive("focus", {
mounted(el: any) {
console.log("focus mounted");
el.focus();
}
})
}4.2.2、src/directives/index.ts
import registerFocus from './focus'; // 获取焦点
export default function registerDirectives(app: any) {
registerFocus(app);
}4.2.3、main.ts
import registerDirectives from './directives'
const app = createApp(App)
registerDirectives(app)
4.2.4、src/views/directives/index.vue
<template>
<div class="directives">
<input v-focus />
</div>
</template>
<script setup lang="ts">
</script>
<style scoped lang="less">
input{
border: 1px solid #000;
}
</style>4.2.5. 効果
4.3. コンポーネントでの命令の使用
vue3 は複数のルート ノードを持つことができるため、ルート ノードが 1 つである場合に命令を使用することに問題はありません。エラーを報告する命令を使用するルート ノードが複数ある場合は、コンポーネント内で複数のルート ノードが命令を使用できるようにすることをお勧めします。
5. よく使うカスタム命令の蓄積（グローバルカスタム命令の形式で記録）
5.1、入力がフォーカスを取得します
src/ディレクティブ/focus.ts
// 获取焦点
export default function(app: any) {
app.directive("focus", {
mounted(el: any) {
console.log("focus mounted");
el.focus();
}
})
}5.2. 手ぶれ補正
5.2.1、src/directives/debounce.ts
// 防抖
export default function(app: any) {
app.directive("debounce", {
mounted(el: any, binding: any) {
let timer:any
el.addEventListener('click', () => {
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
binding.value()
}, 1000)
})
}
})
}5.2.2、src/views/directives/index.vue
1 秒に 1 回トリガーされ、連続クリックしても複数回トリガーされることはありません。
<template>
<div class="directives">
<el-button v-debounce="debounceClick">debounce-button</el-button>
</div>
</template>
<script setup lang="ts">
const debounceClick = () => {
console.log('1s触发一次')
}
</script>5.2.3. 効果
5.3 その他の追加事項
6.交換と修正を歓迎し、私に注目して、一緒に学びましょう
7. 参考リンク
Vue3 でカスタム命令を実装する方法 (超詳しい!)_vue.js 開発ペーパー
Vueグローバルカスタムコマンド_お姉さん、果敢に進め！ブログ-CSDN ブログ
Vue3 カスタム手順 - 10 個の一般的な実践的な手順と詳細な説明をコレクションに加えましょう。！！_vue3 の使い方_Orange のブログ - CSDN ブログ
Vue3で命令をカスタマイズする方法を教えます_vue3カスタム命令_Fat fat technology house blog