Vue自定义指令的介绍和使用

1.例在前面

在项目的实战过程中，有三个模块都需要传背景图片过去，我用了两种方法：

	第一种方式：第一种在组件中传递背景图片地址给子组件，
	子组件中在标签中定义内联样式
	
	第二种方式：封装v-bgImg指令，
	在使用这个指令的时候将地址传入，在指令中设置背景图片地址并生效。

接下来我会详细介绍第二种方式

代码示例

第一步：自定义指令
import Vue from 'vue';
Vue.directive('bgImg',{
  inserted:function (el,val) {
    el.style.backgroundImage="url("+`${val.value}`+")";
    el.style.backgroundSize="cover";
  }
});
讲解：
	我们定义了一个名叫bgImg的指令，
	当被绑定的元素中插入这个指令时，
	指令所赋的值为val，
	el为被绑定的DOM元素
实现的功能为：
	某个元素绑定了该指令，并传了一个值，那么该元素的背景图片为传的那个值，可以实现自定义背景图片。

第二步：全局挂载 main.js中

// 挂载自定义指令
import './utils/directive/gloabalDirective'

第三步：指令的使用
    <ColorPiece
      v-bgImg="'//cdn.17tuiguang.com/wx/crmhome/bg-Blue.jpg'"
    />

2.Vue指令基础知识

基础知识来源
1.自定义指令的使用条件：
代码复用和抽象的主要形式是组件，但有些时候我们仍然需要对普通的DOM元素进行底层操作，这时就会需要用到自定义组件。

2.1 钩子函数

一个指令的定义对象可以提供如下几个钩子函数：（根据功能，可供替换inserted位置的函数）

1.bind：
只调用一次，
指令第一次绑定到元素时使用。
在这里可以进行一次性的初始化设置。

2.inserted：
被绑定元素插入父节点时调用
（仅保证父节点存在，但不一定被插入文档中）。

3.update：
所在组件的Vnode更新时调用，
但也可能发生在其子VNode更新之前。
指令的值可能发生了变化，也可能没有。
但是你可以通过比较前后的值来忽略不必要的模板更新。

4.componentUpdated:
指令所在组件的Vnode及其子Vnode全部更新后调用。

5.unbind
只调用一次，指令与元素解绑的时候调用。

2.2 钩子函数参数

指令钩子函数会被传入以下参数：

el：
指令所绑定的元素，可以用来直接操作 DOM。

binding：
一个对象，包含以下 property：
	name：指令名，不包括 v- 前缀。
	value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
	oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
	expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
	arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
	modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
	
vnode：
Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。

oldVnode：
上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

2.3 动态指令参数

Vue官网中有实例介绍：

<div id="dynamicexample">
  <h3>Scroll down inside this section ↓</h3>
  <p v-pin:[direction]="200">I am pinned onto the page at 200px to the left.</p>
</div>
data: function () {
    return {
      direction: 'left'
    }
  }
Vue.directive('pin', {
  bind: function (el, binding, vnode) {
    el.style.position = 'fixed'
    var s = (binding.arg == 'left' ? 'left' : 'top')
    el.style[s] = binding.value + 'px'
  }
})

2.4 函数简写

很多时候，无论是在bind还是update中想要触发相同的行为，那么我们就可以不用写钩子函数了

官网示例：
Vue.directive('color-swatch', function (el, binding) {
  el.style.backgroundColor = binding.value
})

2.5 对象字面量

如果指令需要传递多个值，可以传入一个JavaScript对象字面量。指令函数可以接受所有合法的JavaScript表达式。

官网示例：
<div v-demo="{ color: 'white', text: 'hello!' }"></div>

Vue.directive('demo', function (el, binding) {
  console.log(binding.value.color) // => "white"
  console.log(binding.value.text)  // => "hello!"
})