本文實例講述了vue自定義指令實現方法。分享給大家供大家參考，具體如下：
vue中的指令就是v-on v-bind v-show等等，那么自定義指令是什么呢？
自己定義的指令就是自定義指令。
語法：
Vue.directive(id, definition)
這里可以參考vue中的指令
<h1 v-if="yes">Yes</h1> 其中，if就是指令ID，yes是expression
Vue.directive()傳入接受兩個參數，id是指指令ID，definition是指定義對象。其中，定義對象可以提供一些鉤子函數。
鉤子函數：
bind- inserted：被綁定元素插入父節點時調用 (僅保證父節點存在，但不一定已被插入文檔中)。
update componentUpdatedunbind
鉤子函數參數
el：指令所綁定的元素，可以用來直接操作 DOM 。 binding：一個對象，包含以下屬性：比如 name, value ,expression ，rawName等等
為了更好的操作DOM
例子如下，讓p標簽的顏色變成紅色。給p標簽加入了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> // 注冊一個全局的自定義指令 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>局部注冊例子
<!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>比如給側邊欄做一個鼠標滾輪事件。
但是，這樣需要兼容寫法，粗暴的給元素添加onmousewheel是不對的，因為在火狐瀏覽器下根本不會執行。
怎么辦？
<!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">我是側邊欄</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>
新聞熱點
疑難解答
圖片精選
