Vue例項的屬性和方法
阿新 • • 發佈:2018-11-01
屬性:
vm.$el:獲取Vue例項關聯的DOM元素
vm.$data:獲取Vue例項的data選項(物件);
vm.$options:獲取Vue例項的自定義屬性(如vm.$options.name,獲取Vue例項的自定義屬性name);
vm.$refs:獲取頁面中所有含有ref屬性的DOM元素(如vm.$refs.hello,獲取頁面中含有屬性ref = “hello”的DOM元素,如果有多個元素,那麼只返回最後一個);
例項如下:
HTML部分
JS部分<div id="container" v-cloak> <h3 ref = "hello">{{msg}}</h3> <h3 ref = "hello">呵呵 {{msg}}</h3> <h3 ref = "hello">呵呵 1{{msg}}</h3> </div>
方法:var app = new Vue({ el:"#container", data:{ msg:"hello,2018!" }, address:"長安西路" }) console.log(app.$el);//返回Vue例項的關聯DOM元素,在這裡是#container console.log(app.$data);//返回Vue例項的資料物件data,在這裡就是物件{msg:”hello,2018“} console.log(app.$options.address);//返回Vue例項的自定義屬性address,在這裡是自定義屬性address console.log(app.$refs.hello)//返回含有屬性ref = hello的DOM元素(如果多個元素都含有這樣的屬性,只返回最後一個)<h3 ref = "hello">呵呵 1{{msg}}</h3>
vm.$mount(DOM選擇器):手動掛載例項的關聯元素
vm.$destroy():銷燬Vue例項
vm.$nextTick(callback):在DOM更新完成後再執行callback函式,一般在修改資料之後使用該方法,以便獲取更新後的DOM元素。
例項如下:
HTMl部分
<div id="wangYear">
<h3>{{msg1}}</h3>
<h3 ref = "age1">{{age}}</h3>
</div>
JS部分
var app1 = new Vue({ data:{ msg1:"hello,旺旺年!", age:"19" } }) //vm.$mount(選擇器):手動掛載Vue例項的關聯元素 app1.$mount("#wangYear") //vm.$destroy():銷燬Vue例項,但是資料還在 //vm.$nextStick(callback): app1.age = 39; //修改了資料age。 console.log(app1.$refs.age1.textContent)//19,怎麼不是39,明明修改了呀,原因是----- // 當執行這一句的時候,DOM還沒更新完,Vue實現響應式並不是資料發生改變後DOM立即變化,而是需要一定的策略進行DOM更新,這是需要時間的!! // 那為什麼我們在頁面中一下子就看到資料已經發生變化了呀?那是因為在我們看到的時候,DOM已經更新完成了,這個過程進行的很快。 app1.$nextTick(function(){ console.log(app1.$refs.age1.textContent)//39 })