Vue3自定義指令語法圖文詳解
1、什么是自定義指令
- vue 官方提供了 v-for、v-model、v-if 等常用的內(nèi)置指令。除此之外vue 還允許開發(fā)者自定義指令。
- vue 中的自定義指令分為兩類，分別是：
- ? 私有自定義指令
- ? 全局自定義指令
2、聲明私有自定義指令的語法
在每個(gè) vue 組件中，可以在 directives 節(jié)點(diǎn)下聲明私有自定義指令。示例代碼如下：
3、使用自定義指令
在使用自定義指令時(shí)，需要加上 v- 前綴。示例代碼如下：
4、聲明全局自定義指令的語法
全局共享的自定義指令需要通過“單頁面應(yīng)用程序的實(shí)例對(duì)象”在main.js文件中進(jìn)行聲明，示例代碼如下：
5、updated 函數(shù)
mounted 函數(shù)只在元素第一次插入 DOM 時(shí)被調(diào)用，當(dāng) DOM 更新時(shí) mounted 函數(shù)不會(huì)被觸發(fā)。 updated函數(shù)會(huì)在每次 DOM 更新完成后被調(diào)用。示例代碼如下：
- 注意：在 vue2 的項(xiàng)目中使用自定義指令時(shí)，【mounted -> bind 】【 updated -> update 】
6、函數(shù)簡(jiǎn)寫
如果 mounted 和updated 函數(shù)中的邏輯完全相同，則可以簡(jiǎn)寫成如下格式：
7、 指令的參數(shù)值
在綁定指令時(shí)，可以通過“等號(hào)”的形式為指令綁定具體的參數(shù)值，示例代碼如下：
總結(jié)
到此這篇關(guān)于Vue3自定義指令語法的文章就介紹到這了,更多相關(guān)Vue3自定義指令內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue?async?await?promise等待異步接口執(zhí)行完畢再進(jìn)行下步操作教程
在Vue中可以使用異步函數(shù)和await關(guān)鍵字來控制上一步執(zhí)行完再執(zhí)行下一步,這篇文章主要給大家介紹了關(guān)于vue?async?await?promise等待異步接口執(zhí)行完畢再進(jìn)行下步操作的相關(guān)資料,需要的朋友可以參考下2023-12-12
Vue2 Element el-table多選表格控制選取的思路解讀
這篇文章主要介紹了Vue2 Element el-table多選表格控制選取的思路解讀，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
Vue實(shí)現(xiàn)動(dòng)態(tài)路由的示例詳解
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)動(dòng)態(tài)路由的相關(guān)知識(shí),主要涉及到兩個(gè)方面：一是路由的動(dòng)態(tài)添加,二是基于路由的參數(shù)變化來動(dòng)態(tài)渲染組件,下面就跟隨小編一起深入學(xué)習(xí)一下動(dòng)態(tài)路由的實(shí)現(xiàn)吧2024-02-02
vue2如何使用face-api.js實(shí)現(xiàn)人臉識(shí)別功能
本文介紹了如何在Vue.js項(xiàng)目中利用face-api.js實(shí)現(xiàn)人臉識(shí)別功能,首先需要安裝Vue.js和face-api.js以及其依賴TensorFlow.js,接著,下載并配置必要的模型文件到項(xiàng)目目錄,之后,將人臉識(shí)別功能封裝成Vue組件,并在組件中通過視頻流進(jìn)行人臉檢測(cè)和結(jié)果展示2024-09-09
這篇文章主要為大家介紹了vue組件生命周期鉤子使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步早日升職加薪2022-04-04
vue element table中自定義一些input的驗(yàn)證操作
這篇文章主要介紹了vue element table中自定義一些input的驗(yàn)證操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue使用el-table動(dòng)態(tài)合并列及行
這篇文章主要為大家詳細(xì)介紹了vue使用el-table動(dòng)態(tài)合并列及行，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
Vue.set() this.$set()引發(fā)的視圖更新思考及注意事項(xiàng)
this.$set()和Vue.set()本質(zhì)方法一樣，前者可以用在methods中使用。這篇文章主要介紹了Vue.set() this.$set()引發(fā)的視圖更新思考及注意事項(xiàng),需要的朋友可以參考下2018-08-08
Vue無后端配合實(shí)現(xiàn)導(dǎo)出功能的示例代碼
這篇文章主要為大家詳細(xì)介紹了Vue如何在無后端配合的情況下實(shí)現(xiàn)導(dǎo)出功能,文中的示例代碼簡(jiǎn)潔易懂,有需要的小伙伴可以跟隨小編一起了解一下2024-01-01
vue在mounted中window.onresize不生效問題及解決
這篇文章主要介紹了vue中在mounted中window.onresize不生效問題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04