<div id="app">
  //v-color 是自定义的
 <input type="text" class="form-control" v-color="'blue'"/>
</div>

<script>

//自定义一个设置字体颜色的指令
Vue.directive('color', {
    //样式,只要通过指令绑定给了元素,不管这个元素有没有被插入到页面中去,这个元素就有了一个内联样式
    //将来,元素肯定会显示到页面中去,这时候浏览器的渲染引擎必然会解析样式,应用给这个元素
    bind: function(el, binding){
      //和样式相关的操作,一般都可以在bind中执行
      //el.style.color='red'

      //console.log(binding.name)
      //console.log(binding.value) //值 blue
      //console.log(bingding.expression) //表达式 'blue'

      el.style.color = binding.value
      },
    inserted:function(el){
      //和JS行为有关的操作,最好在inserted中去执行,防止js行为不生效
    }
})

</script>

 官网自定义指令钩子函数参数使用:https://cn.vuejs.org/v2/guide/custom-directive.html

02-11 12:56