vue中的 ref 和 $refs 及js原生操作方式

转载自：伊优

 

如图，ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例：

在上面的例子中，input的引用信息为input1 ，$refs 是所有注册过的ref的一个集合，

console.log(this.$refs.input1)//<input type="text" id="input1">
console.log(document.getElementById('input1'))//<input type="text" id="input1">

 这两种方法获得的都是Dom节点，而$refs相对document.getElementById的方法，会减少获取dom节点的消耗。

ref和v-for在一起的情况

li里的ref的无法读取item里面的值，即item.name或被直接读取为字符串“item.name”，

此时的$refs

 

 整个用下来就是比较方便取DOM，方便操作DOM,

element.querySelector() 和 element.querySelectorAll();

element.querySelectorAll()
返回一个nodeList，它包含所有元素的非活动节点，该元素来自与其匹配指定的css选择器组的元素。

语法

   elementList = baseElement.querySelectorAll(selectors)

   elementList  是一个nodeList对象

   baseElement   是一个元素对象

   selectors 一组css选择器

 

例子

var matches = document.body.querySelectorAll('p');
这个会返回所有body里面的p后代元素

var el = document.querySelector('#test')
var matches = el.querySelectorAll('div.node > p')

这个例子会返回id为test的元素的所欲class属性是node的所有div后代元素的p子元素

 

var matches = el.querySelectorAll('iframe[data-src]');

返回el元素的的后代元素中所有拥有data-src属相的iframe元素
注意点

   nodeList对象，不推荐使用for....in进行遍历，，这个是因为for in 它会遍历原型上的属性，所以你懂得

   nodeList本身不是数组，所以如果我们想要使用它的方法就必须将他装化成真正的数组。。。

兼容性

   兼容到IE8

element.querySelector()
返回第一个元素，调用它的元素的一个后代，该元素与指定的选择器组匹配

语法

   element = baseElement.querySelector(selectors)

 element和baseElement是element对象

selectors是一个css选择器字符串

let el = document.body.querySelector('#test')

vue：this.$el.querySelector('#test')

例如：将页面高度进行修改，使用方法

        
<div id="talk"></div>



watch: {
            chatList() {//监听当页面改数据改变时，改变页面高度
                this.$nextTick(() => { //监听高度
//                    if(){
                    let container = this.$el.querySelector('#talk')
                    container.scrollTop = container.scrollHeight
//                    }

                })
            }

 

            '$route.path':function(){
                this.$nextTick(() => { //监听高度 路由变化就跳转到顶部
                let personal = document.getElementById("app");
//                console.log(personal)
//                console.log(document.getElementById("app"))
                personal.scrollIntoView();
            });
            }

 

兼容性
   兼容到IE8
--------------------- 

 

 

版权声明：本文为CSDN博主「zhanglongdream」的原创文章，遵循CC 4.0 by-sa版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/zhanglongdream/article/details/76522526

转载于:https://www.cnblogs.com/lxj666/p/11365255.html