快捷導(dǎo)航

vue中的dom節(jié)點和window對象

更新時間：2022年04月19日 10:33:39 作者：reisaru

這篇文章主要介紹了vue中的dom節(jié)點和window對象，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

window對象

首先window對象是瀏覽器下的默認(rèn)對象，也就是全局對象，在沒有明確指向的時候this指向window。即使切換路由，window對象里面的屬性和方法依舊會保留。因此可以在控制欄直接輸入this、window、self都可以直接打印window對象。window對象很很多默認(rèn)的方法和屬性。

一切全局變量和方法都是window的屬性和方法，也就是只要沒有指定作用域就會賦值給window。

<script type="text/javascript">
? ? var name = "chunlynn";
? ? this.sex = "man"; // 這里的this就是隱式的window對象，相當(dāng)于 sex = "man";
? ? age = 27;
</script>

像這種name、this、age都掛載到了window對象上，成為了window對象的屬性。

即使用了框架，比如vue，jQuery，也只是在window下掛載一個對象，比如引入jQuery之后就會在全局掛載一個$的對象。還是可以直接通過window調(diào)用全局屬性和方法。

在vue中，因為用webpack打包，每個vue都是單獨的模塊，所以需要window._this=1 這樣才能夠引入window對象。而且需要定義在相應(yīng)的script中。這樣就可以在控制臺直接用_this得到這個變量。

dom元素

vue中最好不要直接操作dom元素的。因為vue是用虛擬dom樹就行插入的。

首先數(shù)據(jù)發(fā)生改變，就會經(jīng)過 Data 處理，然后Dep會發(fā)出通知(notify)，告訴 Watcher 有數(shù)據(jù)發(fā)生了變化，接著 Watcher 會傳達(dá)給渲染函數(shù)跟他說有數(shù)據(jù)變化了，可以渲染視圖了(數(shù)據(jù)驅(qū)動視圖)，進(jìn)而渲染函數(shù)執(zhí)行render 方法去更新 VNODE，也就是我們說的虛擬DOM，最后虛擬DOM根據(jù)最優(yōu)算法，去局部更新需要渲染的視圖。

vue中對dom節(jié)點的操作一般是用ref來完成的。ref 加在普通的元素上，用this.$refs.name 獲取到的是dom元素，和原生的document.get(ID)獲得的dom元素一樣，擁有這個dom元素的默認(rèn)屬性，像innertext這種，而ref 加在組件上，用this.$refs.name 獲取到的是vue組件實例，可以使用組件的所有屬性和方法。此時的結(jié)果是一個字典序列，可以直接this.$refs.name[用到的屬性]來獲取并且更改。

但是ref的對象是一個for循環(huán)的數(shù)組，里面每一個元素就是vue對象，也是字典序列。這里因為ref的對象是一個li，所以每一個元素都是li對象。

ref 需要在dom渲染完成后才會有，在使用的時候確保dom已經(jīng)渲染完成。比如在生命周期 mounted(){} 鉤子中調(diào)用，或者在 this.$nextTick(()=>{}) 中調(diào)用。

如果是自定義的組件，甚至可以通過ref調(diào)用emit(A)來實現(xiàn)@ A="實現(xiàn)A"的方法。其實子組件包括第三方組件的api，也就是組件真正實現(xiàn)的地方定義的方法和屬性，都可以在用ref獲得這個組件的方法后，自己模擬實現(xiàn)。

獲取dom節(jié)點的3種方式

vue本來無需操作DOM來更新界面，而且Vue也不推薦我們直接操作DOM，但是我們非要拿到DOM操作DOM怎么辦，那也是有方法的，而且不止一種方法

方式一：（事件源）

<body>
    <div id="aa">
        <input type="button" value="點擊" v-on:click='fun'/>
    </div>
    <script>
        new Vue({
            el:'#aa',
            methods:{
                fun:function(event){
                    console.log(event.target);
                }
            }
        })
    </script>
</body>

輸出結(jié)果

當(dāng)然也可以在方法中傳參進(jìn)去：

<body>
? ? <div id="aa">
? ? ? ? <input type="button" value="點擊" v-on:click='fun($event.target)'/>
? ? </div>
? ? <script>
? ? ? ? new Vue({
? ? ? ? ? ? el:'#aa',
? ? ? ? ? ? methods:{
? ? ? ? ? ? ? ? fun(x){
? ? ? ? ? ? ? ? ? ? console.log(x);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? })
? ? </script>
</body>

方式二：（使用ref）

<body>
? ? <div id="aa">
? ? ? ? <input ref='name' type="button" value="點擊" v-on:click='fun'/>
? ? </div>
? ? <script>
? ? ? ? new Vue({
? ? ? ? ? ? el:'#aa',
? ? ? ? ? ? methods:{
? ? ? ? ? ? ? ? fun(){
? ? ? ? ? ? ? ? ? ? console.log(this.$refs.name);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? })
? ? </script>
</body>

輸出結(jié)果：

方式三：（自定義全局指令）

<body>
? ? <div id="aa">
? ? ? ? <input type="button" value="點擊" v-get/>
? ? </div>
? ? <script>
? ? ? ??
? ? ? ? Vue.directive("get",{
? ? ? ? ? ? bind:function(el){
? ? ? ? ? ? ? ? console.log(el);
? ? ? ? ? ? }
? ? ? ? })
? ? ? ? new Vue({
? ? ? ? ? ? el:'#aa'
? ? ? ? })
? ? </script>
</body>

這里不用點擊，就可以獲取元素，好像在谷歌顯示不友好，