当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue自定义指令实现方法详解

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

2019年03月17日  | 移动技术网IT编程  | 我要评论

金刚兔兔,午夜勾魂曲,we将神官网

本文实例讲述了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程序设计有所帮助。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网