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>

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

相关推荐
叁两10 分钟前
用opencode打造全自动公众号写作流水线,AI 代笔太香了!
前端·人工智能·agent
golang学习记15 分钟前
GitLens 十大神技:彻底改变你在 VS Code 中的 Git 工作流
前端·后端·visual studio code
SuperEugene16 分钟前
后台权限与菜单渲染:基于路由和后端返回的几种实现方式
前端·javascript·vue.js
兆子龙19 分钟前
WebSocket 入门:是什么、有什么用、脚本能帮你做什么
前端·架构
csdn飘逸飘逸19 分钟前
Autojs基础-全局函数与变量(globals)
javascript
是一碗螺丝粉23 分钟前
LangChain 链(Chains)完全指南:从线性流程到智能路由
前端·langchain·aigc
KKKK28 分钟前
手写Promise,从测试用例的角度理解
javascript
月弦笙音28 分钟前
【浏览器】这几点必须懂
前端
青青家的小灰灰29 分钟前
迈向全栈新时代:SSR/SSG 原理、Next.js 架构与 React Server Components (RSC) 实战
前端·javascript·react.js
SuperEugene29 分钟前
弹窗与抽屉组件封装:如何做一个全局可控的 Dialog 服务
前端·javascript·vue.js