(1)当前组件化的自定义指令:
在组件中的用directives声明一个对象,在对象中声明要创建的新
指令的名字,等于一个对象,在对象中的用inserted的方法来进行配置指令的操作,用两个参数,第一个为el,代表当前元素,方便了DOM的操作,第二个是binding,代表的是一个对象,有传过来的值,名字等等,而配置完成之后,直接在的当前组件调用的v-新的指令名字就可以了
<template>
<div style="font-size:20px">
<h1 v-rong='msg'></h1> <!--直接在当前组件用v-新指令即可-->
</div>
</template>
<script>
export default{
data(){
return {
msg:"自定义指令成功了"
}
},
directives:{
rong:{ //自定义指令的名字
inserted(el,binding){ /*用inserted方法来进行的指令的操作,el为当前元素为了方便DOM的操作,
binding是一个对象,有传来的值等一些基本信息*/
el.innerHTML=binding.value
}
}
}
}
</script>
效果如图: