Vue.js框架入门之自定义指令(六）

自定义全局指令

// 自定义全局指令 v-focus，为绑定的元素自动获取焦点：

   Vue.directive('focus', {

      inserted: function (el) { // inserted 表示被绑定元素插入父节点时调用

        el.focus();

      }

    });

自定义私有指令

directives: {

 Vue.directive('focus', {

      inserted: function (el) { // inserted 表示被绑定元素插入父节点时调用
        el.focus();
      }
}

自定义指令中的全局指令与私有指令与过滤器所编写的位置与方式类似,它的调用方式与v-on等内置指令的方式相同

自定义指令的使用方式

<input type="text" v-model="searchName" v-focus v-color="'red'" v-font-weight="900">

总结：
使用自定义指令，我们在项目中所需要的指令功能但内置指令未能满足我们的需求，我们可以自行编写一个自定义指令方便我们项目的开发，提高代码的可重用性。