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解释 ($nextTick)的更多相关文章

  1. Vue 中为什么要有nextTick?

    摘要:本文将浅析nextTick的作用.使用场景和背后的原理实现,希望对大家有所帮助. 本文分享自华为云社区<Vue 中的 nextTick 有什么作用?>,作者:CoderBin. 一. ...

  2. vue 中一些API 或属性的常见用法

    prop 官方解释:Prop 是你可以在组件上注册的一些自定义特性.当一个值传递给一个 prop 特性的时候,它就变成了那个组件实例的一个属性. 通俗点讲就是:prop是父组件用来传递数据的一个自定义 ...

  3. Vue中之nextTick函数源码分析

    Vue中之nextTick函数源码分析 1. 什么是Vue.nextTick()?官方文档解释如下:在下次DOM更新循环结束之后执行的延迟回调.在修改数据之后立即使用这个方法,获取更新后的DOM. 2 ...

  4. 【转】简单理解Vue中的nextTick

    前言: Vue中的nextTick涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下.其中关于nextTick的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下nextTick ...

  5. 简单理解Vue中的nextTick

    Vue中的nextTick涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下.其中关于nextTick的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下nextTick. 一. ...

  6. vue中nextTick的使用(转载)

    转载自:https://www.cnblogs.com/chaoyuehedy/p/8985425.html 简介 vue是非常流行的框架,他结合了angular和react的优点,从而形成了一个轻量 ...

  7. vue中$nextTick的用法

    简介 vue是非常流行的框架,他结合了angular和react的优点,从而形成了一个轻量级的易上手的具有双向数据绑定特性的mvvm框架.本人比较喜欢用之.在我们用vue时,我们经常用到一个方法是th ...

  8. Vue中$nextTick的理解

    Vue中$nextTick的理解 Vue中$nextTick方法将回调延迟到下次DOM更新循环之后执行,也就是在下次DOM更新循环结束之后执行延迟回调,在修改数据之后立即使用这个方法,能够获取更新后的 ...

  9. vue中nextTick

    vue中nextTick可以拿到更新后的DOM元素 如果在mounted下不能准确拿到DOM元素,可以使用nextTick 在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue ...

随机推荐

  1. python slenium 中CSS定位

    以百度为例 一.通过id.class定位 1.#id:python:driver.find_element_by_css_selector('input#kw') 2..class:python:dr ...

  2. Python threading(多线程)

    threading模块在较低级别thread模块之上构建更高级别的线程接口. 一.threading模块定义了以下函数和对象: threading.active_count() 等同于threadin ...

  3. js实现选中div内容并复制到剪切板

    function copyUrl () { var div = document.getElementById('xxxx'); if (document.body.createTextRange) ...

  4. Json解析注解 ---@SerializedName

    项目前后端交互采用的是JSON传输,因为前后端沟通不多,经常造成数据格式不统一:在不想后台改动太多下,需要使用@SerializedName解决这个问题 解析数据使用的是Gson解析的json数据 @ ...

  5. 关于vue

    render:(h)=>h(App):声明App组件的内容 挂载到节点 const root=document.createElement("div")document.bo ...

  6. c#中委托和事件(转)

    C# 中的委托和事件 引言 委托 和 事件在 .Net Framework中的应用非常广泛,然而,较好地理解委托和事件对很多接触C#时间不长的人来说并不容易.它们就像是一道槛儿,过了这个槛的人,觉得真 ...

  7. mongodb插入数据获取本次插入的mongodb id

    最近接了一个别人的项目做二次开发,使用php进行mongodb的数据操作时,需要插入数据后得到相应的mongodb 中的id,简单代码如下 $data = array('test' => 'aa ...

  8. SQL中NVL函数

    空值判断函数 1.NVL(表达式A,表达式B) 如果表达式A为空值,NVL返回值为表达式B的值,否则返回表达式A的值.该函数的目的是把一个空值(null)转换成一个实际的值.其表达式的值可以是数字型. ...

  9. sphinx-2.1.9的安装使用

    1.下载/编译安装 cd /usr/local/src wget http://sphinxsearch.com/files/sphinx-2.1.9-release.tar.gz tar -xf s ...

  10. 吴裕雄 python matplotlib 绘图示例

    import matplotlib.pyplot as plt plt.scatter([1,2,3,4],[2,3,2,5])plt.title('My first plot')plt.show() ...