Vue.directive("color", {
bind: function (el, binding) {
console.log(binding.value.color); //blue
console.log(binding.value); //返回 Object 里面包含color
console.log(binding.value.name); //undefind
el.style.backgroundColor = binding.value.color;
}});
Vue.directive(‘red‘,{
bind:function(el,binding){
console.log(binding.value.red)
el.style.backgroundColor=binding.value.red;
}
});
bind 和 inserted
共同点： dom插入都会调用，bind在inserted之前 不同点： bind 时父节点为 null inserted 时父节点存在。 bind是在dom树绘制前调用，inserted在dom树绘制后调用
bind: function (el) {
console.log(el.parentNode) // null
console.log(‘bind‘) },
inserted: function (el) { console.log(el.parentNode)
// <div class="directive-box">...</div> console.log(‘inserted‘) }
