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

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

竹苓丿

2635人浏览 · 2022-03-19 20:29:50

竹苓丿 · 2022-03-19 20:29:50 发布

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。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^