vue中nextTick用法实例

2024-11-29 07:02:03

什么是Vue.nextTick()

官方文档解释如下：

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

我理解的官方文档的这句话的侧重点在最后那半句获取更新后的DOM，获取更新后的DOM言外之意就是什么操作需要用到了更新后的DOM而不能使用之前的DOM或者使用更新前的DOM或出问题，所以就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码，比如Swiper扩展包的

var swiper = new Swiper('.swiper-container', {
   pagination: '.swiper-pagination',
   nextButton: '.swiper-button-next',
   prevButton: '.swiper-button-prev',
   paginationClickable: true,
   spaceBetween: 30,
   centeredSlides: true,
   autoplay: 2500,
   autoplayDisableOnInteraction: false
  });

<ul id="demo">
  <li v-for="item in list">{{item}}</div>
</ul>

 new Vue({
  el:'#demo',
  data:{
   list=[0,1,2,3,4,5,6,7,8,9,10]
  },
  methods:{
   push:function(){
     this.list.push(11);
     this.nextTick(function(){
       alert('数据已经更新')
     });

     this.$nextTick(function(){
       alert('v-for渲染已经完成')
     })
   }
}})

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

以上就是本次介绍的全部知识点内容，感谢大家对我们的支持。

vue中nextTick用法实例

什么是Vue.nextTick() 官方文档解释如下: 在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM. 我理解的官方文档的这句话的侧重点在最后那半句获取更新后的DOM,获取更新后的DOM言外之意就是什么操作需要用到了更新后的DOM而不能使用之前的DOM或者使用更新前的DOM或出问题,所以就衍生出了这个获取更新后的DOM的Vue方法.所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码,比如Swiper扩展
vue 组件高级用法实例详解

一.递归组件组件在它的模板内可以递归地调用自己, 只要给组件设置name 的选项就可以了. 示例如下: <div id="app19"> <my-component19 :count="1"></my-component19> </div> Vue.component('my-component19',{ name: 'my-component19', //其实当你利用 Vue.component 全局注册了一个组件
解决vue中使用swiper插件问题及swiper在vue中的用法

Swiper简介 Swiper常用于移动端网站的内容触摸滑动. Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. Swiper开源.免费.稳定.使用简单.功能强大,是架构移动终端网站的重要选择! 解决vue中使用swiper插件,在引入swiper插件后,发现无法正常运行问题这次我们模拟从后台取下数据,然后数据绑定在swiper标签中. <template> <div clas
Vue 的 v-model用法实例

Vue 框架早已经不是 MVVM(Mode-View-View-Model) 双向绑定了.早在 Vue 1.0 时代,Vue 在刚出世的时候的确是 MVVM 双向绑定.自 Vue 2.0 以来,Vue 就不再是双向绑定了,而是像 React 一样是单向绑定 MV(Model-View)了.但是,在 Vue 中仍保留了双向绑定的接口,v-model 就是. 1. 基本用法 <template> <div id="app"> <input v-model=&q
详解template标签用法(含vue中的用法总结)

一.html5中的template标签 html中的template标签中的内容在页面中不会显示.但是在后台查看页面DOM结构存在template标签.这是因为template标签天生不可见,它设置了display:none;属性.  <template><div>我是template</div
Vue中props用法介绍

前言: 在Vue中通过props,可以将原本孤立的组件串联起来,也就是可以子组件可以接收父组件传递过来的data,比如子组件想要引用父组件的数据,那么在props里面声明一个变量,这个变量就可以引用父元素的数据. 实例演示: 子组件: <template> <div> <h3>我是{{name}},今年{{age}}岁,爱好:{{hobby}}</h3>,{{flag}} </div> </template> <script&
Vue中$nextTick实现源码解析

目录正文先看一个简单的问题内部实现先看第一块: 再看第二块: 然后是第三块: 最后是第四块: 正文先看一个简单的问题 <template> <div @click="handleClick" ref="div">{{ text }}</div </template> <script> export default { data() { return { text: 'old' } }, methods:
Android 中WallpaperManager用法实例

Android 中WallpaperManager用法实例注意:壁纸的设置得加入权限: <uses-permission android:name="android.permission.SET_WALLPAPER"/> 1.WallpaperManager 对象的获得: wallpaperManager =WallpaperManager.getInstance(this); 2.设置壁纸的方法: 方法一:wallpaperManager.setBitmap(); /
Java中的instanceof关键字在Android中的用法实例详解

在下面介绍Android中如何使用instanceof关键字开发更方便时,先来温习一下java中instanceof的概念. instanceof大部分的概念是这样定义的:instanceof是Java的一个二元操作符,和==,>,<是同一类东西.由于它是由字母组成的,所以也是Java的保留关键字.它的作用是测试它左边的对象是否是它右边的类的实例,返回boolean类型的数据.举个栗子: String s = "I AM an Object!"; boolean isObj
Vue 中axios配置实例详解

1.GET 请求 //向具有指定ID的用户发出请求 axios.get('/user?ID=12345') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); // 也可以通过 params 对象传递参数 axios.get('/user', { params: { ID: 12345 } }) .then(function (respons

vue中nextTick用法实例

相关推荐

随机推荐