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 相关文章推荐
浏览器加载、渲染和解析过程黑箱简析
Nov 29 Javascript
Jquery动态更改一张位图的src与Attr的使用
Jul 31 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
Nov 22 Javascript
file控件选择上传文件确定后触发的js事件是哪个
Mar 17 Javascript
Jquery焦点与失去焦点示例应用
Jun 10 Javascript
Vue.js每天必学之构造器与生命周期
Sep 05 Javascript
基于chosen插件实现人员选择树搜索自动筛选功能
Sep 24 Javascript
jQuery中的deferred对象和extend方法详解
May 08 jQuery
Vue.js实现可配置的登录表单代码详解
Mar 29 Javascript
Laravel admin实现消息提醒、播放音频功能
Jul 10 Javascript
vue路由守卫,限制前端页面访问权限的例子
Nov 11 Javascript
使用PDF.js渲染canvas实现预览pdf的效果示例
Apr 17 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中设置时区,记录日志文件的实现代码
2013/01/07 PHP
PHP中error_reporting函数用法详细介绍
2017/06/11 PHP
jQuery 页面载入进度条实现代码
2009/02/08 Javascript
淘宝搜索框效果实现分析
2011/03/05 Javascript
javascript学习笔记(七)利用javascript来创建和存储cookie
2011/04/08 Javascript
jQuery+css+html实现页面遮罩弹出框
2013/03/21 Javascript
Js注册协议倒计时的小例子
2013/06/24 Javascript
js函数setTimeout延迟执行的简单介绍
2013/07/17 Javascript
javascript中的循环语句for语句深入理解
2014/04/04 Javascript
js返回前一页刷新本页重载页面
2014/07/29 Javascript
Javascript基础教程之for循环
2015/01/18 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
2015/12/01 Javascript
JavaScript事件学习小结(一)事件流
2016/06/09 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
2016/06/12 Javascript
基于原生JS实现图片裁剪
2016/08/01 Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
2016/10/28 Javascript
canvas知识总结
2017/01/25 Javascript
基于react框架使用的一些细节要点的思考
2017/05/31 Javascript
vue中引用阿里字体图标的方法
2018/02/10 Javascript
微信小程序解除10个请求并发限制
2018/12/18 Javascript
js验证身份证号码记录的方法
2019/04/26 Javascript
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
2019/05/21 Javascript
Async/Await替代Promise的6个理由
2019/06/15 Javascript
Vue登录主页动态背景短视频制作
2019/09/21 Javascript
vue 组件内获取actions的response方式
2019/11/08 Javascript
[07:59]2014DOTA2叨叨刀塔 林熊猫称被邀请赛现场盛况震撼
2014/07/21 DOTA
flask + pymysql操作Mysql数据库的实例
2017/11/13 Python
python散点图实例之随机漫步
2018/08/27 Python
python 常见字符串与函数的用法详解
2018/11/23 Python
使用Python调取任意数字资产钱包余额功能
2019/08/15 Python
总结python 三种常见的内存泄漏场景
2020/11/20 Python
美国在线工具商店:Acme Tools
2018/06/26 全球购物
大学校庆邀请函
2014/01/11 职场文书
五星级酒店餐饮部总监的标准岗位职责
2014/02/17 职场文书
社区两委对照检查材料
2014/08/23 职场文书
2015年平安创建工作总结
2015/04/29 职场文书