生命周期钩子小案例

文章目录

  • 一、在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,一经查实,立即删除!

相关文章

ES最新提案(下一代ES)

目录 do表达式throw表达式函数的部分执行管道运算符数值分隔符Math.signbit()双冒号运算符Realm API#!命令import.metado表达式 Do 表达式是一种提案,旨在使块级作用域(如 {…} 内部)能够返回一个值。在现有的JavaScript中,块级作用域通常不返回任何值。提案中的 do 关键字…

程序员高效工作(摸鱼)的 10 个方法

高效工作&#xff0c;多些时间摸鱼且有益打工人心态的10个方法~ 早上不要开会 &#x1f4c5; 每个人一天是 24 小时&#xff0c;时间是均等的&#xff0c;但是时间的价值却不是均等的&#xff0c;早上 1 小时的价值是晚上的 4 倍。为什么这么说&#xff1f; 因为早晨是大脑的黄…

词法分析器的设计与实现--编译原理操作步骤,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…

flink实战--⼤状态作业调优实践指南-Flink SQL 作业篇

简介 作为一种特定领域语言,SQL 的设计初衷是隐藏底层数据处理的复杂性,让用户通过声明式语言来进行数据操作。而Flink SQL 由于其架构的特殊性,在实现层面通常需引入状态后端 配合 checkpoint 来保证计算结果的最终一致性。目前 Flink SQL 生成状态算子的策略由优化器根据配…

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;分别放到不同的文件里。…

Python笔记 - generator方法

深入理解Python生成器&#xff08;Generators&#xff09; 在Python编程中&#xff0c;生成器&#xff08;Generators&#xff09;是一个非常强大且灵活的工具。它们提供了一种创建迭代器的简便方法&#xff0c;使得我们能够高效地处理大量数据。本文将深入探讨Python生成器&a…

【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…

chargpt: 用纯c 写一9*9数独程序

Chatgpt 真的可以写出完美的代码&#xff0c;学计算机编程没有前途。还有2天就要高考了&#xff0c;大家加油考出好成绩。但不要报编程专业了。 下面是一个完整的9x9数独求解程序&#xff0c;使用C语言实现。这个程序包括读取数独棋盘、解决数独问题并打印解决方案的功能。数独…

一篇最容易入门和经典Python库,看这篇就够了

1.NumPy 简介:用于处理大型多维数组和矩阵的库,以及一系列高级数学函数. import numpy as np a np.array([1, 2, 3, 4]) b np.array([[1, 3], [3, 4]]) print(np.dot(a, b))2.Pandas 简介:用于数据分析和操作的库,提供了主要数据结构为数据框&#xff08;DataFrame&#xf…

Python报错:AttributeError: <unknown>.DeliveryStore 获取Outlook邮箱时报错

目录 报错提示&#xff1a; 现象描述 代码解释&#xff1a; 原因分析&#xff1a; 报错提示&#xff1a; in get_outlook_email return account.DeliveryStore.DisplayName line 106, in <module> email_address get_outlook_email() 现象描述 获取outlook本地邮箱…

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

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