在Vue中通過自定義指令獲取元素

vue.js 是數據綁定的框架，大部分情況下我們都不需要直接操作 DOM Element，但在某些時候，我們還是有獲取DOM Element的需求的；
在 vue.js 中，獲取某個DOM Element常用的方法是將這個元素改成一個組件 (component)，然后通過 this.$el 去獲取，但是在一些很小的項目里，在一些沒有使用 webpack 等構建工具的項目中，創建一個組件並不是那么值得，所以 vue 提供了另一種操作DOM元素的方式，就是自定義指令 (directive) ；
自定義指令功能在DOM Element的生命周期內提供了不同的鈎子函數，並允許我們監聽指令綁定的數據的變化，但是它也是有缺點的，就是在指令的鈎子函數內無法通過 this 來訪問當前 vue 實例，也就無法進一步進行復雜的操作（雖然一般不需要什么復雜的操作），在 vue 的鈎子函數 (lifecycle hook) 和方法 (method) 中也無法像 this.$el 那樣輕易的訪問到自定義指令綁定的DOM元素；
不過只要通過一點點變通的做法，就可以突破這個限制：

HTML代碼：

        <div id="app">
            <span class='test' v-run="register('test1')"></span>
            <p class='test' v-run="register('test2')"></p>
        </div>

JavaScript代碼：

const vm = new Vue({
    el:'#app',
    data : {
        elements : {}
    },
    directives : {
        run (el, binding) {
            if (typeof binding.value == 'function')
                binding.value(el);
        }
    },
    methods : {
        register (flag) {
            return (el)=>{
                this.elements[flag] = el;
            }
        }
    },
    beforeMount () {
        console.log(this.elements.test1); //=> undefined
    },
    mounted () {
        console.log(this.elements.test1); //=> the span DOM Element
        console.log(this.elements.test2); //=> the p DOM Element
    }
})

如代碼所示，建立一個名為 run 的自定義指令，運行綁定的方法，並將當前 DOM Element 作為參數傳入；
同時建立一個名為 register 的方法，接收一個 flag 參數，並根據這個參數返回一個用於將傳入參數注冊到 this.elements 對象中的閉包函數；
將寫好的 run 指令和 register 方法搭配使用，就可以把想要的 DOM 注冊進this.elements，並在 hook 或者 method 中十分方便的訪問；
注意：自定義指令將會在DOM元素插入 Document 時，也就是組件 mount 時首次執行，所以在此之前，比如 beforeMount 鈎子中是無法使用的，這點也和 this.$el 一致，詳情可以查看官方文檔中的生命周期圖示；

其實也很好理解啦……在 mount 之前，根本就沒有這個實際的 DOM 元素，怎么可能訪問的到……(:з)∠)