前言
系列文章目录：
老师的课件笔记，不含视频 https://www.aliyundrive.com/s/B8sDe5u56BU
1. $nextTick()
1.1 语法
this.$nextTick(回调函数)
1.2 作用
在下一次 DOM 更新结束后执行其指定的回调。
1.3 使用时机
当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。
2. $nextTick() 使用实例
需求：需要实现点击按钮，使用文本框对页面中的标题数据进行修改，且文本框能够自动获取焦点，文本框失去焦点保存修改后的标题，且文本框隐藏。
<!DOCTYPE html> <html lang="en"> <head> <meta charset= "UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="root"> <h1>{{title}}</h1> <input type="text" v-model="title" v-show="isEdit" ref="inputTitle" @blur="handlerBlur" > <button v-show="!isEdit" @click="handlerEdit" >点击修改标题</button> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script> const vm = new Vue({ el: '#root', data: { title: 'hello world', // 是否处于编辑状态 isEdit: false }, methods: { // 对标题进行编辑 handlerEdit() { // 修改状态为编辑状态 this.isEdit = !this.isEdit // 直接让输入框获取焦点 // 此时函数中的代码还未完全执行完成，vue不会进行模板的重新解析 // 所以更新后的还未放入页面，此时获取焦点无效 // this.$refs.inputTitle.focus() // 使用nextTick()在页面解析完成后让文本框获取焦点 // 基于更新后的新输入框进行操作，使其获取焦点 this.$nextTick(()=>{ this.$refs.inputTitle.focus() }) }, // 处理文本框失去焦点 handlerBlur() { // 修改状态为不处于编辑状态 this.isEdit = !this.isEdit } }, }) </script> </html>
