Vue3自定義指令語法圖文詳解
更新時間：2023年09月18日 09:00:46 作者：u013308709
這篇文章主要給大家介紹了Vue3自定義指令的相關(guān)資料,自定義指令是一種在Vue應(yīng)用程序中擴展HTML標(biāo)簽的能力,文中通過圖文介紹的非常詳細,需要的朋友可以參考下
1、什么是自定義指令
- vue 官方提供了 v-for、v-model、v-if 等常用的內(nèi)置指令。除此之外vue 還允許開發(fā)者自定義指令。
- vue 中的自定義指令分為兩類，分別是：
- ? 私有自定義指令
- ? 全局自定義指令
2、聲明私有自定義指令的語法
在每個 vue 組件中，可以在 directives 節(jié)點下聲明私有自定義指令。示例代碼如下：
3、使用自定義指令
在使用自定義指令時，需要加上 v- 前綴。示例代碼如下：
4、聲明全局自定義指令的語法
全局共享的自定義指令需要通過“單頁面應(yīng)用程序的實例對象”在main.js文件中進行聲明，示例代碼如下：
5、updated 函數(shù)
mounted 函數(shù)只在元素第一次插入 DOM 時被調(diào)用，當(dāng) DOM 更新時 mounted 函數(shù)不會被觸發(fā)。 updated函數(shù)會在每次 DOM 更新完成后被調(diào)用。示例代碼如下：
- 注意：在 vue2 的項目中使用自定義指令時，【mounted -> bind 】【 updated -> update 】
6、函數(shù)簡寫
如果 mounted 和updated 函數(shù)中的邏輯完全相同，則可以簡寫成如下格式：
7、 指令的參數(shù)值
在綁定指令時，可以通過“等號”的形式為指令綁定具體的參數(shù)值，示例代碼如下：
總結(jié)
到此這篇關(guān)于Vue3自定義指令語法的文章就介紹到這了,更多相關(guān)Vue3自定義指令內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
關(guān)于el-col的使用,占據(jù)寬度的應(yīng)用解析
這篇文章主要介紹了關(guān)于el-col的使用,占據(jù)寬度的應(yīng)用解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
vue-router3.0版本中 router.push 不能刷新頁面的問題
這篇文章主要介紹了vue-router3.0版本中 router.push 不能刷新頁面的問題,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
vue中改變選中當(dāng)前項的顯示隱藏或者狀態(tài)的實現(xiàn)方法
下面小編就為大家分享一篇vue中改變選中當(dāng)前項的顯示隱藏或者狀態(tài)的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
vant如何實現(xiàn)Collapse折疊面板標(biāo)題自定義
這篇文章主要介紹了vant如何實現(xiàn)Collapse折疊面板標(biāo)題自定義，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章通過圖文形式給大家介紹了vue項目的骨架及常用組件的相關(guān)知識，對此有興趣的朋友跟著小編一起學(xué)習(xí)參考下吧。2017-12-12
ResizeObserver?loop?limit?exceeded報錯原因及解決方案
這篇文章主要給大家介紹了關(guān)于ResizeObserver?loop?limit?exceeded報錯原因及解決的相關(guān)資料,公司項目監(jiān)聽系統(tǒng)中發(fā)現(xiàn)一個高頻錯誤ResizeObserver loop limit exceeded,而瀏覽器的console中卻沒有提示,需要的朋友可以參考下2023-09-09
Vant是有贊前端團隊開源的移動端組件庫,于2017年開源,已持續(xù)維護4年時間,下面這篇文章主要給大家介紹了關(guān)于Vue3中使用vant的相關(guān)資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2022-10-10
vue2.0使用v-for循環(huán)制作多級嵌套菜單欄
這篇文章主要介紹了vue2.0制作多級嵌套菜單欄,主要使用v-for循環(huán)生成一個多級嵌套菜單欄，這個方法應(yīng)用非常廣泛，需要的朋友可以參考下2018-06-06
這篇文章主要介紹了vue項目nginx二級域名配置方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
vue3?setup語法糖各種語法新特性的使用方法(vue3+vite+pinia)
這篇文章主要介紹了vue3?setup語法糖各種語法新特性的使用(vue3+vite+pinia),本文主要是記錄vue3的setup語法糖的各種新語法的使用方法,需要的朋友可以參考下2022-09-09