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 相关文章推荐
JS在IE和FF下attachEvent,addEventListener学习笔记
Nov 26 Javascript
JavaScript实现简单图片翻转的方法
Apr 17 Javascript
在JavaScript中使用开平方根的sqrt()方法
Jun 15 Javascript
jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
Aug 08 Javascript
jQuery选择器用法实例详解
Dec 17 Javascript
jQuery xml字符串的解析、读取及查找方法
Mar 01 Javascript
jquery实现左右无缝轮播图
Jul 31 Javascript
3kb jQuery代码搞定各种树形选择的实现方法
Jun 10 Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
Dec 13 Javascript
JavaScript实现二叉树的先序、中序及后序遍历方法详解
Oct 26 Javascript
微信小程序sessionid不一致问题解决
Aug 30 Javascript
解决layui-open关闭自身窗口的问题
Sep 10 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截取中文字符串的问题
2006/07/12 PHP
删除及到期域名的查看(抢域名必备哦)
2008/05/14 PHP
PHP 获取MSN好友列表的代码(2009-05-14测试通过)
2009/09/09 PHP
一个小型js框架myJSFrame附API使用帮助
2008/06/28 Javascript
jquery跟js初始化加载的多种方法及区别介绍
2014/04/02 Javascript
jquery简单插件制作(fn.extend)完整实例
2016/05/24 Javascript
老生常谈JQuery data方法的使用
2016/09/09 Javascript
jQuery EasyUI 组件加上“清除”功能实例详解
2017/04/11 jQuery
JavaScript实现自动跳转文本功能
2017/05/25 Javascript
jquery拖动改变div大小
2017/07/04 jQuery
ng-events类似ionic中Events的angular全局事件
2018/09/05 Javascript
Vue 自定义指令实现一键 Copy功能
2019/09/16 Javascript
layui数据表格重载实现往后台传参
2019/11/15 Javascript
JavaScript中变量提升机制示例详解
2019/12/27 Javascript
Nuxt页面级缓存的实现
2020/03/09 Javascript
Vue实现指令式动态追加小球动画组件的步骤
2020/12/18 Vue.js
[02:30]辉夜杯主赛事第二日胜者组半决赛 CDEC.Y赛后采访
2015/12/26 DOTA
Python中%r和%s的详解及区别
2017/03/16 Python
Python实现的递归神经网络简单示例
2017/08/11 Python
django 使用 request 获取浏览器发送的参数示例代码
2018/06/11 Python
Python图像处理模块ndimage用法实例分析
2019/09/05 Python
利用Python绘制有趣的万圣节南瓜怪效果
2019/10/31 Python
python基于property()函数定义属性
2020/01/22 Python
css3动画 小球滚动 js控制动画暂停
2019/11/29 HTML / CSS
英国鲜花递送:Blossoming Gifts
2020/07/10 全球购物
国际商务系学生个人的自我评价
2013/11/26 职场文书
怎样客观的做好自我评价
2013/12/28 职场文书
大学生就业策划书范文
2014/04/04 职场文书
工伤死亡理赔协议书
2014/10/20 职场文书
2014年文员工作总结
2014/11/18 职场文书
小石潭记导游词
2015/02/03 职场文书
2015年社区卫生工作总结
2015/04/21 职场文书
经典人生语录分享:不畏将来,不念过去,笑对当下
2019/12/12 职场文书
如何使用CocosCreator对象池
2021/04/14 Javascript
Pytorch 如何加速Dataloader提升数据读取速度
2021/05/28 Python
JS开发前端团队展示控制器来为成员引流
2022/08/14 Javascript