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

注释很详细,直接上代码

上一篇

新增内容

  1. 使用挂载完成的钩子函数
  2. 用focus使输入框获取焦点

源码

<!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>

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

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/822706.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

leetcode:739.每日温度/496.下一个更大元素

单调栈的应用&#xff1a; 求解当前元素右边比该元素大的第一个元素&#xff08;左右、大小都可以&#xff09;。 单调栈的构成&#xff1a; 单调栈里存储数组的下标&#xff1b; 单调栈里的元素递增&#xff0c;求解当前元素右边比该元素大的第一个元素&#xff1b;元素递…

(十一)C++自制植物大战僵尸游戏客户端更新实现

植物大战僵尸游戏开发教程专栏地址http://t.csdnimg.cn/cFP3z 更新检查 游戏启动后会下载服务器中的版本号然后与本地版本号进行对比&#xff0c;如果本地版本号小于服务器版本号就会弹出更新提示。让用户选择是否更新客户端。 在弹出的更新对话框中有显示最新版本更新的内容…

2024五一杯数学建模A题思路分析

文章目录 1 赛题思路2 比赛日期和时间3 组织机构4 建模常见问题类型4.1 分类问题4.2 优化问题4.3 预测问题4.4 评价问题 5 建模资料 1 赛题思路 (赛题出来以后第一时间在CSDN分享) https://blog.csdn.net/dc_sinor?typeblog 2 比赛日期和时间 报名截止时间&#xff1a;2024…

光学雨量计雨量传感器的工作原理与实时数据采集

光学雨量计雨量传感器的工作原理与实时数据采集 河北稳控科技光学雨量计是一种常用的雨量传感器&#xff0c;其工作原理基于光学原理和实时数据采集技术。它的主要作用是测量雨水的大小和强度&#xff0c;为气象、农业、水文等领域提供重要的数据支持。 光学雨量计的工作原理是…

单片机之ESP8266模块

目录 ESP8266简介 前言 ESP8266的工作模式 ESP8266引脚说明 ESP8266测试 步骤 单片机与esp8266交互 前言 收到数据的格式 AP模式 服务器模式 外部执行命令 代码内执行命令 代码部分 客户端模式 外部执行命令 内部执行命令 代码部分 STA模式 服务器模式 外…

10个常用的损失函数及Python代码实现

本文深入理解并详细介绍了10个常用的损失函数及Python代码实现。 什么是损失函数&#xff1f; 损失函数是一种衡量模型与数据吻合程度的算法。损失函数测量实际测量值和预测值之间差距的一种方式。损失函数的值越高预测就越错误&#xff0c;损失函数值越低则预测越接近真实值…

LUCF-Net:轻量级U形级联 用于医学图像分割的融合网络

LUCF-Net&#xff1a;轻量级U形级联 用于医学图像分割的融合网络 摘要IntroductionRelated WorkProposed MethodLocal-Global Feature ExtractionEncoder and DecoderFeature FusionLoss Function LUCF-Net: Lightweight U-shaped Cascade Fusion Network for Medical Image Se…

Android zxing库实现扫码识别

第一步 加库zxing库 //导入二维码识别库ZXingimplementation("com.journeyapps:zxing-android-embedded:4.2.0") 第二部获取摄像机权限 <uses-permission android:name="android.permission.CAMERA" /><uses-permission android:name="andro…

【日常记录】【CSS】利用动画延迟实现复杂动画

文章目录 1、介绍2、原理3、代码4、参考链接 1、介绍 对于这个效果而言&#xff0c;最先想到的就是 监听滑块的input事件来做一些操作 ,但是会发现&#xff0c;对于某一个节点的时候&#xff0c;这个样式操作起来比较麻烦 只看这个代码的话&#xff0c;发现他用的是动画&#x…

超详细!Python中 pip 常用命令

相信对于大多数熟悉Python的人来说&#xff0c;一定都听说并且使用过pip这个工具&#xff0c;但是对它的了解可能还不一定是非常的透彻&#xff0c;今天小编就来为大家介绍10个使用pip的小技巧&#xff0c;相信对大家以后管理和使用Python当中的标准库会有帮助。 安装 当然在…

【算法一则】编辑距离 【动态规划】

题目 给你两个单词 word1 和 word2&#xff0c; 请返回将 word1 转换成 word2 所使用的最少操作数 。 你可以对一个单词进行如下三种操作&#xff1a; 插入一个字符 删除一个字符 替换一个字符 示例 1&#xff1a;输入&#xff1a;word1 "horse", word2 "…

16 - Debian如何配置vsftpd(1)实现匿名上传下载

作者&#xff1a;网络傅老师 特别提示&#xff1a;未经作者允许&#xff0c;不得转载任何内容。违者必究&#xff01; Debian如何配置vsftpd&#xff08;1&#xff09;实现匿名上传下载 《傅老师Debian小知识库系列之16》——原创 前言 傅老师Debian小知识库特点&#xff1a…

微信小程序获取蓝牙信标

/*** 搜索设备界面*/ import Dialog from vant/weapp/dialog/dialog; Page({data: {list: []},onPullDownRefresh: function () {wx.request({url: https://wwz.jingyi.icu/app/Explain/index,data: {scenic_id: 3},method: POST,success: (res) > {console.log(res);let th…

重磅!国内首个基于单张图片的3D人脸重建课程

3D人脸重建在计算机视觉和图形学中一直是一个经典且热门的研究方向&#xff0c;在游戏、影视、娱乐等众多行业也有着广泛的应用。早期人脸重建主要基于多视角相机或深度相机&#xff0c;随着深度学习的兴起&#xff0c;基于单张图片的人脸重建成为可能&#xff0c;且重建的精度…

数学建模---Matlab学习笔记

1.经典例题 &#xff08;1&#xff09;判断质数 给定一个大于100的数字&#xff0c;判断是否为质数 先设定布尔值是true,也就是假设这个数字是质数&#xff0c;利用for循环进行遍历直到n-1&#xff0c;如果被任意的数字整除&#xff0c;就说明不是质数&#xff0c;我们就把布…

2024 年排名前 5 的 CSS 框架

文章目录 1、Bootstrap2、Tailwind CSS3、Foundation4、Bulma5、UIKit 1、Bootstrap Bootstrap框架是由Twitter的设计师Mark Otto和Jacob Thornton合作开发的&#xff0c;于2011年8月在GitHub上发布。它是目前最受欢迎的前端框架之一&#xff0c;被广泛应用于各种Web项目中。Bo…

最新Latex2024安装教程 超简单

Latex是一款常用的论文写作工具&#xff0c;今天小菜介绍Latex的安装配置过程。 1. 来到官网下载镜像文件 https://www.tug.org/texlive/ 按步骤点击&#xff1a; 就会进入一个最近的镜像网站&#xff0c;选择textlive2024.iso即可 下载完成之后解压&#xff0c;安装路径…

Linux02(项目部署,手动和自动部署,JDK版本问题,安装软件,安装软件,安装JDK,Tomcat,MySQL,Irzsz)

目录 一、安装软件 1. 安装准备工作 1 Linux里的软件安装方式 2 上传软件到Linux 3 拍照虚拟机快照 2. 安装JDK 1 卸载自带jdk 2 解压JDK 3 配置环境变量 4 测试JDK 3. 安装Tomcat 1 解压Tomcat 2 修改防火墙设置 3 测试Tomcat 启动Tomcat 访问Tomcat 查看Tom…

git 小记

一、 github新建仓库 git clone 。。。。。。。。。。。 &#xff08;增删查补&#xff0c;修改&#xff09; git add . git commit -m "修改” git push (git push main) 二、branch 分支 branch并不难理解&#xff0c;你只要想像将代码拷贝到不同目录…

MongoDB的CURD(增删改查操作)

读者大大们好呀&#xff01;&#xff01;!☀️☀️☀️ &#x1f525; 欢迎来到我的博客 &#x1f440;期待大大的关注哦❗️❗️❗️ &#x1f680;欢迎收看我的主页文章➡️寻至善的主页 ✈️如果喜欢这篇文章的话 &#x1f64f;大大们可以动动发财的小手&#x1f449;&#…