关于Vue中如何自定义指令（简写形式）

竹苓丿

已于 2022-03-19 20:31:51 修改

阅读量2.5k

点赞数 1

文章标签： javascript vue 前端开发语言

于 2022-03-19 20:29:50 首次发布

本文链接：https://blog.csdn.net/weixin_58498354/article/details/123601086

版权

1.自定义指令的作用

在实际项目开发过程中，除了vue自身提供的一些固定指令，如v-if,v-show,v-model等除外，我们可能根据项目的需求来自己注册一些自定义的指令，更好的提高开发和工作效率。

2.自定义指令注册的两种方式

自定义指令有全局注册和局部注册两种方式，

3.一个自定义指令的案例（局部注册）

先看需求：定义一个v-big指令，要求和v-text功能类似，但会把绑定的数值放大10倍

 <body>
    <div id="app">
      <h3 v-big="n">{{n}}</h3>
      <button @click="n++">点我n++</button>
    </div>
    <script>
      new Vue({
        el: "#app",
        data() {
          return {
            n: 1,
          };
        },
        //局部定义自定义指令
        directives: {
          //自定义了一个v-big的自定义指令
          big(Element, binding) {
          	//Element为h3节点，binding.value为传入的值n
            Element.innerText = binding.value * 10;
          },
        },
      });
    </script>
  </body>

执行结果如下：

关于上面代码的几个疑问：
1.directives是什么？
directives是vue为我们提供的一个自定义指令的对象，类似于methods，watch，
2.自定义指令名称写什么？
我们定义的指令名称为v-big，即下面就用big来创建函数
3.big函数传入的参数是什么？
第一个参数为当前绑定自定义指令的dom节点，第二个参数为一个对象：

我们只要关注他的value值即可，他的value值就是自定义指令传入的值n
4.big函数什么时候被调用：
当vue模板被重新解析时就会调用big函数

4.全局注册实现小案例

 <body>
    <div id="app">
      <h3 v-big="n">{{n}}</h3>
      <button @click="n++">点我n++</button>
    </div>
    <script>
    //全局注册了一个v-big的自定义指令
     Vue.directive('big',(Element,binding)=>{
        Element.innerText = binding.value * 10;
      })
      new Vue({
        el: "#app",
        data() {
          return {
            n: 1,
          };
        },
      });
    </script>
  </body>

运行截图和上面一样，就不演示了。

注意全局注册为directive而不是directives，没有s。

竹苓丿

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
12
评论
关于Vue中如何自定义指令（简写形式）

1.自定义指令的作用在实际项目开发过程中，除了vue自身提供的一些固定指令，如v-if,v-show,v-model等除外，我们可能根据项目的需求来自己注册一些自定义的指令，更好的提高开发和工作效率。2.自定义指令的两种方式自定义指令有全局注册和局部注册两种方式，3.一个自定义指令的案例（局部注册）先看需求：定义一个v-big指令，要求和v-text功能类似，但会把绑定的数值放大10倍 <body> <div id="app"> &lt
复制链接

扫一扫