Vue2自定义指令（局部和全局）_vue2局部指令-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_70024734/article/details/131569478

文章介绍了如何在Vue.js中创建自定义指令，包括局部注册和全局注册两种方式。局部指令通过`directives`选项定义，如`big-number`，并在元素绑定时执行相应操作。全局指令则在Vue实例上方定义，如`big`和`fbind`，可在任何Vue实例中使用。这些指令影响元素的属性和行为，如改变innerText或处理元素焦点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自定义属性 directives

1.局部

<div id="app">
        <p v-text = "n"></p>
        <p v-big-number = "n"></p>
        <button @click = "n++">点我</button>
  </div>

<script>
        var vm = new Vue({
            el: '#app',
            data: {
                n:1
            },
            //局部 第一种
            directives:{
                // 自定义属性 directives
                //big函数何时会被调用？指令与元素绑定时
                "big-number"(element,binding){
                    console.log("调用");
                    // console.log(this);//此处的this指的是window
                    // console.log(element,binding);
                    element.innerText = binding.value*10
                }
            }
        })

 //局部指令 对象式写法 第二种
        // directives: {
        //   fbind: {
        //     //指令与元素成功绑定时
        //     bind(element, binding) {
        //       element.value = binding.value;
        //     },
        //     // 指令插入页码
        //     inserted(element, binding) {
        //       element.focus(); //获取焦点
        //     },
        //     //指令所在的模板被重新解析时
        //     update(element, binding) {
        //       element.value = binding.value;
        //     },
        //   },
        // },
    </script>

2.全局

在Vue实例上方写

//定义全局指令
        Vue.directive("big",(element,binding)=>{
          
            element.innerText = binding.value*10
            
        })

然后其他Vue实例也可，例如第二个实例使用


    <div id="apps">
        <p v-big="n"></p>
     </div> 
    <script>


        //定义全局指令 第一种
         Vue.directive("big",(element,binding)=>{
          
             element.innerText = binding.value*10
            
         })

//全局指令  第二种
      Vue.directive("fbind", {
        bind(element, binding) {
          element.value = binding.value;
        },
        // 指令插入页码
        inserted(element, binding) {
          element.focus(); //获取焦点
        },
        //指令所在的模板被重新解析时
        update(element, binding) {
          element.value = binding.value;
        },
      });


        var vm = new Vue({
            el: '#app',
            data: {
                n:1
            },

           
        })

    </script>