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>

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

相关推荐
C语言魔术师12 分钟前
【小游戏篇】三子棋游戏
前端·算法·游戏
小周不摆烂18 分钟前
探索JavaScript前端开发:开启交互之门的神奇钥匙(二)
javascript
匹马夕阳1 小时前
Vue 3中导航守卫(Navigation Guard)结合Axios实现token认证机制
前端·javascript·vue.js
你熬夜了吗?1 小时前
日历热力图,月度数据可视化图表(日活跃图、格子图)vue组件
前端·vue.js·信息可视化
我想学LINUX2 小时前
【2024年华为OD机试】 (A卷,100分)- 微服务的集成测试(JavaScript&Java & Python&C/C++)
java·c语言·javascript·python·华为od·微服务·集成测试
screct_demo2 小时前
詳細講一下在RN(ReactNative)中,6個比較常用的組件以及詳細的用法
javascript·react native·react.js
桂月二二8 小时前
探索前端开发中的 Web Vitals —— 提升用户体验的关键技术
前端·ux
CodeClimb9 小时前
【华为OD-E卷 - 第k个排列 100分(python、java、c++、js、c)】
java·javascript·c++·python·华为od
沈梦研9 小时前
【Vscode】Vscode不能执行vue脚本的原因及解决方法
ide·vue.js·vscode
hunter2062069 小时前
ubuntu向一个pc主机通过web发送数据,pc端通过工具直接查看收到的数据
linux·前端·ubuntu