Vue中自定义指令

简单的例子

  <div id="app">
    <div v-bgcolor="'yellow'">111</div>
    <div v-bgcolor="'blue'">222</div>
    <div v-bgcolor="myColor">333</div>
  </div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script type="text/javascript">
  // 手动操作DOM 可以使用指令封装

  // Vue.directive('bgcolor',{
  //   // 指令生命周期
  //   inserted(el,binding) {
  //     console.log("绑定当前指令的标签插入父节点就会执行",el,binding)
  //     el.style.background = binding.value
  //   },
  //   update(el,binding) {
  //     el.style.background = binding.value
  //   }
  // })
  // 可简化写法 用函数
  Vue.directive('bgcolor',function(el,binding) {
    el.style.background = binding.value
  })
    var vm = new Vue({
      el: '#app',
      data: {
        myColor: 'red'
      }
    })
  </script>