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>

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

相关推荐
百锦再3 分钟前
使用JavaScript获取和解析页面内容的完整指南
开发语言·前端·javascript·python·flask·fastapi
sakana6 分钟前
如何写一个自己的skill
前端·人工智能
wsdswzj10 分钟前
web前端基础知识
前端
一条小鲨鱼32 分钟前
所遇到的响应式问题
前端·vue.js
Ruihong33 分钟前
你的 Vue v-for,VuReact 会编译成什么样的 React 代码?
vue.js·react.js·面试
M ? A34 分钟前
你的 Vue 路由,VuReact 会编译成什么样的 React 路由?
前端·javascript·vue.js·经验分享·react.js·面试·vureact
L.Cheng36 分钟前
谷歌浏览器如何禁用自动更新_Chrome关闭后台升级程序
前端·chrome
donecoding42 分钟前
类型与语法的“直觉对齐”:TS 切入的 Go 语言初体验
前端·typescript·go
web守墓人43 分钟前
【linux】Mubuntu v1.0.7发布:支持codex cli完整运行
前端·codex
WYiQIU43 分钟前
宇树科技Web前端岗(AI方向),这不算泄题吧......
前端·vue.js·人工智能·笔记·科技·面试·职场和发展