vue中$nextTick的用法講解-創(chuàng)新互聯(lián)

vue是非常流行的框架，他結(jié)合了angular和react的優(yōu)點(diǎn)，從而形成了一個(gè)輕量級(jí)的易上手的具有雙向數(shù)據(jù)綁定特性的mvvm框架。本人比較喜歡用之。在我們用vue時(shí)，我們經(jīng)常用到一個(gè)方法是this.$nextTick，相信你也用過。我常用的場(chǎng)景是在進(jìn)行獲取數(shù)據(jù)后，需要對(duì)新視圖進(jìn)行下一步操作或者其他操作時(shí)，發(fā)現(xiàn)獲取不到dom。因?yàn)橘x值操作只完成了數(shù)據(jù)模型的改變并沒有完成視圖更新。在這個(gè)時(shí)候我們需要用到本章介紹的函數(shù)。

創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比保德網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式保德網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋保德地區(qū)。費(fèi)用合理售后完善，十載實(shí)體公司更值得信賴。

雖然 Vue.js 通常鼓勵(lì)開發(fā)人員沿著“數(shù)據(jù)驅(qū)動(dòng)”的方式思考，避免直接接觸 DOM，但是有時(shí)我們確實(shí)要這么做。比如你在Vue生命周期的created()/mounted()鉤子函數(shù)進(jìn)行的DOM操作一定要放在Vue.nextTick()的回調(diào)函數(shù)中。原因是什么呢，原因是在created()/mounted()鉤子函數(shù)執(zhí)行的時(shí)候DOM 其實(shí)并未進(jìn)行任何渲染，而此時(shí)進(jìn)行DOM操作無異于徒勞，所以此處一定要將DOM操作的js代碼放進(jìn)Vue.nextTick()的回調(diào)函數(shù)中。

為什么要用nextTick?

請(qǐng)看如下一段代碼

new Vue({
 el: '#app',
 data: {
  list: []
 },
 mounted: function () {
  this.get()
 },
 methods: {
  get: function () {
   this.$http.get('/api/article').then(function (res) {
    this.list = res.data.data.list
    // ref list 引用了ul元素，我想把第一個(gè)li顏色變?yōu)榧t色
    this.$refs.list.getElementsByTagName('li')[0].style.color = 'red'
   })
  },
 }
})

分享文章：vue中$nextTick的用法講解-創(chuàng)新互聯(lián)
文章源于：http://muchs.cn/article38/coejsp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、電子商務(wù)、App設(shè)計(jì)、品牌網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)