vue3的自定義指令directives實(shí)現(xiàn)
一、什么是自定義指令
我們已經(jīng)熟悉Vue
內(nèi)置的一系列指令 ,比如 v-model
, v-show
, v-if
, v-for
等等,自定義指令從命名上看主要區(qū)別于Vue
自帶的內(nèi)置指令,我們可以創(chuàng)建自己想要的指令,使用必須以v-
為前綴
二、指令的分類(lèi)
局部指令:組件中通過(guò)directives
選項(xiàng)實(shí)現(xiàn),只能在當(dāng)前組件中使用
全局指令:應(yīng)用實(shí)例的directive
方法,可以在任意組件中被使用(所有內(nèi)置指令都為全局指令)
三、指令的作用
- 代碼重用
- 處理普通元素的底層
DOM
訪(fǎng)問(wèn)的邏輯
四、指令的鉤子
指令的鉤子和組件的生命周期很像,只是沒(méi)有beforeCreate
const myDirective = { // 在綁定元素的 attribute 前 // 或事件監(jiān)聽(tīng)器應(yīng)用前調(diào)用 created(el, binding, vnode, prevVnode) { // 下面會(huì)介紹各個(gè)參數(shù)的細(xì)節(jié) }, // 在元素被插入到 DOM 前調(diào)用 beforeMount() {}, // 在綁定元素的父組件 // 及他自己的所有子節(jié)點(diǎn)都掛載完成后調(diào)用 mounted() {}, // 綁定元素的父組件更新前調(diào)用 beforeUpdate() {}, // 在綁定元素的父組件 // 及他自己的所有子節(jié)點(diǎn)都更新后調(diào)用 updated() {}, // 綁定元素的父組件卸載前調(diào)用 beforeUnmount() {}, // 綁定元素的父組件卸載后調(diào)用 unmounted() {} }
五、鉤子參數(shù)
指令的鉤子會(huì)傳遞以下幾種參數(shù):
el
:指令綁定到的元素。這可以用于直接操作 DOM。binding
:一個(gè)對(duì)象,包含以下 property:value
:傳遞給指令的值。例如在 v-my-directive=“1 + 1” 中,值是 2。oldValue
:之前的值,僅在 beforeUpdate 和 updated 中可用。無(wú)論值是否更改,它都可用。arg
:傳遞給指令的參數(shù) (如果有的話(huà))。例如在 v-my-directive:foo 中,參數(shù)是 “foo”。modifiers
:一個(gè)包含修飾符的對(duì)象 (如果有的話(huà))。例如在 v-my-directive.foo.bar 中,修飾符對(duì)象是 { foo: true, bar: true }。instance
:使用該指令的組件實(shí)例。dir
:指令的定義對(duì)象。
vnode
:代表綁定元素的底層 VNode。prevNode
:之前的渲染中代表指令所綁定元素的 VNode。僅在 beforeUpdate 和 updated 鉤子中可用。
六、指令的使用
簡(jiǎn)單需求: 當(dāng)某個(gè)元素掛載完成后可以自定獲取焦點(diǎn)
默認(rèn)的實(shí)現(xiàn)方式,假如有多個(gè)地方需要使用時(shí),這種實(shí)現(xiàn)方式的代碼會(huì)顯得繁雜冗余
<template> <div> <input type="text" ref="input" /> </div> </template> <script> import { ref, onMounted } from "vue"; export default { setup () { const input = ref(null); onMounted(() => { input.value.focus(); }) return { input } } } </script> <style scoped> </style>
使用自定義指令實(shí)現(xiàn)
<template> <input type="text" v-focus /> </template> <script setup> // 在模板中啟用 v-focus const vFocus = { mounted: (el) => el.focus() } </script>
注:在<script setup>
中,任何以 v
開(kāi)頭的駝峰式命名的變量都可以被用作一個(gè)自定義指令,vFocus
即可以在模板中以 v-focus
的形式使用
如果不使用 <script setup>
,自定義指令可以通過(guò) directives 選項(xiàng)注冊(cè)
<template> <input type="text" v-focus /> </template> <script> export default { setup() { /*...*/ }, directives: { focus: { mounted: (el) => el.focus() } } } </script>
也可以全局注冊(cè)該指令,這樣所有組件都可以使用v-focus
const app = createApp({}) // 使 v-focus 在所有組件中都可用 app.directive('focus', { mounted: (el) => el.focus() })
指令的參數(shù)和修飾符
假如我們使用這樣一個(gè)指令v-example
<div v-example:params.lazy="someValue"></div>
此時(shí)指令鉤子函數(shù)的binding
參數(shù)會(huì)是一個(gè)這樣的對(duì)象:
{ arg: 'params', modifiers: { lazy: true }, value: /* `someValue` 的值 */, oldValue: /* 上一次更新時(shí) `someValue` 的值 */ }
也就是說(shuō)指令:
后面跟著的是指令的參數(shù),.
后面跟著的是指令的修飾符
簡(jiǎn)單示例一:
背景高亮
<template> <div> <div v-highlight>默認(rèn)的高亮顏色</div> <div v-highlight="{ bgColor: 'red', color: 'yellow' }">這是一個(gè)簡(jiǎn)單的例子</div> </div> </template> <script> export default { setup() { /*...*/ }, directives: { highlight: { mounted(el, binding) { console.log('binding', binding) const color = binding.value && binding.value.color ? binding.value.color : '#fff' const bgColor = binding.value && binding.value.bgColor ? binding.value.bgColor : 'blue' el.style.color = color el.style.backgroundColor = bgColor } } } } </script>
簡(jiǎn)單示例二:
<template> <div> <div v-letter:uppercase>hello world</div> </div> </template> <script> export default { setup() { /*...*/ }, directives: { letter: { mounted(el, binding) { const text = el.innerHTML if (binding.arg === 'uppercase') { el.innerHTML = text.toUpperCase() } else if (binding.arg === 'lowercase') { el.innerHTML = text.toLowerCase() } else { el.innerHTML = text.split('') } } } } } </script>
到此這篇關(guān)于vue3的自定義指令directives實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)vue3 directives內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- Vue3實(shí)現(xiàn)全局loading指令的示例詳解
- vue全局注冊(cè)自定義指令防抖解析
- vue全局自定義指令和局部自定義指令的使用
- Vue全局自定義指令Modal拖拽的實(shí)踐
- vue全局自定義指令-元素拖拽的實(shí)現(xiàn)代碼
- vue directive定義全局和局部指令及指令簡(jiǎn)寫(xiě)
- 對(duì)Vue2 自定義全局指令Vue.directive和指令的生命周期介紹
- vue 自定義指令directives及其常用鉤子函數(shù)說(shuō)明
- vue?filters和directives訪(fǎng)問(wèn)this的問(wèn)題詳解
- vue通過(guò)指令(directives)實(shí)現(xiàn)點(diǎn)擊空白處收起下拉框
- 詳解vue + vuex + directives實(shí)現(xiàn)權(quán)限按鈕的思路
- vue全局指令文件 directives詳解
相關(guān)文章
Vue中$nextTick實(shí)現(xiàn)源碼解析
這篇文章主要為大家介紹了Vue中$nextTick實(shí)現(xiàn)源碼解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10在Vue中使用scoped屬性實(shí)現(xiàn)樣式隔離的原因解析
scoped是Vue的一個(gè)特殊屬性,可以應(yīng)用于<style>標(biāo)簽中的樣式,這篇文章給大家介紹在Vue中,使用scoped屬性為什么可以實(shí)現(xiàn)樣式隔離,感興趣的朋友一起看看吧2023-12-12vue 右鍵菜單插件 簡(jiǎn)單、可擴(kuò)展、樣式自定義的右鍵菜單
這篇文章主要介紹了vue 右鍵菜單插件 簡(jiǎn)單、可擴(kuò)展、樣式自定義的右鍵菜單,本文給大家分享個(gè)例子,給大家及時(shí)的非常詳細(xì),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2018-11-11Vue如何解決每次發(fā)版都要強(qiáng)刷清除瀏覽器緩存問(wèn)題
這篇文章主要介紹了Vue如何解決每次發(fā)版都要強(qiáng)刷清除瀏覽器緩存問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08vue+intro.js插件實(shí)現(xiàn)引導(dǎo)功能
使用 intro.js這個(gè)插件,來(lái)實(shí)現(xiàn)一個(gè)引導(dǎo)性的效果,經(jīng)常在一些新手引導(dǎo)頁(yè)遇到這樣的需求,下面通過(guò)本文給大家分享vue+intro.js插件實(shí)現(xiàn)引導(dǎo)功能,感興趣的朋友一起看看吧2024-06-06