vue自定義指令實(shí)現(xiàn)方法詳解
本文實(shí)例講述了vue自定義指令實(shí)現(xiàn)方法。分享給大家供大家參考,具體如下:
vue中的指令就是v-on v-bind v-show等等,那么自定義指令是什么呢?
自己定義的指令就是自定義指令。
語法:
Vue.directive(id, definition)
這里可以參考vue中的指令
<h1 v-if="yes">Yes</h1> 其中,if就是指令I(lǐng)D,yes是expression
Vue.directive()傳入接受兩個(gè)參數(shù),id是指指令I(lǐng)D,definition是指定義對(duì)象。其中,定義對(duì)象可以提供一些鉤子函數(shù)。
鉤子函數(shù):
- bind
- inserted:被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用 (僅保證父節(jié)點(diǎn)存在,但不一定已被插入文檔中)。
- update
- componentUpdated
unbind
鉤子函數(shù)參數(shù)
- el:指令所綁定的元素,可以用來直接操作 DOM 。
- binding:一個(gè)對(duì)象,包含以下屬性:
比如 name, value ,expression ,rawName等等
為了更好的操作DOM
例子如下,讓p標(biāo)簽的顏色變成紅色。給p標(biāo)簽加入了v-color 的自定義指令。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <p v-color="red">我是自定義指令</p> red綁定到data里面的變量 <p v-color="'blue'">我是自定義指令</p> 也支持字符串 </div> <script src='vue.js'></script> <script> // 注冊(cè)一個(gè)全局的自定義指令 Vue.directive('color', { inserted: function (el,binding) { console.log(el,binding) el.style.color = binding.value } }) new Vue({ el:'#app', data:{ red:'red' } }) </script> </body> </html>
局部注冊(cè)例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <p v-color="red">我是自定義指令</p> </div> <script src='vue.js'></script> <script> new Vue({ el:'#app', data:{ red:'red' }, directives: { color: { // 指令的定義 inserted: function (el,binding) { el.style.color = binding.value } } } }) </script> </body> </html>
比如給側(cè)邊欄做一個(gè)鼠標(biāo)滾輪事件。
但是,這樣需要兼容寫法,粗暴的給元素添加onmousewheel是不對(duì)的,因?yàn)樵诨鸷鼮g覽器下根本不會(huì)執(zhí)行。
怎么辦?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #scrollwrap { width:200px; height:800px; background: #ccc; } </style> </head> <body> <div id="app"> <div id="scrollwrap" v-scrollfn="mousewheel">我是側(cè)邊欄</div> </div> <script src='vue.js'></script> <script> new Vue({ el:'#app', data:{ red:'red', mousewheel: '滾輪事件' }, directives: { scrollfn: { // 指令的定義 inserted: function (el,binding) { var userAgent = window.navigator.userAgent // 通過userAgent拿到 if (userAgent.indexOf('Firefox')> -1) { console.log('是火狐瀏覽器') el.addEventListener('DOMMouseScroll',function (e){ console.log(e.detail) }) } else { console.log('不是火狐') el.addEventListener('mousewheel',function (e){ console.log(e.wheelDelta) }) } } } } }) </script> </body> </html>
希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。
相關(guān)文章
Vue使用openlayers實(shí)現(xiàn)繪制圓形和多邊形
這篇文章主要為大家詳細(xì)介紹了Vue如何使用openlayers實(shí)現(xiàn)繪制圓形和多邊形,文中的示例代碼講解詳細(xì),感興趣的小伙伴快跟隨小編一起動(dòng)手嘗試一下2022-06-06vue-cli3項(xiàng)目升級(jí)到vue-cli4 的方法總結(jié)
這篇文章主要介紹了vue-cli3項(xiàng)目升級(jí)到vue-cli4 的方法總結(jié),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03前端vue實(shí)現(xiàn)的h5頁(yè)面接入微信支付流程(jsapi方式)
vue實(shí)現(xiàn)微信支付有三種方式,第一種方式是PC端支付,第二種方式是H5支付,第三種方式是微信公眾號(hào)支付,這篇文章主要給大家介紹了關(guān)于前端vue實(shí)現(xiàn)的h5頁(yè)面接入微信支付流程,文中介紹的方法是利用jsapi方式,通過代碼將實(shí)現(xiàn)的方法介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01vue中項(xiàng)目頁(yè)面空白但不報(bào)錯(cuò)產(chǎn)生的原因及分析
這篇文章主要介紹了vue中項(xiàng)目頁(yè)面空白但不報(bào)錯(cuò)產(chǎn)生的原因及分析,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-05-05Vue 實(shí)現(xiàn)前端權(quán)限控制的示例代碼
這篇文章主要介紹了Vue 實(shí)現(xiàn)前端權(quán)限控制的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07ElementUI中<el-form>標(biāo)簽中ref、:model、:rules的作用淺析
Element官方文檔中寫到,model是表單數(shù)據(jù)對(duì)象,rules是表單驗(yàn)證規(guī)則,下面這篇文章主要給大家介紹了關(guān)于ElementUI中<el-form>標(biāo)簽中ref、:model、:rules作用的相關(guān)資料,需要的朋友可以參考下2023-01-01