Vue之nextTick()
我们有时候操作 DOM,是想在 data
数据变更的时候进行操作。
那么,我们应该怎么做呢?
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Vue 学习</title> </head> <body> <!-- 2. Vue 挂载点 - Vue 的虚拟 DOM 在这里操作到实际渲染 --> <!-- 简单理解为 jQuery 的拼接字符串(并不全是) --> <div id="app"></div> <!-- 1. 引用 Vue --> <!-- Vue CDN - 提供 Vue 服务 --> <script src="https://cdn.bootcss.com/vue/2.5.21/vue.js"></script> <!-- Vue Router CDN - 管理路由 --> <script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.js"></script> <!-- Axios CDN - 调用接口 --> <script src="https://cdn.bootcss.com/axios/0.18.0/axios.js"></script> <script> var App = { template: ` <div> <input v-if="isShow" ref="input" /> </div> `, data: function() { return { isShow: true } }, mounted: function() { // 希望在 Vue 真正渲染 DOM 到页面之后进行下面操作 this.$nextTick(function() { this.$refs.input.focus(); }) } } new Vue({ el: document.getElementById('app'), components: { app: App }, template: `<app/>` }) </script> </body> </html>
如上,通过 Vue 的全局 API Vue.nextTick()
,我们在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。
这个操作我们可想象下 Promise
的执行流程,会获得更好的体验。
Vue之nextTick()的更多相关文章
- vue中nextTick
vue中nextTick可以拿到更新后的DOM元素 如果在mounted下不能准确拿到DOM元素,可以使用nextTick 在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue ...
- vue的nextTick的实现
vue的nextTick是用浏览器支持的方法模拟nodejs的process.nextTick 老版本的vue用如下方法来模拟 Promise.thenMutationObserver(Mutatio ...
- Vue中nextTick()解析
最近,在开发的时候遇到一个问题,让我对vue中nextTick()的用法加深了了解- 下面是在组件中引用的一个拖拽的组件: <vue-draggable-resizable class=&quo ...
- Vue的nextTick是什么?
公司做之前项目的时候,遇到了一些比较困惑的问题,后来研究明白了nextTick的用法. 我们先看两种情况: 第一种: export default { data () { return { msg: ...
- 【vue】nextTick源码解析
1.整体入手 阅读代码和画画是一样的,忌讳一开始就从细节下手(比如一行一行读),我们先将细节代码折叠起来,整体观察nextTick源码的几大块. 折叠后代码如下图 整体观察代码结构 上图中,可以看到: ...
- Vue中$nextTick的理解
Vue中$nextTick的理解 Vue中$nextTick方法将回调延迟到下次DOM更新循环之后执行,也就是在下次DOM更新循环结束之后执行延迟回调,在修改数据之后立即使用这个方法,能够获取更新后的 ...
- 基于源码分析Vue的nextTick
摘要:本文通过结合官方文档.源码和其他文章整理后,对Vue的nextTick做深入解析.理解本文最好有浏览器事件循环的基础,建议先阅读上文<事件循环Event loop到底是什么>. 一. ...
- vue之nextTick全面解析
vue的第一篇文章,介绍一下简单的nextTick方法的实现原理 简介 vue是非常流行的框架,他结合了angular和react的优点,从而形成了一个轻量级的易上手的具有双向数据绑定特性的mvvm框 ...
- vue中nextTick和$nextTick的差别
<ul id="demo"> <li v-for="item in list">{{item}}</div> < ...
- Vue.js $nextTick
最近在学习vue.js.了解1.x的基础上再学习2.x的vue.两个版本的确是不会像angular这样1.x和2.x相差甚远.所以学习起来其实还是有很大的关联.但是,终归来说.两者还是有语法上的细微差 ...
随机推荐
- 关于Hive中的join和left join的理解
一.join与left join的全称 JOIN是INNER JOIN的简写,LEFT JOIN是LEFT OUTER JOIN的简写. 二.join与left join的应用场景 JOIN一般用于A ...
- 使用Lombok总结
Lombok学习总结 Project Lombok is a java library that automatically plugs into your editor and build tool ...
- Python类和实例调用
self指向的是实例对象,作为第一个参数,使用时不需要传入此参数. class Student(object): #定义一个Student类, def __init__(self, name, sco ...
- 05 多继承、object类
多继承 Python中一个类可以继承多个父类,并且获得全部父类的属性和方法. class A: def demo(self): print("demo") class B: def ...
- 音量调节条-封装通用的ProgressBar组件
import React, { Component } from 'react' import PropTypes from 'prop-types' import assign from 'obje ...
- Vue $emit $event 传值(子to父)
事件名 始终使用 kebab-case 的事件名. 通过事件向父组件发送信息 子组件中EnFontsize.vue中$emit <button @click="$emit('enlar ...
- [Luogu5327][ZJOI2019]语言(树上差分+线段树合并)
首先可以想到对每个点统计出所有经过它的链的并所包含的点数,然后可以直接得到答案.根据实现不同有下面几种方法.三个log:假如对每个点都存下经过它的链并S[x],那么每新加一条路径进来的时候,相当于在路 ...
- 怎样解决Script error报错问题
如果脚本网址与网页网址不在同一个域(比如使用了 CDN), 那如果这个脚本执行报错了, 就会报:Script error. 由于同源策略, 浏览器禁止向外部脚本泄漏信息, 因此不会提供完整的报错信息, ...
- Django学习笔记 (一) 开发环境配置
Django是一个开放源代码的Web应用框架,由Python写成. 采用了MVC的软件设计模式,即模型M,视图V和控制器C. 1. Python安装 下载地址: http://www.python.o ...
- window.postMessage()实现(iframe嵌套页面)跨域消息传递
window.postMessage()方法可以安全地实现Window对象之间的跨域通信.例如,在页面和嵌入其中的iframe之间. 不同页面上的脚本允许彼此访问,当且仅当它们源自的页面共享相同的协议 ...