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…