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.xdnf.cn/news/1424431.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

学习笔记-C++

目录 1、何为常量 2、关键字 3、实型 4、水平制表符 5、string字符串 6、C中的三目运算符 7、随机数种子 8、结构体 9、各的区 10、引用 11、函数默认参数 12、函数占位参数 13、函数重载 14、私有属性 15、让另一个类作为本类的成员 16、声明和实现的文件…

Java开发大厂面试第03讲:线程的状态有哪些?它是如何工作的?

线程&#xff08;Thread&#xff09;是并发编程的基础&#xff0c;也是程序执行的最小单元&#xff0c;它依托进程而存在。一个进程中可以包含多个线程&#xff0c;多线程可以共享一块内存空间和一组系统资源&#xff0c;因此线程之间的切换更加节省资源、更加轻量化&#xff0…

win11快速安装mysql数据库系统

win11快速安装mysql数据库系统 1、下载 1.1 打开官网 1.2 向下滚动页面 1.3 进入下载选项 1.4 下载8.0.4 LTS 1.5 开始下载 1.6 下载中 2、解压 大家注意&#xff0c;此时解压后目录是没有data目录的。 3、数据库初始化 3.1 管理员身份打开CMD 开始菜单上&#xff0c;输入…

1. 杜克大学官方宣布2027届新生画像什么是vue关键特点核心概念简单示例生态系统

目录 1. 杜克大学官方宣布2027届新生画像 什么是vue 关键特点 核心概念 简单示例 生态系统 1. 杜克大学官方宣布2027届新生画像 杜克大学校报《The Chronicle》已连续第七年对杜克大学的一年级新生进行深入调查&#xff0c;探讨该群体家庭受教育背景、家庭收入水平以及…

SketchUp Pro 2024 mac草图大师 激活版 专业的3D建模软件

对于追求专业、高效的设计师们来说&#xff0c;SketchUp Pro 2024 for Mac无疑是最佳的选择。它提供了线条、形状、曲线、文本和图像等多种建模元素&#xff0c;让您能够根据需求自由创作。同时&#xff0c;软件还支持智能标注和尺寸功能&#xff0c;让建模过程更加精确、高效。…

线程池的简单实现与应用

1.什么是线程池 线程池其实就是一种多线程处理形式&#xff0c;处理过程中可以将任务添加到队列中&#xff0c;然后在创建线程后自动启动这些任务。 线程池最大的好处就是减少每次启动、销毁线程的损耗。 2.线程池参数介绍 参数名称说明corePoolSize正式员工的数量.(正式员…

SOP for Oracle 23ai:Python 连接 Oracle 的两种方法

前情回顾 前文介绍了如何使用 python-oracledb 连接 Oracle 23ai 数据库&#xff0c;并演示了如何使用独立连接方式。 其中提到了支持两种连接池&#xff1a; DRCP 和 PRCP。 本文将对这两种连接池做具体演示。 DRCP 和 PRCP 连接池 连接池技术的优点不言而喻&#xff1a; 缩短…

27.哀家要长脑子了!

目录 1.316. 去除重复字母 - 力扣&#xff08;LeetCode&#xff09; 2. 1209. 删除字符串中的所有相邻重复项 II - 力扣&#xff08;LeetCode 哎哟 烦死了 刚刚不小心退出又没保存 又要写一遍 烦死了 最近刷题不得劲啊 感觉这脑子没长一点 1.316. 去除重复字母 - 力扣&am…

动态路由实验新手入门:快速掌握核心知识点

大家好&#xff0c;这里是G-LAB IT实验室。今天带大家学习一下华为动态路由实验配置&#xff0c;新手入门&#xff0c;快速掌握核心知识点&#xff01; 01、实验拓扑 02、实验需求 1.根据拓扑运行对应的路由协议 2.每个路由器都有自己的环回口&#xff0c;宣告的区域不限制 …

工作达人的小秘密

在快节奏的工作环境中&#xff0c;想要提升效率&#xff0c;保持头脑清晰&#xff1f;别急&#xff0c;我这就为你揭秘我的几大法宝&#xff0c;让我们一起探索它们如何助你事半功倍&#xff01; 1️⃣【亿可达】 它是一款自动化工具&#xff0c;相当于国内版免费的zaiper。它…

【Pytorch】9.torch.nn.MaxPool2d

什么是MaxPool2d 是对二维矩阵进行池化层下采样的方法 MaxPool2d的用法 相较于卷积层&#xff0c;多出来的参数为ceil_mode 这个参数代表&#xff0c;如果所剩的部分不够卷积核的大小&#xff0c;要不要进行池化操作 具体代码为 import torch import torchvision from torch …

计算机Java项目|springboot母婴商城系统

作者主页&#xff1a;编程指南针 作者简介&#xff1a;Java领域优质创作者、CSDN博客专家 、CSDN内容合伙人、掘金特邀作者、阿里云博客专家、51CTO特邀作者、多年架构师设计经验、腾讯课堂常驻讲师 主要内容&#xff1a;Java项目、Python项目、前端项目、人工智能与大数据、简…

使用 cloudflare 免费服务,搭建临时邮箱,无需暴露自己的真实邮箱地址,保护个人隐私

使用 cloudflare 免费服务&#xff0c;搭建临时邮箱 地址 在线演示 &#x1f310;Github地址 https://github.com/find-xposed-magisk/cloudflare_temp_email 功能/TODO Cloudflare D1 作为数据库 使用 Cloudflare Pages 部署前端 使用 Cloudflare Workers 部署后端 email 转…

【上海大学计算机组成原理实验报告】五、机器语言程序实验

一、实验目的 理解计算机执行程序的实际过程。 学习编制机器语言简单程序的方法。 二、实验原理 根据实验指导书的相关内容&#xff0c;指令的形式化表示是指采用一种规范化的符号系统&#xff0c;以更清晰、精确地描述和表示指令的逻辑功能和操作步骤。 汇编是一种编程语言…

类和对象的特性

1.检查错误。 代码&#xff1a; #include <iostream>using namespace std;class Time { private:/* data */ public:Time(/* args */);~Time();void set_time(void);void show_time(void);int hour;int minute;int sec; };Time::Time(/* args */) { }Time::~Time() { }T…

纯血鸿蒙APP实战开发——Web获取相机拍照图片案例

介绍 本示例介绍如何在HTML页面中拉起原生相机进行拍照&#xff0c;并获取返回的图片。 效果预览图 使用说明 点击HTML页面中的选择文件按钮&#xff0c;拉起原生相机进行拍照。完成拍照后&#xff0c;将图片在HTML的img标签中显示。 实现思路 添加Web组件&#xff0c;设置…

解决kali Linux2024无法获取动态IPv4地址(DHCP)解决方案

用root用户启动终端 进入根目录&#xff0c;选择配置文件 cd到根目录下/../etc/network找到interfaces文件 编辑interfaces文件 vi interfaces&#xff0c;编辑interfaces文件 输入如下命令 打开虚拟网络编辑器 选择虚拟机选项卡&#xff0c;编辑&#xff0c;打开虚拟网络编…

Unity 模拟放大镜局部放大UI 效果实现

UI 放大实现 RectTransformUtility.ScreenPointToLocalPointInRectangle(rectScale, eventData.position, eventData.pressEventCamera, out localPos); 使用IPointerDownHandler 获取鼠标点击时的有效负载&#xff0c;并将鼠标坐标转成对应的UI 坐标&#xff0c;rectScale 为…

GM812条码模块的产品说明

1 模块尺寸 引脚定义 (单位&#xff1a;mm) 接口定义&#xff1a;规格 1.25*6Pin 接口说明&#xff1a; a) UART 缺省波特率为 9600bps&#xff0c;数据格式&#xff1a;8 位数据位&#xff0c;1 位停止位&#xff0c;无校验位。 b) 如果上位机是 MCU&#xff08;3.3V&#x…

OpenHarmony 实战开发——ArkUI容器类API介绍

容器类&#xff0c;顾名思义就是存储的类&#xff0c;用于存储各种数据类型的元素&#xff0c;并具备一系列处理数据元素的方法。在 ArkUI 开发框架中&#xff0c;容器类采用了类似静态的语言来实现&#xff0c;并通过 NAPI 框架对外提供。通过对存储位置以及属性的限制&#x…
最新文章