虽然 Vue.js 通常鼓励开发人员沿着“数据驱动”的方式思考,避免直接接触 DOM,但是有时我们确实要这么做。比如一个新闻滚动的列表项。如果在这里需要操作dom, 应该是等待 Vue 完成更新 DOM之后。

一、新闻滚动列表

1、在created函数中获取后台数据;

2、模板引擎中用v-for生成列表项;

3、调用滚动函数,假设该滚动函数式原声方法写的;

4、什么时候开始调用滚动函数比较合适呢?

二、this.$nextTick()

官方解释:将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样,不同的是回调的 this 自动绑定到调用它的实例上。

Vue.component('example', {
template: '<span>{{ message }}</span>',
data: function () {
return {
message: 'not updated'
}
},
methods: {
updateMessage: function () {
this.message = 'updated'
console.log(this.$el.textContent) // => 'not updated'
this.$nextTick(function () {
console.log(this.$el.textContent) // => 'updated'
})
}
}
})

三、新闻滚动列表中的this.$nextTick()放哪里?

  因为数据是根据请求之后获取的,所以应该放到请求的回调函数里面。

四、注意this.nextTick()

this.nextTick(callback),当数据发生变化,更新后执行回调。
this.$nextTick(callback),当dom发生变化,更新后执行的回调。

Vue中 等待DOM或者数据完成 在执行 --this.$nextTick()的更多相关文章

  1. 第七十六篇:ref引用(在vue中引用Dom的方法)

    好家伙, 引子: jQuery简化了程序员操作DOM的过程 vue 优势:MVVM 在vue中,程序员不需要操作DOM.程序员只需要把数据维护好即可!(数据驱动视图) 那么若要在vue中操作dom,这 ...

  2. Vue中获取dom元素

    Vue.js虽然说是数据驱动页面的,但是有时候我们也要获取dom对象进行一些操作. vue的不同版本获取dom对象的方法不一样 Vue.js  1.0版本中,通过v-el绑定,然后通过this.els ...

  3. vue 中使用 AJAX获取数据的方法

    在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例: <script type="text/javascri ...

  4. [记录] Vue中的dom操作

    使用过Vue的同学都应该有这样一个感觉,在vue中页面是基于数据驱动的,不需要我们自己操作dom,框架帮我们完成了这一步,事实上Vue官方也建议我们这样做 在绝大多数情况下是不需要操作dom就可以完成 ...

  5. 在vue中操作dom元素

    在vue中可以通过给标签加ref属性,就可以在js中利用ref去引用它,从而达到操作该dom元素,以下是个参考例子 1 <template> 2 <div> 3 <div ...

  6. vue中操作Dom节点的方法

    1.vue中ref操作dom节点 <template> <div id="app"> <div </div> <button @cl ...

  7. Vue中Object和Array数据变化侦测原理

    在学完Vue.js框架,完成了一个SPA项目后,一直想抽时间找本讲解Vue.js内部实现原理的书来看看,经过多方打听之后,我最后选择了<深入浅出Vue.js>这本书.然而惭愧的是,这本书已 ...

  8. Sql server的Merge语句,源表中如果有重复数据会导致执行报错

    用过sql server的Merge语句的开发人员都应该很清楚Merge用来做表数据的插入/更新是非常方便的,但是其中有一个问题值得关注,那就是Merge语句中的源表中不能出现重复的数据,我们举例来说 ...

  9. Vue中独立组件之间数据交互

    独立组件之间数据交互:通过自定义事件 组件A中的[数据],传递给组件B 1.创建组件A,组件B 2.组件B在实例创建完成时就开始监听事件[等待接收数据]:钩子 3.组件A中触发事件,发送数据 注意:接 ...

随机推荐

  1. idea的svn安装

    https://blog.csdn.net/qq_27093465/article/details/74898489

  2. laravel 事务处理

    //開啟事務 DB::beginTransaction(); try { //賬號密碼同步到後台登錄表 $user = new \App\Models\User; $user->name = $ ...

  3. 三种方法获取Class对象的区别

    有关反射的内容见 java反射 得到某个类的Class对象有三种方法: 使用“类名.class”取得 Class.forName(String className) 通过该类实例对象的getClass ...

  4. Jmeter--报错 WARNING: Could not open/create prefs root node Software\JavaSoft\Prefs at root 0x80000002. Windows RegCreateKeyEx(...) returned error code 5.

    今天要用Jmeter测试服务器性能,发现GUI界面总是有warning提示: WARNING: Could not open/create prefs root node Software\JavaS ...

  5. linux curl 命令的使用

    有时候需要内网访问接口地址,使用curl命令,带上-v参数 -v 参数可以显示一次 http 通信的整个过程,包括端口连接和 http request 头信息 curl -v http://172.9 ...

  6. Java JDBC基本用法

    准备oracle驱动包:maven添加oracle jdbc依赖 pom.xml <!-- oracle jdbc驱动 --> <dependency> <groupId ...

  7. Centos7 设置Mongodb开机启动-自定义服务

    (1).在/lib/systemd/system/目录下新建mongodb.service文件,内容如下 [Unit] Description=mongodb After=network.target ...

  8. 利用JavaFx开发RIA桌面应用-事件监听

    1 事件监听 最近利用javaFX开发桌面客户端,碰到需要给各种UI控件添加事件监听,在这里做一个简单的小结,供日后参考. 2 分类处理 在JavaGUI 和Android中,事件通常通过实现list ...

  9. Centos 6.3 安装教程

    如果创建虚拟机,加载镜像之前都报错,可能是virtualbox 的版本问题,建议使用virtualbox    4.3.12 版本 1. 按回车 2.Skip 跳过 3.next 4.选择中文简体 n ...

  10. 关于linux中的system函数

    Linux下使用system()函数一定要谨慎 https://blog.csdn.net/senen_wakk/article/details/51496322 system()正确应用 https ...