vue.js全局API之nextTick全面解析


Posted in Javascript onJuly 07, 2017

官方介绍:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。

就是DOM更新完成之后执行的方法,并且超级方便的事情是回调函数中的this会绑定到最新的vue实例上。

代码示例如下:

<p ref="mgs">{{mgs}}</p>
<button @click="updateDom">点击更新DOM</button>
data:function () {
  return {
   mgs:"DOM"
  }
 }
updateDom:function () {
     this.mgs = "update Dom";
     console.log(this.$refs.mgs.innerHTML);
     this.$nextTick(function () {
      console.log(this.$refs.mgs.innerHTML);
     })
   }

点击更新按钮,调用updateDom,首先给mgs重新赋值,此时打印页面中p标签对应的内容,以及nextTick中也打印相应的内容,结果如下:

vue.js全局API之nextTick全面解析

从结果可以看出,this.mgs = “update Dom”;执行之后,DOM并没有直接更新,而nextTick是等到DOM更新完成之后进行回调,回调函数中的this已经是更新过的vue

代码地址:https://github.com/Demon-han/vue_demo/

其中nextTick.vue为该实例,其他组件将在其他文章中详细介绍

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 自定义容器下雨效果可将下雨图标改为其他
Apr 23 Javascript
jQuery 隐藏和显示 input 默认值示例
Jun 03 Javascript
js 实现的可折叠留言板(附源码下载)
Jul 01 Javascript
jquery图片滚动放大代码分享(2)
Aug 28 Javascript
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
Oct 08 Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
Oct 10 Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
Aug 01 Javascript
随机生成10个不重复的0-100的数字(实例讲解)
Aug 16 Javascript
详解在express站点中使用ejs模板引擎
Sep 21 Javascript
基于Vue el-autocomplete 实现类似百度搜索框功能
Oct 25 Javascript
vue 使用class创建和清除水印的示例代码
Dec 25 Vue.js
js面向对象方式实现拖拽效果
Mar 03 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
Jul 07 #Javascript
解决AjaxFileupload 上传时会出现连接重置的问题
Jul 07 #Javascript
基于rem的移动端响应式适配方案(详解)
Jul 07 #Javascript
详谈js模块化规范
Jul 07 #Javascript
使用JavaScript实现alert的实例代码
Jul 06 #Javascript
vuejs手把手教你写一个完整的购物车实例代码
Jul 06 #Javascript
Vue axios 中提交表单数据(含上传文件)
Jul 06 #Javascript
You might like
一个PHP缓存类代码(附详细说明)
2011/06/09 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
PHP whois查询类定义与用法示例
2019/04/03 PHP
PHP 自动加载类原理与用法实例分析
2020/04/14 PHP
自写的一个jQuery圆角插件
2010/10/26 Javascript
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
2012/03/01 Javascript
js中的caller和callee属性介绍和例子
2014/06/07 Javascript
教你用AngularJS框架一行JS代码实现控件验证效果
2014/06/23 Javascript
使用js Math.random()函数生成n到m间的随机数字
2014/10/09 Javascript
高性能JavaScript DOM编程(1)
2015/08/11 Javascript
基于jQuery实现页面搜索功能
2020/03/26 Javascript
修改Jquery Dialog 位置的实现方法
2016/08/26 Javascript
JS简单生成随机数(随机密码)的方法
2017/05/11 Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
2017/06/29 Javascript
详解vue+css3做交互特效的方法
2017/11/20 Javascript
vue实现商城上货组件简易版
2017/11/27 Javascript
JavaScript模块详解
2017/12/18 Javascript
vue forEach循环数组拿到自己想要的数据方法
2018/09/21 Javascript
详解在Javascript中进行面向切面编程
2019/04/28 Javascript
Vue触发隐藏input file的方法实例详解
2019/08/14 Javascript
layui实现二维码弹窗、并下载到本地的方法
2019/09/25 Javascript
JavaScript变量基本使用方法实例分析
2019/11/15 Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
2020/04/17 Javascript
基于javascript的无缝滚动动画1
2020/08/07 Javascript
Python实现Const详解
2015/01/27 Python
Python远程视频监控程序的实例代码
2019/05/05 Python
Django之PopUp的具体实现方法
2019/08/31 Python
浅谈SciPy中的optimize.minimize实现受限优化问题
2020/02/29 Python
django ORM之values和annotate使用详解
2020/05/19 Python
matplotlib设置颜色、标记、线条,让你的图像更加丰富(推荐)
2020/09/25 Python
pytorch加载语音类自定义数据集的方法教程
2020/11/10 Python
HTML5中的Article和Section元素认识及使用
2013/03/22 HTML / CSS
英国女装网上商店:I Saw It First
2018/10/18 全球购物
挂科检讨书范文
2014/02/20 职场文书
英语课外活动总结
2014/08/27 职场文书
2014年学校体育工作总结
2014/12/08 职场文书