<script>
//指令钩子函数：
/*
bind 只调用一次，指令第一次绑定到元素的时调用
inserted 被指令绑定指令的元素插入 父节点的时候调用
update 被绑定的元素模版只要发生变化，就会触发（通过比较模板变化前后）
componentUpdated 被绑定元素所在模版完成一次更新周期时被触发
unbind 指令被解除绑定的时候
*/
/*
定义指令回调函数（钩子函数的几个参数的意义）
第一个参数：绑定指令的元素html
第二个参数：对象的形式输出，自定义指令的信息（指令名字，使用的名字，包括我们传入的值，我们可以利用这个参数，在钩子函数中进行相关操作），
第三个参数：输出绑定指令的元素的虚拟dom节点信息
*/
const selfcomponent={
template:`<div>
<p>自定义组件</p>
<input v-model="com"/>
<p v-my-dir="com">组件的内容:跟随变色</p>
</div>`,
//props:['color'],
data(){
return { com:'#ddd'}//给一个默认值
},
directives:{
"myDir":{//指令的名字
bind:function(el,binding,nodeDom){
console.log(binding);
console.log("bind");
el.style="color:"+binding.value;
},
inserted:function(){
console.log("instered");
},
update:function(el,binding,nodeDom){//每次在input中输入信息，都会触发这个函数
console.log("update");
el.style="color:"+binding.value;
},
componentUpdated:function(el,bindging,nodeDom){
console.log("componented");
},
unbind:function(el,binding,nodeDom){
console.log("unbind");
}
}
}
};
var app =new Vue({
el:"#app",
data:{
color:'red',
},
methods:{
},
components:{
selfcomponent
}
});
</script>
vue自定义指令
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- （一）场景：例如百度的搜索框，当我们输入搜索内容的时候会弹出搜索建议提示窗，然后当我们点击其他区域的时候这个弹窗就...
- Vue.directive (自定义指令) 使用方法，类似v-model等内置指令，2.0的为了提升性能,所以在指...
