使用Vue自定义指令实现Select组件

关于Vue指令，官方文档里有比较清楚的说明，如果不是特别明白可以点击这里先看看！

关于Vue自定义指令，在这个例子中需要明白以下基本知识点：

它是用来操作DOM的，所以所有Vue指令都会挂在 template 里的某个元素上

它有4个钩子函数，一是 bind ，它在指令第一次绑定到元素上调用而且只调用一次，这个钩子很重要，我们在这个例子里会用到；第二个是 inserted ，它在元素插入到父元素的时候调用，官方文档里给了一个 v-focus 的例子就用到了它；第三个和第四个分别是 update 和 componentUpdated ，前者是在 vNode 更新时调用，后者是在更新完成后调用；最后是 unbind ，在指令和元素解绑时调用。

这4个钩子函数可以 都至少可以传3个参数 ，第一是 el 就是被绑定指令的元素，第二个 binding ， 它是个对象 ，而且 它的一些属性特别有用 ，它的属性包括 name ， expression 和 value 等，当然不只这三个，但是我们这个例子要用。举个例子: 假如我写一个自定义指令 v-example=”test” ，而这个 test 是我在 methods 里写的一个方法，那么就可以通过 binding.name 拿到 example 字符串，可以通过 binding.value 拿到 test 函数本身并且执行。如果这里不明白没关系接下来我们会说到。

如果仔细观察，它们非常像 Vue 本身的生命周期钩子函数，只是它们是作用在指令上与元素的上的。从 bind 最开始绑定到最后 unbind 解绑完成了一个完整的周期。

好了，我们把之前 mounted 写的DOM操作相关的东西都删掉，开始动手写一个自定义指令。

<ul class="options" v-show="showOptions" v-clickOut="test"> //这里使用了下面的自定义指令,并将一个test方法传递进去了
  <li v-for="(item, index) in options" :key="index" @click.stop="choose(item.value)">{{item.value}}</li>
</ul>
...
methods: {
  ......
  test() {       //test函数,它作为参数传递给了指令
    console.log('这是一个测试函数')
  }
},
directives: {       //这里是自定义指令
  clickOut: {       // 这里是自定义的v-clickOut指令
    bind: function(el, binding) {    // bind钩子函数，当它与元素绑定的时候就会执行
      console.log('el===>', el)
      console.log('binding.name===>', binding.name)
      console.log('binding.expression===>', binding.expression)
      console.log('binding.value===>', binding.value)
    }
  }
}

上面的代码都有清楚的注释说明，我们自定义了一个 clickOut 的指令，并且把它挂到了一个元素上，而且给它传了一个 test 方法，我们来看看 console.log 出的东西都是些啥。