【Vue 2】自定义指令

「已注销」

已于 2023-10-28 21:24:34 修改

阅读量375

点赞数

分类专栏：前端文章标签： vue 2 自定义指令

于 2023-08-15 21:10:15 首次发布

本文链接：https://blog.csdn.net/2201_75288929/article/details/132307348

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

Vue自定义指令允许我们在DOM元素上添加自己想要的行为来扩展Vue的功能。

一个自定义指令需要一个名称和一个定义对象。在定义对象中，你可以使用一些钩子函数来控制指令的行为：

bind：在指令被绑定到元素上时使用，只调用一次。可以用来初始化一些值。
inserted：在被绑定元素插入父节点时调用。可以用来执行初始的DOM操作，比如设置焦点/绑定事件。
update：在被绑定元素的值更新时调用，无论绑定值是否改变。可以用来响应值的更新。可能发生在其子VNode更新之前。
componentUpdated：指令所在组件的VNode及其子VNode全部更新后调用。
unbind：指令与元素解绑时调用，清除绑定的一些事件监听器。

下面给出一个简单的示例：

<!DOCTYPE html>
<html>

<head>
    <title>Vue Custom Directive Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <input v-model="colorValue" v-change-color  style="width: 50px;"  />
    </div>
    <script>
        Vue.directive('change-color', {
            inserted: function (el) {
                el.addEventListener('input', function () {
                    el.style.color = el.value
                })
            }
        })
        var vm = new Vue({
            el: '#app',
            data: {
                colorValue: 'black'
            }
        });
    </script>
</body>

</html>

在这里插入图片描述

Vue自定义指令的钩子函数接受一些参数，这些参数提供了有关指令的上下文信息及对应的DOM元素：

bind(el,binding,vnode):
- el：绑定指令的元素。
- binding：一个对象，包含以下属性：
  - name：指令名称，不包括v-前缀。
  - value：指令的绑定值，可以是一个表达式或变量。
  - oldValue：指令之前的绑定值。
  - expression：绑定值的表达式字符串形式。
  - arg：指令参数，例如v-my-directive:arg中的arg。
  - modifiers：修饰符对象，例如v-my-directive.modifier1.modifier2中，修饰符对象为{modifier1:true,modifier2:true}。
- vnode：Vue编译生成的虚拟节点。
inserted(el,binding,vnode)
update(el,binding,vnode,oldVnode):
- oldVnode：之前的虚拟节点，用于比较更新。
componentUpdated(el,binding,vnode,oldVnode)
unbind(el,binding,vnode)

我们也可以使用v-my-directive:[arg]="value"的形式来使用动态参数。

<!DOCTYPE html>
<html>

<head>
    <title>Vue Custom Directive with Dynamic Argument</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <p v-mydirective:[arg1]>Hello World</p>
    </div>
    <script>
        Vue.directive('mydirective', {
            bind: function(el, binding, vnode) {
                console.log(binding.arg);
                el.style[binding.arg] = '5px solid red';
            }
        });
        var vm = new Vue({
            el: '#app',
            data: {
                arg1: 'border'
            }
        });
    </script>
</body>

</html>

在这里插入图片描述

bind和update的函数简写

同时定义bind和update而不考虑其他钩子函数：

Vue.directive('mydirective',function(el,binding){
    //...
})

「已注销」

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
【Vue 2】自定义指令

Vue自定义指令允许我们在DOM元素上添加自己想要的行为来扩展Vue的功能。的形式来使用动态参数。
复制链接

扫一扫

专栏目录