vue中的自定义指令

vue中的自定义指令相信大家对它并不是很陌生，听过但是没用过是对它的常态，今天就让我们来见识它的魅力。

1、出现的原因

官网上是这样说的：除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。

2、注册自定义指令

注册的用法分为两种。
1、一种是全局的

Vue.directive('red', {
  inserted: function(el) {
    el.style.color = 'red';
    el.style.fontSize = '20px';
  }
})

这里我们直接将自定义指令挂载到Vue上，通过vue提供的api—directive
第一个参数是我们的指令名称，也就是v-后边的名字
第二个参数是一个对象，对象中的inserted属性是个函数，它的第一个参数是你自定义指令使用的那个元素。
你可以在这里对这个元素进行一些节点操作。
2、一种是组件内部的

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
	    el.style.color = 'red';
	    el.style.fontSize = '20px';
    }
  }
}

这里的代码也是比较清晰明了，我们直接在组件中使用directive配置，它的key就是指令名称，值为一个对象，对象中包含一个inserted属性，属性值为一个函数，与全局注册的方式相同
3、区别
这里的区别也比较明显，一种是挂载到Vue上全局都可以用，一种是只在本组件生效。
全局时指令名作为第一个参数，组件时作为key来实现。

3、使用自定义指令

自定义指令的使用与默认指令方法相同，直接在组件或节点上使用v-指令名的形式就可以完成使用，非常的方便。

<h2>
	<span v-red>列表</span>
	<span>新增</span>
</h2>
or
<div class="right">
    <MyFooter v-red />
 </div>

此时对应元素的文本会变成红色。

4、总结

自定义指令api相对简单，主要是还涉及的业务场景较少，使用之前考虑是否需要使用它。

如有纰漏，欢迎指正。