码迷,mamicode.com
首页 > Windows程序 > 详细

vue中部分api的解释

时间:2018-12-21 16:04:51      阅读:405      评论:0      收藏:0      [点我收藏+]

标签:new   got   一个   out   message   技术分享   http   异步操作   world   

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的解释

标签:new   got   一个   out   message   技术分享   http   异步操作   world   

原文地址:https://www.cnblogs.com/tiangeng/p/10156014.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!