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相差甚远.所以学习起来其实还是有很大的关联.但是,终归来说.两者还是有语法上的细微差 ...
随机推荐
- [VS] - EntityFrameworkCore 2.0 安装失败 之解决
背景 在 Visual Studio 2017 中,使用 Nuget 包管理器安装 EntityFrameworkCore 2.0 失败.切换至程序包控制器管理台,查看 Error Message: ...
- 定时任务-SQL Server代理 作业
创建一个sqlserver作业 sqlserver的作业的功能更加偏向于数据库,处理数据,迁移等.当然也可以调用接口(存储过程调用接口 https://www.cnblogs.com/cynchan ...
- PAT(B) 1063 计算谱半径（Java）
题目链接:1063 计算谱半径 (20 point(s)) 题目描述 在数学中,矩阵的"谱半径"是指其特征值的模集合的上确界.换言之,对于给定的 n 个复数空间的特征值 { a1 ...
- 【HC89S003F4开发板】 2调度器
HC89S003F4开发板调度器调试 一.前言 逛论坛看到有人给HC89做了调度器,调度部分直接操作堆栈的. 下载链接 下载下来调试看看. 二.用户代码 @实现效果 编译后led灯闪烁 #includ ...
- 基于socketserver实现并发的socket套接字编程
一.基于TCP协议 基于tcp的套接字,关键就是两个循环,一个链接循环,一个通信循环 socketserver模块中分两大类:server类(解决链接问题)和request类(解决通信问题) 1.1 ...
- docker 实践八：docker-compose
本篇介绍 docker 官方三剑客之一的 docker-compose. 注:环境为 CentOS7,docker 19.03. docker-compose docker-compose 的前身是开 ...
- mysql创建唯一索引UNIQUE INDEX，以及报错“#失败原因: [Execute: Duplicate entry '733186700' for key 'uniq_video_id_index']”
要给t_video_prods表的video_id字段创建唯一所以,可以使用下面这条语句: alter table t_video_prods add UNIQUE INDEX `uniq_video ...
- （转）FFmpeg架构之I/O模块分析
注意:这篇转载的文章比较早,写得很清晰,但是新版的ffmpeg的很多数据结构的名字已经改了.因此只能作参考.(例如ByteIOContext已经改名为AVIOContext) 1概述 ffmpeg项目 ...
- 题解-APIO2019桥梁
problem \(\mathrm {loj-3145}\) 题意概要:给定一张 \(n\) 点 \(m\) 边的无向图,边有边权,共 \(q\) 次操作,每次会将第 \(x\) 条边的权值改为 \( ...
- 在论坛中出现的比较难的sql问题：39(动态行转列 动态日期列问题)
原文:在论坛中出现的比较难的sql问题:39(动态行转列 动态日期列问题) 最近,在论坛中,遇到了不少比较难的sql问题,虽然自己都能解决,但发现过几天后,就记不起来了,也忘记解决的方法了. 所以,觉 ...