Vue自定义指令directive的用法

Vue.directive 注册全局指令

使用自定义的指令，只需在对用的元素中，加上’v-‘的前缀形成类似于内部指令’v-if’，'v-text’的形式。

• 注册一个全局自定义指令（不带参数） v-focus,—语法—Vue.directive(‘focus’,function(){})

 <div id="app">
    <input type="text" v-focus>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*自定义指令*/
    Vue.directive('focus', {
      inserted: function(el){
        // el表示指令所绑定的元素
        el.focus();
      }
    });
    var vm = new Vue({
      el: '#app',
    });
  </script>

自定义带参数的全局指令

  <div id="app">
    <input type="text" v-color='msg'>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*自定义指令-带参数 */
    Vue.directive('color', {
      // bind声明周期, 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
      // el 为当前自定义指令的DOM元素  
      // binding 为自定义的函数形参   通过自定义属性传递过来的值 存在 binding.value 里面
      bind: function(el, binding){
        // 根据指令的参数设置背景色
        // console.log(binding.value.color)
        el.style.backgroundColor = binding.value.color;
      }
    });
    var vm = new Vue({
      el: '#app',
      data: {
        msg: {
          color: 'blue'
        }
      },
    });
  </script>

如果想注册局部指令，组件中也接受一个 directives 的选项：和methods平级

用法和全局一样，只能在当前组件里使用，当全局指令和局部指令同名时以局部指令为准

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