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