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

更新时间：2019年02月11日 08:44:24 作者：cofecode

这篇文章主要介绍了vue自定义指令实现方法,结合实例形式分析了vue.js自定义指令相关定义、注册、使用方法及操作注意事项,需要的朋友可以参考下

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

您可能感兴趣的文章:

Vue使用openlayers实现绘制圆形和多边形
这篇文章主要为大家详细介绍了Vue如何使用openlayers实现绘制圆形和多边形，文中的示例代码讲解详细，感兴趣的小伙伴快跟随小编一起动手尝试一下
2022-06-06
Vue导航守卫使用教程详解
这篇文章主要介绍了Vue导航守卫使用教程，可以向任意给定的导航守卫传递next，但是next的使用过程容易出错，需要确保next在任何给定的导航守卫中都被严格调用一次
2023-04-04
详解Vue 方法与事件处理器
本篇文章主要介绍了详解Vue 方法与事件处理器，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-06-06
vue-cli3项目升级到vue-cli4 的方法总结
这篇文章主要介绍了vue-cli3项目升级到vue-cli4 的方法总结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-03-03
前端vue实现的h5页面接入微信支付流程(jsapi方式)
vue实现微信支付有三种方式,第一种方式是PC端支付,第二种方式是H5支付,第三种方式是微信公众号支付,这篇文章主要给大家介绍了关于前端vue实现的h5页面接入微信支付流程,文中介绍的方法是利用jsapi方式,通过代码将实现的方法介绍的非常详细,需要的朋友可以参考下
2024-01-01
vue项目中如何使用mock你知道吗
这篇文章主要为大家介绍了vue项目如何使用mock，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2021-11-11
vue中项目页面空白但不报错产生的原因及分析
这篇文章主要介绍了vue中项目页面空白但不报错产生的原因及分析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-05-05
vue如何从后台下载.zip压缩包文件
这篇文章主要介绍了vue如何从后台下载.zip压缩包文件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
Vue 实现前端权限控制的示例代码
这篇文章主要介绍了Vue 实现前端权限控制的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-07-07
ElementUI中<el-form>标签中ref、:model、:rules的作用浅析
Element官方文档中写到,model是表单数据对象,rules是表单验证规则,下面这篇文章主要给大家介绍了关于ElementUI中<el-form>标签中ref、:model、:rules作用的相关资料,需要的朋友可以参考下
2023-01-01

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具