1.如何自定义一个指令?
在export模板中加入directives选项
比如:directives:{
css:{
inserted(el,bind){
console.log("inserted");
}
bind(el bind){
console.log("bind");
}
}
}
console.log(bind)打印结果:一些关于这个指令的信息,比如指令的名字为my,使用的时候名字为v-my,它被绑定到组件上的时候被赋予的值为“123”等等
2.如何使用这个自定义指令?
假如在当前组件中定义了一个指令XXX,则在当前组件中使用
使用方法:指令名加上前缀即v-XXX
在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定义了一个指令,那么这个指令可以在全局使用