轉載自：伊優

如圖，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