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>

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

相关推荐
小嘿前端仔15 小时前
用AI读源码这件事:前端视角的实战方法论,附Vue3 reactivity源码解读示范
前端
其实防守也摸鱼15 小时前
XSS漏洞全景解析:从原理、实战利用到纵深防御
前端·网络·安全·xss·xss漏洞
戴维南15 小时前
DeepAgents 快速上手教程
前端
bigfatDone16 小时前
OpenSpec + Superpowers 联合开发工作流
前端
北漂大橙子16 小时前
OpenSpec 完全指南:让 AI 编码可预测的规范框架
前端
lemon_yyds16 小时前
OpenCode 最佳实践
前端
束尘16 小时前
Vue3 项目集成 OnlyOffice 在线编辑 + 自定义插件开发(二):插入功能全实现
数据库·vue.js·mysql
用户527096487449016 小时前
前端登录菜单加载性能优化总结
前端
你觉得脆皮鸡好吃吗16 小时前
Check Anti-CSRF Token (AI)
前端·网络·网络协议·安全·csrf·网络安全学习