功能:实现当前使用了v-color这个指令的元素的文本颜色是和 data中定义好的color中的颜色值一致
方法一:
Vue.directive('color',function(){
// 1.0 获取到v-color="color1"中的这个color1变量的值
// console.log(this.vm.color1);
// console.log(this.expression);
this.el.style.color = this.vm[this.expression];
});
方法二:
Vue.directive('color',{
bind:function(el,binding){
console.log(binding);
el.style.color = binding.value;
}
})
var vm = new Vue({
el: '#app',
data: {
color1:'red',
}
})
方法一中Vue.directive()的第二个参数是回调函数, 方法二中的第二个参数是一个对象,对象里面有一个bind方法,为什么方法二的性能比方法一的性能要好一些呢?