1. 程式人生 > >vue中部分api的解釋

vue中部分api的解釋

vue src 開發 true code bsp htm -s 技術分享

1:this.$nextTick(function(){

})

傳如的參數是一個函數 這個API主要是獲取dom元素

為什麽需要這個api,在vue框架開發中,更新dom是一個異步操作,如果更新完dom,第一時間獲取的dom不是最新的dom還是之前的dom,

因為更新dom是異步的,所以提供了這個API就是可以在更新完dom元素後獲取最新的dom元素

實例:

<div class="app">
  <div ref="msgDiv">{{msg}}</div>
  <div v-if="msg1">Message got outside $nextTick: {{msg1}}</div>
  <div v-if="msg2">Message got inside $nextTick: {{msg2}}</div>
  <div v-if="msg3">Message got outside $nextTick: {{msg3}}</div>
  <button @click="changeMsg">
    Change the Message
  </button>
</div>
Vue實例

new Vue({
  el: ‘.app‘,
  data: {
    msg: ‘Hello Vue.‘,
    msg1: ‘‘,
    msg2: ‘‘,
    msg3: ‘‘
  },
  methods: {
    changeMsg() {
      this.msg = "Hello world."
      this.msg1 = this.$refs.msgDiv.innerHTML
      this.$nextTick(() => {
        this.msg2 = this.$refs.msgDiv.innerHTML
      })
      this.msg3 = this.$refs.msgDiv.innerHTML
    }
  }
})
技術分享圖片



  

 

vue中部分api的解釋