vuejs自定義組件+操做Dom（directive ）

全局自定義組件

配合js原生選擇器能夠實現對其子元素的dom操做

Vue.directive('color-swatch', function (el, binding) {    
    el.style.backgroundColor = binding.value // 設置el樣式    
    el.querySelector('textarea').focus()    // 設置el下的textarea獲取焦點
})複製代碼

局部自定義

export default {
    data() {        
        return {             
        };    
    },    
    directives:{        
       'local-test':function(el,binding,vnode){            
            /** el能夠獲取當前dom節點，而且進行編譯，也能夠操做事件 **/           
            /** binding指的是一個對象，通常不用 **/    /** vnode 是 Vue 編譯生成的虛擬節點 **/  
            el.style.border="1px solid red";  //操做style全部樣式         
            console.log(el.value);  //獲取v-model的值            
            console.log(el.dataset.name) //data-name綁定的值，須要el.dataset來獲取      
            console.log(vnode.context.$route); //獲取當前路由信息                      
            let newDiv = document.createElement("img")         
            newDiv.style = "... ..."         
            newDiv.innerHtml = "div下顯示的信息"          
            el.appendChild(newDiv)        
        }    
    }
}複製代碼

其中el爲當前dom節點，操做dom的方法採用js原生方法便可；

鉤子函數參數

指令鉤子函數會被傳入如下參數：

• el：指令所綁定的元素，能夠用來直接操做 DOM 。
• binding：一個對象，包含如下屬性：
  • 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 鉤子中可用。

經常使用dom操做方法

dom元素獲取方法：

• document.getElementById ：根據ID查找元素，大小寫敏感，若是有多個結果，只返回第一個；

• document.getElementsByClassName ：根據類名查找元素，多個類名用空格分隔，返回一個 HTMLCollection 。注意兼容性爲IE9+（含）。另外，不單單是document，其它元素也支持 getElementsByClassName 方法；

• document.getElementsByTagName ：根據標籤查找元素， * 表示查詢全部標籤，返回一個 HTMLCollection 。

• document.getElementsByName ：根據元素的name屬性查找，返回一個 NodeList 。

• document.querySelector ：返回單個Node，IE8+(含），若是匹配到多個結果，只返回第一個。

• document.querySelectorAll ：返回一個 NodeList ，IE8+(含）。

• document.forms ：獲取當前頁面全部form，返回一個 HTMLCollection ；

在vue項目中使用的時候，只須要this.$el.getElementsByClassName("userContent")便可拿到class="userContent"的dom樹，而後就能夠執行相應的屬性操做，如上面的例子。

dom元素建立方法：

主要包括 createElement 、 createTextNode 、 cloneNode 和 createDocumentFragment 四個方法。

詳細dom操做可參考大神博客以下：blog.csdn.net/hj7jay/arti…