vue自定义指令

最新推荐文章于 2024-06-16 13:00:26 发布

cofecode

最新推荐文章于 2024-06-16 13:00:26 发布

阅读量1.1k

点赞数

分类专栏： Vue.js

本文链接：https://blog.csdn.net/cofecode/article/details/78953571

版权

Vue.js 专栏收录该内容

29 篇文章 2 订阅

订阅专栏

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>

cofecode

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue自定义指令

vue中的指令就是v-on v-bind v-show等等，那么自定义指令是什么呢？自己定义的指令就是自定义指令。语法：Vue.directive(id, definition)这里可以参考vue中的指令 <h1 v-if="yes">Yes</h1> 其中，if就是指令ID，yes是expressionVue.directive()传入接受两个参数，id是指指令ID，definition
复制链接

扫一扫

专栏目录