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 支持高性能结构化日志记录，以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...
K8S认证|CKS题库+答案| 11. AppArmor
目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作： 1）、切换集群 2）、切换节点 3）、切换到 apparmor 的目录 4）、执行 apparmor 策略模块 5）、修改 pod 文件 6）、…...
Swift 协议扩展精进之路：解决 CoreData 托管实体子类的类型不匹配问题（下）
概述 在 Swift 开发语言中，各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过，在涉及到多个子类派生于基类进行多态模拟的场景下，…...
渗透实战PortSwigger靶场-XSS Lab 14：大多数标签和属性被阻止
<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet： https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...
全球首个30米分辨率湿地数据集(2000—2022)
数据简介 今天我们分享的数据是全球30米分辨率湿地数据集，包含8种湿地亚类，该数据以0.5X0.5的瓦片存储，我们整理了所有属于中国的瓦片名称与其对应省份，方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...
Java 加密常用的各种算法及其选择
在数字化时代，数据安全至关重要，Java 作为广泛应用的编程语言，提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景，有助于开发者在不同的业务需求中做出正确的选择。 一、对称加密算法…...
以光量子为例，详解量子获取方式
光量子技术获取量子比特可在室温下进行。该方式有望通过与名为硅光子学（silicon photonics）的光波导（optical waveguide）芯片制造技术和光纤等光通信技术相结合来实现量子计算机。量子力学中，光既是波又是粒子。光子本…...
HDFS分布式存储 zookeeper
hadoop介绍 狭义上hadoop是指apache的一款开源软件 用java语言实现开源框架，允许使用简单的变成模型跨计算机对大型集群进行分布式处理（1.海量的数据存储 2.海量数据的计算）Hadoop核心组件 hdfs（分布式文件存储系统）&a…...
Windows安装Miniconda
一、下载 https://www.anaconda.com/download/success 二、安装 三、配置镜像源 Anaconda/Miniconda pip 配置清华镜像源_anaconda配置清华源-CSDN博客 四、常用操作命令 Anaconda/Miniconda 基本操作命令_miniconda创建环境命令-CSDN博客...
多模态图像修复系统：基于深度学习的图片修复实现
多模态图像修复系统：基于深度学习的图片修复实现 1. 系统概述 本系统使用多模态大模型（Stable Diffusion Inpainting）实现图像修复功能，结合文本描述和图片输入，对指定区域进行内容修复。系统包含完整的数据处理、模型训练、推理部署流程。 import torch import numpy …...