VUE之旅—day2

文章目录

  • Vue生命周期和生命周期的四个阶段
        • created应用—新闻列表渲染
        • mounted应用—进入页面搜索框就获得焦点
        • 账单统计(Echarts可视化图表渲染)

Vue生命周期和生命周期的四个阶段

思考:

什么时候可以发送初始化渲染请求?(越早越好)

什么时候可以开始操作dom?(至少dom得渲染出来)

Vue生命周期: 一个Vue实例从创建到销毁的整个过程

生命周期四个阶段: ①创建②挂载③更新④销毁

在这里插入图片描述

在这里插入图片描述

Vue生命周期函数(钩子函数)

Vue生命周期过程中,会自动运行一些函数,被称为【生命周期钩子】—>让开发者可以在【特定阶段】运行自己的代码。

在这里插入图片描述

代码说明

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>生命周期的四个阶段</title>
</head><body><div id="app"><h1>{{title}}</h1><button @click="sub">-</button><span>{{count}}</span><button @click="add">+</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {count: 100,title: '计数器'},// 1.创建阶段(准备数据)beforeCreate() {console.log('beforeCreate 响应式数据准备好之前', this.count);//undefined},created() {// created,这一阶段开始,就能发送初始化渲染请求console.log('Created 响应式数据准备好之后', this.count);// 100},// 2.挂载阶段(渲染模板)beforeMount() {console.log('beforeMount 模板渲染之前', document.querySelector('h1').innerHTML);// {{title}}},mounted() {// created,这一阶段开始,就能操作dom了console.log('mounted 模板渲染之后', document.querySelector('h1').innerHTML);// 计数器},// 3.更新阶段(修改数据 → 更新视图)beforeUpdate() {console.log('beforeUpdate 数据修改了,视图还没更新', document.querySelector('span').innerHTML);},updated() {console.log('Updated 数据修改了,视图已经更新', document.querySelector('span').innerHTML);},//4.卸载阶段//Vue提供了一个语法 Vue对象名.$destroy()  用来查看卸载状态beforeDestroy() {console.log('beforeDestory 卸载前');console.log('清除掉一些Vue以外的资源占用,定时器,延时器...');},destroyed() {console.log('destroyed 卸载后');},methods: {add() {this.count++},sub() {this.count--}}})</script>
</body></html>
created应用—新闻列表渲染
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>新闻列表渲染</title><style>#app {width: 500px;margin: 0 auto;}#app ul {width: 100%;margin: 0;padding: 0;list-style: none;}#app ul li.news {width: 100%;height: 120px;display: flex;background-color: rgb(252, 252, 252);margin: 20px 0;border: 1px solid #eee;border-left: none;border-right: none;}#app ul li.news .left {width: 70%;height: 100%;}#app ul li.news .left .title {width: 90%;height: 70%;font-size: 18px;font-weight: bold;margin: 5px 0;color: #292929;}#app ul li.news .left span {font-size: 14px;color: #454545;margin-right: 20px;}#app ul li.news .right {width: 30%;height: 100%;}#app ul li.news .right img {width: 100%;height: 100%;}</style>
</head><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/axios/dist/axios.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>// 接口地址:http://hmajax.itheima.net/api/news// 请求方式 get const app = new Vue({el: '#app',data: {list: []},async created() {// 1.发送请求,获取数据const res = await axios.get('http://hmajax.itheima.net/api/news')console.log(res);//查看获取到的数据// 2.将数据更新给data中的listthis.list = res.data.data}})</script>
</body></html>
mounted应用—进入页面搜索框就获得焦点
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>搜索框一进入就获得焦点</title><style>.container {width: 600px;height: auto;margin: 0 auto;}.container .seacher-container {width: 100%;height: 150px;text-align: center;background-color: aliceblue;}.container .seacher-container .search-box {width: 80%;height: 35px;margin: 20px auto;border: 1px solid #8b8b8b;display: flex;border-radius: 5px;justify-content: flex-end;align-items: center;background-color: #ffffff;border-right: none;}.container .seacher-container .search-box input {width: 78%;height: 90%;border: none;outline: none;background-color: #ffffff;}.container .seacher-container .search-box button {width: 20%;height: 106%;border: none;outline: none;background-color: #ea2704;color: #f5f5f5;border-radius: 5px;border-top-left-radius: 0;border-bottom-left-radius: 0;cursor: pointer;}</style>
</head><body><div class="container" id="app"><div class="seacher-container"><img src="http://www.itheima.com/images/logo.png" alt=""><div class="search-box"><input type="text" v-model="words" id="inp" autocomplete="off"><button>搜索一下</button></div></div></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {words: ''},// 核心思路:// 1.等输入框渲染出来// 2.让输入框获取焦点mounted() {document.querySelector('#inp').focus()}})</script>
</body></html>
账单统计(Echarts可视化图表渲染)
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#app {margin: 0 auto;width: 1100px;height: auto;}h3 {color: #8d5252;}/* https://www.apifox.cn/apidoc/shared-24459455-ebb1-4fdc- */.container {width: 1100px;display: flex;justify-content: space-between;}.container #tableArea {width: 50%;height: auto;}.container #tableArea .iptArea {width: 100%;height: 30px;margin-bottom: 10px;}.container #tableArea .iptArea input {width: 40%;height: 100%;border: 1px solid #e2e1e1;border-radius: 4px;text-indent: 5px;outline: none;}.container #tableArea .iptArea button {width: 15%;height: 110%;border: none;outline: none;background-color: rgb(9, 114, 206);color: #fff;border-radius: 4px;cursor: pointer;}.container #tableArea table {width: 100%;height: auto;text-align: left;border-collapse: collapse;font-size: 14px;}.container #tableArea table tr {height: 40px;border-bottom: 1px solid #eee;}.container #tableArea table tr .red {color: red;}.container #tableArea table tr td a {color: rgb(42, 97, 238);text-decoration: none;}.container #chartArea {width: 45%;height: 330px;border: 1px solid #eee;padding: 10px;}@media (max-width: 768px) {.container {width: 600px;flex-wrap: wrap;justify-content: center;}.container #tableArea {width: 90%;}.container #chartArea {width: 90%;}}@media (min-width: 1200px) {.container {width: 1100px;flex-wrap: wrap;}.container #tableArea {width: 50%;}.container #chartArea {width: 45%;}}</style>
</head><body><div id="app"><h3>小黑记账清单</h3><div class="container"><div id="tableArea"><div class="iptArea"><input type="text" placeholder="消费名称" v-model.trim="name"><input type="text" placeholder="消费价格" v-model.number="price"><button @click="addData">添加账单</button></div><table><thead><tr><th>编号</th><th>消费名称</th><th>消费价格</th><th>操作</th></tr></thead><tbody><tr v-for="(item,index) in list" :key="item.id"><td>{{index+1}}</td><td>{{item.name}}</td><td :class="{red:item.price>500}">{{item.price}}</td><td><a @click="delData(item.id)" href="javascript:;">删除</a></td></tr></tbody><tfoot><tr><th colspan="4">消费总计:<span>{{totalPrice}}</span></th></tr></tfoot></table></div><div id="chartArea"><div id="main" style="width:550px;height:330px;"></div></div></div></div><script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><!-- //接口地址// 查询我的账单列表 https://applet-base-api-t.itheima.net/bill get请求方式,请求参数creator// 删除账单明细 https://applet-base-api-t.itheima.net/bill/{id} delete请求方式,请求参数id// 添加账单 https://applet-base-api-t.itheima.net/bill post请求方式,请求参数creator、name、 price// 转换 https://applet-base-api-t.itheima.net/bill--><script>const app = new Vue({el: '#app',data: {list: [],name: '',price: ''},computed: {totalPrice() {return this.list.reduce((sum, item) => sum + item.price, 0).toFixed(2)}},created() {this.getData()},mounted() {this.myChart = echarts.init(document.getElementById('main'));this.myChart.setOption({title: {text: '消费账单列表',left: 'center'},tooltip: {trigger: 'item'},legend: {orient: 'vertical',left: 'left'},series: [{name: '消费账单',type: 'pie',radius: '50%',data: [],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]});},methods: {async getData() {const res = await axios.get('https://applet-base-api-t.itheima.net/bill', {params: {creator: '小黑'}})this.list = res.data.datathis.myChart.setOption({series: [{data: this.list.map(item => ({ value: item.price, name: item.name }))}]})},async addData() {// 优化if (!this.name) {alert("请输入消费名称")return}if (typeof this.price !== 'number') {alert("请输入正确的消费价格")return}//发送添加请求const res = await axios.post('https://applet-base-api-t.itheima.net/bill', {creator: '小黑',name: this.name,price: this.price})console.log(res);// 重新再渲染一次this.getData()// 清空输入框this.name = ''this.price = ''},async delData(id) {const res = await axios.delete(`https://applet-base-api-t.itheima.net/bill/${id}`)console.log(res);// 重新再渲染一次this.getData()}}})</script>
</body></html>

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

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

相关文章

08 - hive的集合函数、高级聚合函数、炸裂函数以及窗口函数

目录 1、集合函数 1.1、size&#xff1a;集合中元素的个数 1.2、map&#xff1a;创建map集合 1.3、map_keys&#xff1a; 返回map中的key 1.4、map_values: 返回map中的value 1.5、array 声明array集合 1.6、array_contains: 判断array中是否包含某个元素 1.7、sort_a…

Java中的数组、Set、List、Map类型的互相转换总结

序言 数组、Set、List、Map是Java语言非常常用的几种数据类型&#xff0c;他们之间存在着千丝万缕的联系。关于底层的数据结构我这里就不再多说啦&#xff0c;直接从应用出发&#xff0c;总结他们之间的转换方法&#xff0c;并给出推荐方法。 大家可以点赞收藏等到需要的时候…

四、基于Stage模型的应用架构设计

前面我们了解了如何构建鸿蒙应用以及开发了第一个页面&#xff0c;这只是简单的demo&#xff1b;那么如何去设计&#xff0c;从0到1搭建一个真正的应用呢 一、基本概念 1、Stage模型基本概念 Stage模型概念图 AbilityStage&#xff1a;是一个Module级别的组件容器&#xff0…

C语言/数据结构——栈的实现

一.前言 今天我们讲解新的领域——栈。 二.正文 1.栈 1.1栈的概念及结构 栈&#xff1a;一种特殊的线性表&#xff0c;其允许在固定的一段进行插入和删除元素操作。进行数据插入和删除操作的一端称为栈顶&#xff0c;另一端称为栈底。栈中的数据元素遵守后进先出LIFO&#…

LLama3大模型本地部署 仅需6步完成对话模型本地安装部署。附送可视化ui安装、自定义模型目录,修改模型保存地址,第三方微调模型、中文模型下载地址

本篇分为三部分 一&#xff1a;6步完成llama3大模型本地部署 二&#xff1a;8步完成llama3可视化对话界面安装 三&#xff1a;重设模型文件路径 四&#xff1a;微调模型、中文模型下载资源分享 一、LLama3 大模型本地部署安装 首先去mata官网下载ollama客户端 Ollama 选择合适…

通俗易懂讲乐观锁与悲观锁

浅谈乐观锁与悲观锁 乐观锁和悲观锁是Java并发编程中的两个概念。使用乐观锁和悲观锁可以解决并发编程中数据不一致性、死锁、性能差等问题&#xff0c;乐观锁与悲观锁的实行方式不同&#xff0c;所以其特性也不近相同&#xff0c;下文将详细介绍两者的特性与适用场景。 《熊…

OFDM 802.11a的FPGA实现(十六)长训练序列:LTS(含Matlab和verilog代码)

目录 1.前言2.原理3.Matlab生成长训练序列4.硬件实现5.ModelSim仿真6.和Matlab仿真结果对比 原文链接&#xff08;相关文章合集&#xff09;&#xff1a; OFDM 802.11a的xilinx FPGA实现 1.前言 在之前已经完成了data域数据的处理&#xff0c;在构建整个802.11a OFDM数据帧的时…

【Redis】Redis面试和工作中十有八九会遇到的问题

1. 数据类型 常用的Redis数据类型有5种&#xff0c;分别是&#xff1a; String、List、Set、SortedSet、Hash 还有一些高级数据类型&#xff0c;比如Bitmap、HyperLogLog、GEO等&#xff0c;其底层都是基于上述5种基本数据类型。因此在Redis的源码中&#xff0c;其实只有5种数…

React: memo

React.memo 允许你的组件在 props 没有改变的情况下跳过重新渲染。 const MemoizedComponent memo(SomeComponent, arePropsEqual?)React 通常在其父组件重新渲染时重新渲染一个组件。你可以使用 memo 创建一个组件&#xff0c;当它的父组件重新渲染时&#xff0c;只要它的新…

Docker Compose常用命令与属性

大家好&#xff0c;今天给大家分享Docker Compose的常用命令&#xff0c;以及docker-compose文件的属性。Docker Compose 是一个用于定义和运行多容器 Docker 应用应用的重要工具。它通过一个配置文件&#xff08;docker-compose.yml&#xff09;来详细定义多个容器之间的关联、…

软考中级-软件设计师 (十一)标准化和软件知识产权基础知识

一、标准化基础知识 1.1标准的分类 根据适用的范围分类&#xff1a; 国际标准指国际化标准组织&#xff08;ISO&#xff09;、国际电工委员会&#xff08;IEC&#xff09;所制定的标准&#xff0c;以及ISO所收录的其他国际组织制定的标准。 国家标准&#xff1a;中华人民共和…

Redis20种使用场景

Redis20种使用场景 1缓存2抽奖3Set实现点赞/收藏功能4排行榜5PV统计&#xff08;incr自增计数&#xff09;6UV统计&#xff08;HeyperLogLog&#xff09;7去重&#xff08;BloomFiler&#xff09;8用户签到&#xff08;BitMap&#xff09;9GEO搜附近10简单限流11全局ID12简单分…

在大型项目上,Python 是个烂语言吗?

在开始前我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「Python的资料从专业入门到高级教程」&#xff0c; 点个关注在评论区回复“888”之后私信回复“888”&#xff0c;全部无偿共享给大家&#xff01;&#xff01;&#xff01; python项目超过5万行&#x…

前端之电力系统SVG图低代码

其实所有的图形都是由点&#xff0c;线&#xff0c;面组成的。点线面可以组成一个设备。下面就简单讲讲点线面是怎么画的吧 对于线&#xff0c;可以用path <g><path:d"M ${beginX},${beginY} L ${endX},${endY}":stroke-width"lineWidth":strok…

【Pip】pip 安装第三方包异常:[SSL:CERTIFICATE_VERIFY_FAILED]解决方案

pip 安装第三方包异常:[SSL:CERTIFICATE_VERIFY_FAILED] 大家好 我是寸铁&#x1f44a; 总结了一篇pip 安装第三方包异常:[SSL:CERTIFICATE_VERIFY_FAILED]✨ 喜欢的小伙伴可以点点关注 &#x1f49d; 报错 今天在安装第三方包时报错如下: 解决方案 本质上是需要指定信任的镜像…

C#【进阶】泛型

1、泛型 文章目录 1、泛型1、泛型是什么2、泛型分类3、泛型类和接口4、泛型方法5、泛型的作用思考 泛型方法判断类型 2、泛型约束1、什么是泛型2、各泛型约束3、约束的组合使用4、多个泛型有约束思考1 泛型实现单例模式思考2 ArrayList泛型实现增删查改 1、泛型是什么 泛型实现…

pytest教程-46-钩子函数-pytest_sessionstart

领取资料&#xff0c;咨询答疑&#xff0c;请➕wei: June__Go 上一小节我们学习了pytest_report_testitemFinished钩子函数的使用方法&#xff0c;本小节我们讲解一下pytest_sessionstart钩子函数的使用方法。 pytest_sessionstart 是 Pytest 提供的一个钩子函数&#xff0c…

python使用opencv实现手势识别并控制ppt

需要使用到的包 from collections import dequeimport cv2 import numpy as np import math import shutilimport sys import os import time#这个求出现频率最高的太慢了&#xff0c;所以把它放弃了 from collections import Counter准备好安装包后需要获取图片 def star():…

DockerFile介绍与使用

一、DockerFile介绍 大家好&#xff0c;今天给大家分享一下关于 DockerFile 的介绍与使用&#xff0c;DockerFile 是一个用于定义如何构建 Docker 镜像的文本文件&#xff0c;具体来说&#xff0c;具有以下重要作用&#xff1a; 标准化构建&#xff1a;提供了一种统一、可重复…

SQL注入漏洞常用绕过方法

SQL注入漏洞 漏洞描述 Web 程序代码中对于用户提交的参数未做过滤就直接放到 SQL 语句中执行&#xff0c;导致参数中的特殊字符打破了原有的SQL 语句逻辑&#xff0c;黑客可以利用该漏洞执行任意 SQL 语句&#xff0c;如查询数据、下载数据、写入webshell 、执行系统命令以及…