[Vue]$nextTick()


前言

系列文章目录:
[Vue]目录
老师的课件笔记,不含视频 https://www.aliyundrive.com/s/B8sDe5u56BU

笔记在线版: https://note.youdao.com/s/5vP46EPC

视频:尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通


文章目录

  • 前言
  • 1. $nextTick()
    • 1.1 语法
    • 1.2 作用
    • 1.3 使用时机
  • 2. $nextTick() 使用实例


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>Documenttitle>
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/[email protected]/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>

[Vue]$nextTick()_第1张图片
[Vue]$nextTick()_第2张图片
[Vue]$nextTick()_第3张图片
[Vue]$nextTick()_第4张图片

你可能感兴趣的:(Vue.js,vue.js,前端,javascript,前端框架,html)