vue1和vue2獲取dom元素的方法 及 nextTick() 、$nextTick()

vue1.*版本中

在標簽中加上el='dom'，然后在代碼中this.$els.dom這樣就拿到了頁面元素

例如：<div class='box' el='myBox'>你好</div>

讓你好的顏色顯示為紅色：this.$els.myBox.style.color = 'red'

 

vue2.*版本中

在標簽中加上ref='dom'，然后在代碼中this.$refs.dom這樣就拿到了頁面元素

例如：<div class='box' ref='myBox'>你好</div>

讓你好的顏色顯示為紅色：this.$refs.myBox.style.color = 'red'

 

注：

可以用 $nextTick 來確保 Dom 變化后再執行一些事情：

<ul ref="nav">
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>

this.$nextTick( () => {
	this.$refs.nav.children[0].style.color = 'red';
})

 

vue2.0$nextTick監聽數據渲染完成之后的回調函數

vue里面本身帶有兩個回調函數：

 

　　一個是`Vue.nextTick(callback)`，當數據發生變化，更新后執行回調。

　　另一個是`Vue.$nextTick(callback)`，當dom發生變化，更新后執行的回調。

 

例子：

<ul id="demo">
    <li v-for="item in list">{{item}}</div>
</ul>

 

new Vue({
    el:'#demo',
    data:{
        list=[0,1,2,3,4,5,6,7,8,9,10]
    },
    methods:{
        push:function(){
            this.list.push(11);
            this.nextTick(function(){
                alert('數據已經更新')
            });
            this.$nextTick(function(){
                alert('v-for渲染已經完成')
            })
        }
    }
})

.