Vue2自定义指令

最新推荐文章于 2025-04-29 08:01:52 发布

黑猫几绛

最新推荐文章于 2025-04-29 08:01:52 发布

阅读量554

点赞数 2

文章标签： vue.js javascript

本文链接：https://blog.youkuaiyun.com/flow_camphor/article/details/120696573

版权

在Vue2中创建自定义指令有两种方法：函数式创建、对象式创建。

一、函数式创建

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义指令函数式</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>当前的n值是：<span v-text="n"></span></h2>
        <h2>放大十倍后的n值是：<span v-big="n"></span></h2>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false
        const vm = new Vue({
            el: '#root',
            data:{
               n: 1
            },
            directives:{
                // 在函数式自定义指令中有两个参数
                // element获取原生DOM
                // binding主要用来获取DOM身上的value值
                // 这里自定义的指令 `big` 在什么时候会被调用？
                // |————  指令与元素成功绑定时，即刚加载完页面时
                // |————  指令所在的模板被重新解析时
                big(element,binding){
                   element.innerText = binding.value * 10
                }
            }
        })
    </script>
</body>
</html>

二、对象式创建

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义指令函数式</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <input type="text" v-fbind:value="n">
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false
        const vm = new Vue({
            el: '#root',
            data:{
               n: 1
            },
            directives:{
                fbind:{
                    // 指令与元素成功绑定时
                    // 第一次的初始化过程
                    bind(element,binding){
                        element.value = binding.value
                    },
                    // 指令所在元素被插入页面时
                    // 这里已经可以对该元素进行操作了
                    inserted(element,binding){
                        element.focus()
                    },
                    // 指令所在的模板被重新解析时
                    update(element,binding){
                        element.value = binding.value
                    }
                }
            }
        })
    </script>
</body>
</html>

如果我们希望让某个指令变得全局可用，那么就将指令注册为全局指令。

Vue.directive('fbind', {
    // 指令与元素成功绑定时
    // 第一次的初始化过程
    bind(element,binding){
        element.value = binding.value
    },
    // 指令所在元素被插入页面时
    inserted(element,binding){
        element.focus()
    },
    // 指令所在的模板被重新解析时
    update(element,binding){
        element.value = binding.value
    }
})

对于函数式指令的全局化，我们需要考虑一下函数简写形式，这里不过多赘述。

Vue.directive('fbind', function(element,binding){
     element.innerText = binding.value * 10
})

而在Vue3中针对自定义指令的钩子函数改变了，之后会在Vue3专栏中将两者进行对比。