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