Vue自定义指令的语法规则

Vue自定义指令

http://cn.vuejs.org/v2/guide/custom

• 为何需要自定义

  • 内置指令不满足需求

• 自定义指令的语法规则（获取元素焦点）

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

  • 自定义指令用法

  <input type="text" v-focus>

• 带参数的自定义指令（改变元素背景色）

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

  • 指令的用法

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

• 局部指令

    directives: {
  
        focus: {
  
            //指令的定义
  
            inserted: function (el){
  
                el.focus()
  
            }
  
        }
  
    }