生命周期钩子小案例

文章目录

  • 一、在created中发送数据
  • 二、在mounted中获取焦点

一、在created中发送数据

<body><div id="app"><ul><li v-for="(item, index) in list" :key="item.id" class="news"><div class="left"><div class="title">{{ item.title }}</div><div class="info"><span>{{ item.source }}</span><span>{{ item.time }}</span></div></div><div class="right"><img :src="item.img" alt=""></div></li></ul></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>// 接口地址:http://hmajax.itheima.net/api/news// 请求方式:getconst app = new Vue({el: '#app',data: {list: []},async created() {// 1. 发送请求获取数据const res = await axios.get('http://hmajax.itheima.net/api/news')// 2. 更新到 list 中,用于页面渲染 v-forthis.list = res.data.data}})</script>
</body>

二、在mounted中获取焦点

这里注意,获取到的输入框和我们在html里面写的输入框是不一样的。这是因为在模版阶段带有v-model,而打印出来的是已经被Vue解析了的

image-20240130172633085

<body><div class="container" id="app"><div class="search-container"><img src="https://www.itheima.com/images/logo.png" alt=""><div class="search-box"><!-- 在这里直接写autofocus没有用,在Vue当中,整个DOM都属于模版部分,底下写了之后,会根据底下的数据动态渲染。所以这一部分的数据是会被替换的,就算在这里写了autofocus也没用,一旦它被替换之后,它的自动获取焦点也就没了--><input autofocus 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: ''},// 核心思路:// 1. 等input框渲染出来 mounted 钩子// 2. 让input框获取焦点 inp.focus()mounted() {// 原生DOM的方法document.querySelector('#inp').focus()}})</script>
</body>

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

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

相关文章

词法分析器的设计与实现--编译原理操作步骤,1、你的算法工作流程图; 2、你的函数流程图;3,具体代码

实验原理&#xff1a; 词法分析是编译程序进行编译时第一个要进行的任务&#xff0c;主要是对源程序进行编译预处理之后&#xff0c;对整个源程序进行分解&#xff0c;分解成一个个单词&#xff0c;这些单词有且只有五类&#xff0c;分别时标识符、关键字&#xff08;保留字&a…

什么牌子的洗地机好?高端旗舰洗地机,清洁力强的洗地机品牌

科技水平的不断进步&#xff0c;人们对生活环境的要求日益提高&#xff0c;洗地机作为一种高效&#xff0c;便捷的清洁设备&#xff0c;在家务清洁中&#xff0c;越来越受重视&#xff0c;洗地机不仅在吸尘、拖地和深度清洁等方面表现出色&#xff0c;可以帮助用户轻松应对各种…

BLE芯片DA145XX系列:配置SDK支持多连接

Dialog的DA145XX系列BLE芯片可以配置允许多连接&#xff0c;需要修改SDK&#xff0c;下面主要说明如何实现多连接配置。 1、新增宏定义&#xff1a;__EXCLUDE_ROM_APP_TASK__ 用于取消ROM里关于APP部分函数的调用&#xff0c;改为使用自定义的函数 2、部分宏定义&#xff08;DA…

大量单号中如何分析出异常单号

什么情况下单号算异常单号呢&#xff0c;首先根据单号物流信息过程轨迹判断哦&#xff0c;比如某个单号已显示快递公司已揽收了&#xff0c;超过24或36、48甚至更长时间也没有看到走件信息哦&#xff0c;一般这类单号也叫揽收后无走信息&#xff0c;这类单号就只能一条揽收信息…

【官方文档解读】torch.jit.script 的使用,并附上官方文档中的示例代码

由 OpenMMLab 的部署教程 所述&#xff0c;对于模型中存在有控制条件的&#xff08;如 if&#xff0c;for 等&#xff09;&#xff0c;需要用 torch.jit.script 而非采样默认的 torch.jit.trace 方法。本文则详细介绍了下官方文档中对 torch.jit.script 的解释和示例代码。 to…

EcoVadis审核方法是什么符合EcoVadis规范的文件清单

EcoVadis审核方法是参照全球契约社会责任国际标准进行&#xff0c;包括环境、劳工及人权、商业道德、可持续采购等四大主题又分:能源消耗及温室气体排放、水环境管理、生态环境与物种多样性保护、局部环境污染、原材料及化学品使用(含废弃物)、产品使用、产品生命末期、消费者健…

C++基础编程100题-003 OpenJudge-1.1-05 输出保留12位小数的浮点数

更多资源请关注纽扣编程微信公众号 http://noi.openjudge.cn/ch0101/05/ 描述 读入一个双精度浮点数&#xff0c;保留12位小数&#xff0c;输出这个浮点数。 输入 只有一行&#xff0c;一个双精度浮点数。 输出 也只有一行&#xff0c;保留12位小数的浮点数。 样例输入…

scanfmalloc

之前知道scanf输入过多时会触发malloc&#xff0c;这次进行系统地记录。 1.setbuf(stdin,0) 大部分程序都会有这样地初始化&#xff0c;这使得一开始heap中不会有为scanf预留的缓冲区。 但是预留的缓冲区终是有限的&#xff0c;例如输入0x400以上时&#xff0c;scanf就会触发…

python的模块

什么是模块&#xff08;Module&#xff09; 在计算机程序的开发过程中&#xff0c;随着程序代码越写越多&#xff0c;写在一个文件里的代码就会越来越长&#xff0c;越来越不容易维护。 为了让代码方便维护&#xff0c;我们将代码进行分类&#xff0c;分别放到不同的文件里。…

【OpenHarmony】ArkTS 语法基础 ④ ( ArkTS UI 渲染控制 | if else 条件渲染 | ForEach 循环渲染 )

文章目录 一、ArkTS UI 渲染控制1、if else 条件渲染2、ForEach 循环渲染 二、完整代码示例1、自定义组件代码2、主界面代码3、执行结果 参考文档 : <HarmonyOS第一课>ArkTS开发语言介绍 一、ArkTS UI 渲染控制 1、if else 条件渲染 在 Component 自定义组件 中的 build …

⌈ 传知代码 ⌋ 预测人物性别年龄

&#x1f49b;前情提要&#x1f49b; 本文是传知代码平台中的相关前沿知识与技术的分享~ 接下来我们即将进入一个全新的空间&#xff0c;对技术有一个全新的视角~ 本文所涉及所有资源均在传知代码平台可获取 以下的内容一定会让你对AI 赋能时代有一个颠覆性的认识哦&#x…

Javascript 数据类型详解:7种基本类型、3种引用类型

还是大剑师兰特&#xff1a;曾是美国某知名大学计算机专业研究生&#xff0c;现为航空航海领域高级前端工程师&#xff1b;CSDN知名博主&#xff0c;GIS领域优质创作者&#xff0c;深耕openlayers、leaflet、mapbox、cesium&#xff0c;canvas&#xff0c;webgl&#xff0c;ech…

【CesiumJS入门】(12)Vite+Vue3+Cesium 简易安装与配置

步骤 vite 创建项目&#xff1a;yarn create vite安装 Cesium&#xff1a;yarn add cesium安装 vite-plugin-static-copy&#xff1a;yarn add -D vite-plugin-static-copy 配置 vite.config.js &#xff1a; import { defineConfig } from "vite"; import vue fro…

制作自己的 ButterKnife(使用 AutoService 和 APT 注解处理器在编译期生成 Java 代码)

ButterKnife 开发过 Android 的肯定都知道曾经有这么一个库&#xff0c;它能够让你不用再写 findViewById 这样的代码&#xff0c;这就是大名鼎鼎的 ButterKnife&#xff08;https://github.com/JakeWharton/butterknife&#xff09;。虽然现在这个库已经不再维护&#xff0c;…

LabVIEW实现汽车逆变器功能测试系统

​介绍了如何利用LabVIEW开发汽车逆变器&#xff08;包括功率板和控制板&#xff09;的自动测试设备&#xff08;ATE&#xff09;&#xff0c;实现对额定800V电压、300A电流的逆变器进行功能测试。系统通过CAN2.0通讯协议&#xff0c;实现电机控制、温度传感器监测、电压校验和…

Java程序策——Java连接数据库保姆级教程(超详细步骤)

【Java程序策】——连接数据库 目录 ​编辑 一&#xff1a;在数据库中建立一个表&#xff08;student表&#xff09; 1.1&#xff1a;进入mysql 1.2&#xff1a;建立一个“数据库成员” 1.3&#xff1a;建立一个表&#xff08;student表&#xff09; 1.4&#xff1a;给表…

关于 spring boot 的目录详解和配置文件

目录 配置文件 spring boot 的配置文件有两种格式&#xff0c;分别是 properties 和 yml&#xff08;yaml&#xff09;。这两种格式的配置文件是可以同时存在的&#xff0c;此时会以 properties 的文件为主&#xff0c;但一般都是使用同一种格式的。 格式 properties 语法格…

36. 【Java教程】输入输出流

本小节将会介绍基本输入输出的 Java 标准类&#xff0c;通过本小节的学习&#xff0c;你将了解到什么是输入和输入&#xff0c;什么是流&#xff1b;输入输出流的应用场景&#xff0c;File类的使用&#xff0c;什么是文件&#xff0c;Java 提供的输入输出流相关 API 等内容。 1…

eNSP学习——OSPF的DR与BDR

目录 相关命令 原理概述 实验内容 实验目的 实验拓扑 实验编址 实验步骤 1、基本配置 2、搭建基本的OSPF网络 3、查看默认情况下的DR/BDR状态 4、根据现网需求影响DR/BDR选举 需要eNSP各种配置命令的点击链接自取&#xff1a;华为&#xff45;NSP各种设备配置命令大…

小白级教程—安装Ubuntu 20.04 LTS服务器

下载 本教程将使用20.04版进行教学 由于官方速度可能有点慢&#xff0c;可以下方的使用清华镜像下载 https://mirrors.tuna.tsinghua.edu.cn/ubuntu-releases/ 点击20.24版本 选择 ubuntu-20.04.6-live-server-amd64.iso 新建虚拟机 下载好后 我们使用 VMware 打开它 这里选…