vue之自定义指令

1.如何自定义一个指令?
在export模板中加入directives选项
比如:directives:{
css:{
    inserted(el,bind){
    console.log("inserted");
  }
    bind(el bind){
    console.log("bind");
          }
}

      }

像这样的inserted,bind称为钩子函数,里面的参数

el:代表当前指令被绑定的组件;

bind:代表当前指令所绑定的组件的一些值,通常我们打印这两个参数时,会返回整个组件,并且组件里面会添加一项value,其值为绑定的值,比如我们使用一个自定义的组件v-my

<p v-my="'123'">testText</p>

那么console.log(el)打印结果:<p >testText</p>
console.log(bind)打印结果:一些关于这个指令的信息,比如指令的名字为my,使用的时候名字为v-my,它被绑定到组件上的时候被赋予的值为“123”等等
2.如何使用这个自定义指令?
假如在当前组件中定义了一个指令XXX,则在当前组件中使用
使用方法:指令名加上前缀即v-XXX

同样的假如我们使用Vue.directives定义了一个指令,那么这个指令可以在全局使用


猜你喜欢

转载自blog.csdn.net/milan_kunderla/article/details/79996496
今日推荐