vue.js全局API之nextTick全面解析
官方介紹：在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。在修改數(shù)據(jù)之后立即使用這個(gè)方法，獲取更新后的 DOM。
就是DOM更新完成之后執(zhí)行的方法，并且超級(jí)方便的事情是回調(diào)函數(shù)中的this會(huì)綁定到最新的vue實(shí)例上。
代碼示例如下：
<p ref="mgs">{{mgs}}</p>
<button @click="updateDom">點(diǎn)擊更新DOM</button>
data:function () {
return {
mgs:"DOM"
}
}
updateDom:function () {
this.mgs = "update Dom";
console.log(this.$refs.mgs.innerHTML);
this.$nextTick(function () {
console.log(this.$refs.mgs.innerHTML);
})
}
點(diǎn)擊更新按鈕，調(diào)用updateDom，首先給mgs重新賦值，此時(shí)打印頁(yè)面中p標(biāo)簽對(duì)應(yīng)的內(nèi)容，以及nextTick中也打印相應(yīng)的內(nèi)容，結(jié)果如下：
從結(jié)果可以看出，this.mgs = “update Dom”;執(zhí)行之后，DOM并沒(méi)有直接更新，而nextTick是等到DOM更新完成之后進(jìn)行回調(diào)，回調(diào)函數(shù)中的this已經(jīng)是更新過(guò)的vue
代碼地址：https://github.com/Demon-han/vue_demo/
其中nextTick.vue為該實(shí)例，其他組件將在其他文章中詳細(xì)介紹
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了解決.vue文件url引用文件的問(wèn)題，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
vue項(xiàng)目如何部署運(yùn)行到tomcat上
這篇文章主要介紹了vue項(xiàng)目如何部署運(yùn)行到tomcat上的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
vue使用動(dòng)態(tài)添加路由(router.addRoutes)加載權(quán)限側(cè)邊欄的方式
這篇文章主要介紹了vue使用動(dòng)態(tài)添加路由(router.addRoutes)加載權(quán)限側(cè)邊欄的方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了Vue.js自定義指令的基本使用詳情,文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值需要的小伙伴可以參考一下2022-05-05
vue實(shí)現(xiàn)歌手列表字母排序下拉滾動(dòng)條側(cè)欄排序?qū)崟r(shí)更新
這篇文章主要介紹了vue實(shí)現(xiàn)歌手列表字母排序，下拉滾動(dòng)條側(cè)欄排序?qū)崟r(shí)更新,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-05-05
最近一段時(shí)間，一直在做主題方面的工作。我們的主題，并不是簡(jiǎn)單切換一下顏色，或者排版變化這些，而是變化比較大的主題。比如說(shuō)：主題1和主題2看起來(lái)完全不一樣，功能甚至都不一樣。這樣，通過(guò)切換css就無(wú)法做到了，因此我思考良久，使用了如下2種方法2021-06-06
vue項(xiàng)目tween方法實(shí)現(xiàn)返回頂部的示例代碼
這篇文章主要介紹了vue項(xiàng)目tween方法實(shí)現(xiàn)返回頂部,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
這篇文章主要介紹了Vue組件公用方法提取mixin實(shí)現(xiàn)，多個(gè)組件共用一個(gè)方法時(shí)可以用?mixin?抽取到一個(gè)js文件中，作為共用方法，下面一起進(jìn)入文章了解更多詳細(xì)內(nèi)容吧2022-03-03
本文主要介紹了解決vue.js not detected的問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
vue3出來(lái)好一段時(shí)間了,一直想著用一下,下面這篇文章主要給大家介紹了關(guān)于vue3使用element?ui的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10