vue 生命周期钩子函数 mounted()实例
在挂载后操作dom获取焦点。
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>示例-获取焦点</title><!-- 初始化样式 --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset.css@2.0.2/reset.min.css"><!-- 核心样式 --><style>html,body {height: 100%;}.search-container {position: absolute;top: 30%;left: 50%;transform: translate(-50%, -50%);text-align: center;}.search-container .search-box {display: flex;}.search-container img {margin-bottom: 30px;}.search-container .search-box input {width: 512px;height: 16px;padding: 12px 16px;font-size: 16px;margin: 0;vertical-align: top;outline: 0;box-shadow: none;border-radius: 10px 0 0 10px;border: 2px solid #c4c7ce;background: #fff;color: #222;overflow: hidden;box-sizing: content-box;-webkit-tap-highlight-color: transparent;}.search-container .search-box button {cursor: pointer;width: 112px;height: 44px;line-height: 41px;line-height: 42px;background-color: #ad2a27;border-radius: 0 10px 10px 0;font-size: 17px;box-shadow: none;font-weight: 400;border: 0;outline: 0;letter-spacing: normal;color: white;}body {background: no-repeat center /cover;background-color: #edf0f5;}</style>
</head><body>
<div class="container" id="app"><div class="search-container"><div class="search-box"><input type="text" v-model="words" id="inp"><button>搜索一下</button></div></div>
</div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {words: ''},mounted() {document.querySelector('#inp').focus()},})
</script></body></html>
相关文章：
vue 生命周期钩子函数 mounted()实例
在挂载后操作dom获取焦点。 <!DOCTYPE html> <html lang"zh-CN"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"w…...
数据分享 I 地级市人口和土地使用面积基本情况
数据地址： 地级市人口和土地使用面积基本情况https://www.xcitybox.com/datamarketview/#/Productpage?id394 基本信息. 数据名称: 地级市人口和土地使用面积基本情况 数据格式: ShpExcel 数据时间: 2021年 数据几何类型: 面 数据坐标系: WGS84坐标系 数据…...
被邀请为期刊审稿时，如何做一个合格的审稿人？官方版本教程来喽
审稿是学术研究中非常重要的环节，它可以确保研究的科学性和严谨性。审稿人的任务是检查文章是否符合学术规范，是否具有创新性，是否具有科学价值，以及是否符合期刊的定位和风格。因此，审稿人需要具有扎实的学术背景和丰…...
数据飞轮拆解车企数据驱动三板斧：数据分析、市场画像、A/B 实验
更多技术交流、求职机会，欢迎关注字节跳动数据平台微信公众号，回复【1】进入官方交流群 近日，火山引擎数智平台（VeDI）2023 数据飞轮汽车行业研讨会在上海举办，活动聚焦汽车行业数字化转型痛点，从…...
基于PyQt5和OpenCV库的简单的文档对齐扫描应用程序
计算机视觉-作业1 作业要求简介说明 安装运行功能使用待完善代码相关 作业要求 拍一张A4纸文稿的图片，利用角点检测、边缘检测等，再通过投影变换完成对文档的对齐扫描 简介 使用python语言，基于PyQt5和OpenCV库的简单的文档对齐扫描应用程…...
【3D 图像分割】基于 Pytorch 的 VNet 3D 图像分割2（基础数据流篇）
构建pytorch训练模型读取的数据，是有模版可以参考的，是有套路的，这点相信使用过的人都知道。我也会给出一个套路的模版，方便学习和查询。 同时，也可以先去参考学习之前的一篇较为简单的3D分类任务的数据构建方法，链接在这里：【3D图像分类】基于Pytorch的3D立体图像分类…...
HDR图像处理软件 Photomatix Pro mac中文版新增功能
Photomatix Pro mac是一款专业的HDR合成软件，可以将不同曝光的多张照片合成为一张照片，而保留更多的细节。并且合成时可以帮助去除照片中的鬼影。Photomatix Pro提供两种类型的过程来增加动态范围，一个过程称为HDR色调映射，另一个…...
【Kotlin精简】第5章 简析DSL
1 DSL是什么？ Kotlin 是一门对 DSL 友好的语言，它的许多语法特性有助于 DSL 的打造，提升特定场景下代码的可读性和安全性。本文将带你了解 Kotlin DSL 的一般实现步骤，以及如何通过 DslMarker ， Context Receivers 等…...
2021年06月 Python（一级）真题解析#中国电子学会#全国青少年软件编程等级考试
Python编程（1~6级）全部真题・点这里 一、单选题（共25题，每题2分，共50分） 第1题 下列程序运行的结果是？ s hello print(sworld)A: sworld B: helloworld C: hello D: world 答案：…...
MySQL执行计划分析
执行计划中的常见的列的解释： type system/const ：用户主键索引或者唯一索引查询时，只能匹配 1 条数据。一般可以对 sql 查询语句优化成一个常量，那么 type 一般就是 system 或者 const，system 是 const 的一个特例&…...
【数据结构与算法】Snowflake雪花算法Java实现
Snowflake产生的ID由 64 bit 的二进制数字组成，被分成了4个部分，每一部分存储的数据都有特定的含义： 第 0 位： 符号位（标识正负），始终为 0；第 1~41 位 ：一共 41 位&…...
重要功能更新：妙手正式接入SHEIN供货模式（OBM）店铺，赋能卖家把握出海新机遇！
继接入SHEIN平台模式店铺之后，妙手ERP积极响应卖家需求，正式接入SHEIN供货模式（OBM）店铺，并支持产品采集、批量刊登、产品管理等功能，帮助跨境卖家快速上品、高效运营，把握出海新机遇。 SHEIN供…...
和鲸ModelWhale与中科可控X系列异构加速服务器完成适配认证，搭载海光芯片，构筑AI算力底座
AIGC 时代，算力作为新型生产力，是国家和企业构建竞争优势的关键。而随着传统计算方式无法满足新时代激增的算力需求，计算场景的多元化和计算应用的复杂化推动了 CPUGPU 异构平台的加速组建。在此全球激烈角逐的大趋势下，我国信创产…...
Vue单文件组件
一、.vue文件 我们使用Vue的单文件组件的时候，一个.vue文件就是一个组件。 例如我们创建一个School组件： 二、组件的结构 我们编写网页代码的时候有HTML结构、CSS样式、JS交互。 组件里也是同样存在这三种结构的： <template><d…...
轻松理解 Transformers（1）：Input部分
编者按：Transformers 是人工智能领域近年来最引人瞩目的技术之一，它为语言生成模型的发展做出了巨大的贡献。随着大语言模型（LLM）的兴起，公众对其背后的技术原理也越来越感兴趣。但是由于Transformers本身具有一定的复…...
PHP MySQL 交互 笔记/练习
PHP 与 MySQL 交互 交互函数 函数名作用mysqli_connect()与MySQL 数据库建立连接。mysqli_close()关闭与MYSQL 数据库建立的连接。mysqli_connect_errno()与MySQL 数据库建立连接时，发生错误时的错误编号。mysqli_connect_error()与MySQL 数据库建立连接时&#x…...
领域驱动设计：基于DDD的微服务设计实例
文章目录 项目基本信息战略设计战术设计后续的工作 用一个项目来了解 DDD 的战略设计和战术设计，走一遍从领域建模到微服务设计的全过程，一起掌握 DDD 的主要设计流程和关键 点。 项目基本信息 项目的目标是实现在线请假和考勤管理。功能描述如下&…...
【PB续命02】Oracle中加密及编码等
Oracle中实现Md5/Base64/AesBase64/UrlEncode等加密编码的使用备忘，参考其它人的贴子，Oracle 11g 亲测有效。 1. Oracle中实现Md5加密 SELECT lower(MD5(白龙马5217)) FROM dual; --返回结果 72853926982028ab8219921ad2918b8f --或 select utl_raw.…...
STM32-LTC6804方案成熟BMS方案
方案下载链接！！https://mp.weixin.qq.com/s?__bizMzU2OTc4ODA4OA&mid2247549092&idx1&snc73855c4e3d5afddd8608d8528864f95&chksmfcfb1373cb8c9a65a4bd1f545a1a587af882f209e7ccbb8944f4d2514d241ca1d7fcc4615e10&token539106225&a…...
一步一步认知机器学习
1，前言 之前学习并且实操了一些算法框架用来探索相关方向的可能性，但是总不了解相关的步骤。因为一步一步按照别人给出的步骤去操作，解决一些操作时出现的问题，基本可以达到目的。但是这个也基本限制了在那个框架而已。对于算法还…...
vscode里如何用git
打开vs终端执行如下： 1 初始化 Git 仓库（如果尚未初始化） git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...
ESP32 I2S音频总线学习笔记（四）： INMP441采集音频并实时播放
简介 前面两期文章我们介绍了I2S的读取和写入，一个是通过INMP441麦克风模块采集音频，一个是通过PCM5102A模块播放音频，那如果我们将两者结合起来，将麦克风采集到的音频通过PCM5102A播放，是不是就可以做一个扩音器了呢…...
ServerTrust 并非唯一
NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...
成都鼎讯硬核科技！雷达目标与干扰模拟器，以卓越性能制胜电磁频谱战
在现代战争中，电磁频谱已成为继陆、海、空、天之后的 “第五维战场”，雷达作为电磁频谱领域的关键装备，其干扰与抗干扰能力的较量，直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器，凭借数字射…...
是否存在路径（FIFOBB算法）
题目描述 一个具有 n 个顶点e条边的无向图，该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序，确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数，分别表示n 和 e 的值（1…...
pikachu靶场通关笔记19 SQL注入02-字符型注入(GET)
目录 一、SQL注入 二、字符型SQL注入 三、字符型注入与数字型注入 四、源码分析 五、渗透实战 1、渗透准备 2、SQL注入探测 （1）输入单引号 （2）万能注入语句 3、获取回显列orderby 4、获取数据库名database 5、获取表名…...
学习一下用鸿蒙DevEco Studio HarmonyOS5实现百度地图
在鸿蒙（HarmonyOS5）中集成百度地图，可以通过以下步骤和技术方案实现。结合鸿蒙的分布式能力和百度地图的API，可以构建跨设备的定位、导航和地图展示功能。 1. 鸿蒙环境准备 开发工具：下载安装 De…...
沙箱虚拟化技术虚拟机容器之间的关系详解
问题 沙箱、虚拟化、容器三者分开一一介绍的话我知道他们各自都是什么东西，但是如果把三者放在一起，它们之间到底什么关系？又有什么联系呢？我不是很明白！！！ 就比如说： 沙箱&#…...
EasyRTC音视频实时通话功能在WebRTC与智能硬件整合中的应用与优势
一、WebRTC与智能硬件整合趋势 随着物联网和实时通信需求的爆发式增长，WebRTC作为开源实时通信技术，为浏览器与移动应用提供免插件的音视频通信能力，在智能硬件领域的融合应用已成必然趋势。智能硬件不再局限于单一功能，对实时…...
VSCode 使用CMake 构建 Qt 5 窗口程序
首先，目录结构如下图： 运行效果： cmake -B build cmake --build build 运行： windeployqt.exe F:\testQt5\build\Debug\app.exe main.cpp #include "mainwindow.h"#include <QAppli...