vue快速入门(二十八)页面渲染完成后让输入框自动获取焦点

注释很详细,直接上代码

上一篇

新增内容

  1. 使用挂载完成的钩子函数
  2. 用focus使输入框获取焦点
    源码
html 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <!-- 挂载点 -->
    <div id="root">
      <input type="text">
    </div>
    <!-- 导入vue的js代码:不会下载的看专栏第一篇 -->
    <script src="./lib/vue2.js"></script>
    <!-- 导入axios的js代码 -->
    <script src="./lib/axios.js"></script>
    <script>
      const app = new Vue({// Vue实例
        
        el: "#root", // 挂载点
        data: {// 数据
          lists:null
        },
        mounted(){// 挂载完成以后
          // 让输入框获取焦点
          document.querySelector("input").focus()
        },
        methods: {
          // 方法
        },
        computed: {
          // 计算属性
        },
        watch: { 
          // 侦听器
        },
      });
    </script>
  </body>
</html>

效果演示(可以看到页面刚刷新完成焦点自动被输入框获取了)

相关推荐
il几秒前
Deepdive into Tanstack Query - 2.0 Query Core 概览
前端·javascript
Shawn5902 分钟前
前端时间管理实践:从时间标准化到工程化封装
前端·javascript
H5开发新纪元3 分钟前
借助 GitHub Copilot 打造一个完美的 React 消息引用系统:从设计到实现的深度剖析
前端·react.js
前端没钱3 分钟前
Electron从入门到入门
前端
zhoouAAA4 分钟前
使用css变量实现前端无刷新切换主题
前端
H5开发新纪元4 分钟前
Vue 项目中 Loading 状态管理及页面切换 Bug 分析
前端·vue.js
哟哟耶耶4 分钟前
react-09React生命周期
前端·javascript·react.js
只可远观6 分钟前
Flutter Dart 循环语句 for while do..while break、continue
开发语言·javascript·ecmascript
亚洲小炫风13 分钟前
flutter 中各种日志
前端·flutter·日志·log
Guheyunyi18 分钟前
智能照明系统:照亮智慧生活的多重价值
大数据·前端·人工智能·物联网·信息可视化·生活