vue中部分api解释 ($nextTick)
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)的更多相关文章
- Vue 中为什么要有nextTick?
摘要:本文将浅析nextTick的作用.使用场景和背后的原理实现,希望对大家有所帮助. 本文分享自华为云社区<Vue 中的 nextTick 有什么作用?>,作者:CoderBin. 一. ...
- vue 中一些API 或属性的常见用法
prop 官方解释:Prop 是你可以在组件上注册的一些自定义特性.当一个值传递给一个 prop 特性的时候,它就变成了那个组件实例的一个属性. 通俗点讲就是:prop是父组件用来传递数据的一个自定义 ...
- Vue中之nextTick函数源码分析
Vue中之nextTick函数源码分析 1. 什么是Vue.nextTick()?官方文档解释如下:在下次DOM更新循环结束之后执行的延迟回调.在修改数据之后立即使用这个方法,获取更新后的DOM. 2 ...
- 【转】简单理解Vue中的nextTick
前言: Vue中的nextTick涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下.其中关于nextTick的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下nextTick ...
- 简单理解Vue中的nextTick
Vue中的nextTick涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下.其中关于nextTick的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下nextTick. 一. ...
- vue中nextTick的使用(转载)
转载自:https://www.cnblogs.com/chaoyuehedy/p/8985425.html 简介 vue是非常流行的框架,他结合了angular和react的优点,从而形成了一个轻量 ...
- vue中$nextTick的用法
简介 vue是非常流行的框架,他结合了angular和react的优点,从而形成了一个轻量级的易上手的具有双向数据绑定特性的mvvm框架.本人比较喜欢用之.在我们用vue时,我们经常用到一个方法是th ...
- Vue中$nextTick的理解
Vue中$nextTick的理解 Vue中$nextTick方法将回调延迟到下次DOM更新循环之后执行,也就是在下次DOM更新循环结束之后执行延迟回调,在修改数据之后立即使用这个方法,能够获取更新后的 ...
- vue中nextTick
vue中nextTick可以拿到更新后的DOM元素 如果在mounted下不能准确拿到DOM元素,可以使用nextTick 在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue ...
随机推荐
- orcal - 添加用户、授权
create user jy2 identified by jy2; grant dba to jy2;
- Spring Boot 初识
发展到今天,spring已经是一个大家族了,如果想要使用其中的两到三个组件就会有多复杂的配置,有时候还有会版本不一致的错误,让人很无奈.于是,就有了spring Boot,spring Boot ...
- sql中的不常见查询
1.对于CROSS APPLY 和 OUTER APPLY 的应用: CROSS APPLY 类似于INNER JOIN 但是,可以规定对于满足条件的数据需要关联几行,应用场景: 每个零件把第一个工单 ...
- Iview Modal 点击确定就关闭,我想禁止关闭该怎么办呢?
网上各种loading,不推荐.用下面的方法直接就解决了 <div slot="footer"> <Button type="text" si ...
- 一个jQuery对象绑定多个事件
1.两个事件有两种不同的方法 jQuery("#id").click(func1(){}).mouseover(func2(){}) ; 2.两个事件调用同一种方法 jquery( ...
- mkdir npm
mkdir -p 创建目录 没有就创建 有就用 npm init -y 不提示创建package.json 文件
- XproerIM2-更新-2017-6-28
资源下载:源代码,开发文档,客户端,openfire-3.9.3.exe,openfire-4.1.4.exe, 开源库:cximage600-full,boost-1.55.0,pugixml-1. ...
- Neural Network Virtual Machine
深度学习Stack 为什么提出NNVM? 深度学习框架现状 - “碎片化” 目前,深度学习应用框架呈现出高度的“碎片化(fragmentation)”倾向,这主要是由于下述两个原因: 1. 深度学习正 ...
- CodeForces - 864C-Bus-(模拟加油站问题)
https://vjudge.net/problem/CodeForces-864C 题意:两地之间有个加油站,往返走k个单程,最少加油多少次. 大佬几十行代码就解决,我却要用一百多行的if语句模拟解 ...
- 爬虫之scrapy扩展
针对pipelines的扩展 from scrapy.exceptions import DropItem class CustomPipeline(object): def __init__(sel ...