vue自定义指令实现方法详解

2019-11-19 12:10:06

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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
componentUpdated
unbind

钩子函数参数

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>

希望本文所述对大家vue.js程序设计有所帮助。

上一篇：mpvue+vant app搭建微信小程序的方法步骤

下一篇：Vue表情输入组件微信face表情组件