vue学习(十八)使用自定义指令 为字体渲染颜色

<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>

 

//全局定义
export default{
  name: '',
  data: {
    
  },
  methods: {
    
  },
  directives: {
    'color': {
      bind: function(el, binding){
        el.style.color = binding.value
      },
      inserted: function(el){
      
      }
    },
    'fontSize': {
      bind: function(el, binding){
        el.style.fontSize = binding.value
      }
    }
  }
}

 

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