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. Jquery取小数后边2位,N位;jQuery去掉字符串首尾空字符串

    function fix(num, N) { , N); return Math.round(num * base) / base; } 实例,取小数后边两位 var yhmoney2 = fix(1 ...

  2. tongweb安装后无法启动问题

    安装后执行bin下的启动文件,但是管理界面依然无法打开 1.确认破解的dat文件是否在跟目录下,是否过期 2.如果jdk64位试试下面的方法:JAVA_HOME/jre/lib/ext/下缺少包 su ...

  3. Logparser介绍

    原文链接:https://www.cnblogs.com/Jerseyblog/p/3986591.html Logparser是一款非常强大的日志分析软件,可以帮助你详细的分析网站日志.是所有数据分 ...

  4. 用系统默认mail服务实现邮件发送

    用系统默认mail服务实现邮件发送 1.操作步骤 第一步:设备服务器发送邮件要用的,邮箱地址,账号密码 编辑/etc/mail.rc vim /etc/mail.rc 在文件的结尾追加,账号信息配置 ...

  5. linux命令--cut的使用

    cut 是一个选取命令,将一段数据进行分析,取得我们想要的 语法: cut (参数)(文件) 常用参数: -b:仅显示行中指定直接范围的内容:(以字节为单位分割) -c:仅显示行中指定范围的字符:(以 ...

  6. ajax发送列表(traditional, serialize )

    $(function () { $('#add_submit_ajax').click(function () { $.ajax({ url:'/addapp/', data:$('#add_app' ...

  7. Java初学者应该注意的学习问题

    作为初学者,在刚开始学习的时候,一定会走很多弯路.但其实很多弯路是不必走的,会浪费很多时间,导致学习效率大打折扣.今天小编给大家讲述一下,作为一个Java初学者,在开始学习的时候应该注意的问题,应该从 ...

  8. Linux 总线、设备、驱动模型 与 设备树

    1.总线.设备.驱动模型 本着高内聚.低耦合的原则,Linux 把设备驱动模型分为了总线.设备和驱动三个实体,这三个实体在内核里的职责分别如下: 设备和驱动向总线进行注册,总线负责把设备和对应的驱动绑 ...

  9. 【EFM32】EFM32芯片解锁、加锁操作

    [解锁] 使用J-Flash,新建Project,选择对应的EFM32芯片型号. 选择Target >> Connect >> Unsecure chip ,便进行解锁了,解锁 ...

  10. (转)Thinkpad X1 Carbon 扩展硬盘

    http://tieba.baidu.com/p/5837920925 网上看到有人成功利用X1C空闲的4G模块来实现了扩充用的是东芝RC100或者建兴的T11 其实难点应该是2242这种尺寸的SSD ...