Vue common features (custom instructions)

1. Why do you need custom instructions

Vue has a total of 13 built-in instructions, but these instructions are not enough, so you need custom instructions

2. Syntax rules of custom instructions (get element focus)

Vue.directive('focus',{
    
    
	insterted:function(el){
    
    
		//获取元素焦点
		el.focus();
	}
}

3. Custom instruction usage

<input type= "text" v-focus>

4. Custom instruction with parameters (change element background color)

Vue.directive('color',{
    
    
	inserted:function(el,binding){
    
    
		el.style.backgroundColor = binding.value.color;
	}
}

5. Usage of instructions

<input type ='text' v-color="{color:'orange'}">