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…