記事ディレクトリ
カスタムディレクティブ
1.カスタム手順
Vueは、v-for、v-model、v-ifなどの一般的な組み込み命令を公式に提供します。さらに、vueを使用すると、開発者は命令をカスタマイズすることもできます。
vueのカスタムディレクティブは2つのカテゴリに分けられます。
- プライベートカスタムディレクティブ
- グローバルカスタムディレクティブ
2.プライベートカスタムディレクティブを宣言し、カスタムディレクティブを使用するための構文
各vueコンポーネントでは、directivesノードでプライベートカスタムディレクティブを宣言できます。
カスタムディレクティブを使用する場合は、v-プレフィックスを追加する必要があります。
<template>
<div>
<h1>App 组件</h1>
<input type="text" v-focus>
<hr>
</div>
</template>
<script>
export default {
name: 'App',
directives: {
// 自定义指令
focus: {
// 当被绑定的元素插入到DOM中时，自动触发mounted函数
mounted(el) {
// 让绑定的元素自动获取焦点
el.focus()
}
}
}
}
</script>
<style>
</style>
3.グローバルカスタムディレクティブを宣言するための構文
グローバルに共有されるカスタムディレクティブは、「シングルページアプリケーションインスタンスオブジェクト」を介して宣言する必要があります。
main.js
// 创建 Vue 实例对象
const app = createApp(App)
// 注册一个全局自定义指令 v-focus
app.directive( 'focus', {
mounted( el ) {
el.focus()
}
} )
<template>
<div>
<h1>App 组件</h1>
<input type="text" v-focus>
<hr>
</div>
</template>
<script>
export default {
name: 'App',
directives: {
// // 自定义指令
// focus: {
// // 当被绑定的元素插入到DOM中时，自动触发mounted函数
// mounted(el) {
// // 让绑定的元素自动获取焦点
// el.focus()
// }
// }
}
}
</script>
<style>
</style>
4.更新された機能
マウントされた関数は、要素がDOMに初めて挿入されたときにのみ呼び出されます。マウントされた関数は、DOMが更新されたときに起動されません。
更新された関数は、DOMが更新されるたびに呼び出されます。
注：
vue2プロジェクトでカスタムコマンドを使用する場合、[マウント->バインド][更新->更新]
グローバルカスタムディレクティブに注釈を付ける
<template>
<div>
<h1>App 组件</h1>
<input type="text" v-focus v-model="val">
<button @click="add"> +1 </button>
<hr>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
val: ''
}
},
methods: {
add() {
this.val += 1
}
},
directives: {
// 自定义指令
focus: {
// 当被绑定的元素插入到DOM中时，自动触发mounted函数
mounted(el) {
// 让绑定的元素自动获取焦点
el.focus()
},
updated( el ) {
el.focus()
}
}
}
}
</script>
<style>
</style>
グローバル
// 注册一个全局自定义指令 v-focus
// app.directive( 'focus', {
// mounted( el ) {
// el.focus()
// },
// updated( el ) {
// el.focus()
// }
// } )
5.関数の省略形
マウントされた関数と更新された関数のロジックがまったく同じである場合は、省略できます。
<template>
<div>
<h1>App 组件</h1>
<input type="text" v-focus v-model="val">
<button @click="add"> +1 </button>
<hr>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
val: ''
}
},
methods: {
add() {
this.val += 1
}
},
directives: {
// 自定义指令
// focus: {
// 当被绑定的元素插入到DOM中时，自动触发mounted函数
// mounted(el) {
// // 让绑定的元素自动获取焦点
// el.focus()
// },
// updated( el ) {
// el.focus()
// }
// }
focus(el) {
el.focus()
}
}
}
</script>
<style>
</style>
グローバル
// 注册一个全局自定义指令 v-focus
// app.directive( 'focus', {
// mounted( el ) {
// el.focus()
// },
// updated( el ) {
// el.focus()
// }
// } )
// app.directive( 'focus', (el)=>{
// el.focus()
// } )
6.命令のパラメータ値
命令をバインドする場合、特定のパラメータ値を「等号」の形式で命令にバインドできます。
<template>
<div>
<h1 v-color="'red'">App 组件</h1>
<input type="text" v-focus v-model="val">
<button @click="add"> +1 </button>
<hr>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
val: ''
}
},
methods: {
add() {
this.val += 1
}
},
directives: {
// 自定义指令
// focus: {
// // 当被绑定的元素插入到DOM中时，自动触发mounted函数
// mounted(el) {
// // 让绑定的元素自动获取焦点
// el.focus()
// },
// updated( el ) {
// el.focus()
// }
// }
focus(el) {
el.focus()
},
// 第二个形参为传递的参数对象
color( el, color ) {
// console.log(color);
// color.value 为指令等号后面为指令绑定的值
el.style.color = color.value
}
}
}
</script>
<style>
</style>
