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，前言 之前学习并且实操了一些算法框架用来探索相关方向的可能性，但是总不了解相关的步骤。因为一步一步按照别人给出的步骤去操作，解决一些操作时出现的问题，基本可以达到目的。但是这个也基本限制了在那个框架而已。对于算法还…...
深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录
ASP.NET Core 是一个跨平台的开源框架，用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录，以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...
（十）学生端搭建
本次旨在将之前的已完成的部分功能进行拼装到学生端，同时完善学生端的构建。本次工作主要包括： 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...
PHP和Node.js哪个更爽?
先说结论，rust完胜。 php：laravel，swoole，webman，最开始在苏宁的时候写了几年php，当时觉得php真的是世界上最好的语言，因为当初活在舒适圈里，不愿意跳出来，就好比当初活在…...
python/java环境配置
环境变量放一起 python： 1.首先下载Python Python下载地址：Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个，然后自定义，全选 可以把前4个选上 3.环境配置 1）搜高级系统设置 2…...
聊聊 Pulsar：Producer 源码解析
一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台，以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中，Producer（生产者） 是连接客户端应用与消息队列的第一步。生产者…...
Python实现prophet 理论及参数优化
文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候，写过一篇简单实现，后期随着对该模型的深入研究，本次记录涉及到prophet 的公式以及参数调优，从公式可以更直观…...
MySQL 8.0 OCP 英文题库解析（十三）
Oracle 为庆祝 MySQL 30 周年，截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始，将英文题库免费公布出来，并进行解析，帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...
Caliper 配置文件解析：config.yaml
Caliper 是一个区块链性能基准测试工具，用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构，并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件，主要包含以下几个部…...
Swagger和OpenApi的前世今生
Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章，二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑： 🔄 一、起源与初创期：Swagger的诞生（2010-2014） 核心…...
A2A JS SDK 完整教程：快速入门指南
目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库ÿ…...