二七(vue2-03)、生命周期四个阶段及八个钩子、工程化开发和脚手架、组件注册、拆分组件
1. 生命周期
1.1 生命周期四个阶段
<!-- Vue生命周期：一个Vue实例从 创建 到 销毁 的整个过程。生命周期四个阶段：① 创建 ② 挂载 ③ 更新 ④ 销毁1.创建阶段：创建响应式数据2.挂载阶段：渲染模板3.更新阶段：修改数据，更新视图4.销毁阶段：销毁Vue实例
-->1.2 生命周期钩子
<!DOCTYPE html>
<html lang="en"><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>Document</title></head><body><div id="app"><h3>{{ title }}</h3><div><button @click="count--">-</button><span>{{ count }}</span><button @click="count++">+</button></div></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><!-- Vue生命周期钩子Vue生命周期过程中，会自动运行一些函数，被称为【生命周期钩子】，让开发者可以在【特定阶段】运行自己的代码--><script>const app = new Vue({el: "#app",data: {count: 100,title: "计数器",},beforeCreate() {console.log("beforeCreate", this.count);// beforeCreate undefined},created() {console.log("created", this.count);// created 100},beforeMount() {console.log("beforeMount", document.querySelector("h3"));// beforeMount <h3>{{ title }}</h3>},mounted() {console.log("mounted", document.querySelector("h3"));// mounted <h3>计数器</h3>},beforeUpdate() {console.log("beforeUpdata",this.count,document.querySelector("span").innerHTML);// beforeUpdata 101 100},updated() {console.log("updated",this.count,document.querySelector("span").innerHTML);// updated 101 101},// app.$destroy()beforeDestroy() {console.log("beforeDestory");},destroyed() {console.log("destroyed");},});</script></body>
</html>
1.3 生命周期案例
1.3.1 created应用 - 新闻列表
<!DOCTYPE html>
<html lang="en"><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>Document</title><style>* {margin: 0;padding: 0;list-style: none;}.news {display: flex;height: 120px;width: 600px;margin: 0 auto;padding: 20px 0;cursor: pointer;}.news .left {flex: 1;display: flex;flex-direction: column;justify-content: space-between;padding-right: 10px;}.news .left .title {font-size: 20px;}.news .left .info {color: #999999;}.news .left .info span {margin-right: 20px;}.news .right {width: 160px;height: 120px;}.news .right img {width: 100%;height: 100%;object-fit: cover;}</style></head><body><div id="app"><ul><li class="news" v-for="item in list" :key="item.id"><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: [],},// created 数据准备好了，可以开始发送初始化渲染请求。async created() {const res = await axios.get("http://hmajax.itheima.net/api/news");// console.log(res.data.data)this.list = res.data.data;},});</script></body>
</html>
1.3.2 mounted应用 - 输入框获取焦点
<!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><!-- 初始化样式 --><linkrel="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"><img src="https://www.itheima.com/images/logo.png" alt="" /><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 模板渲染完成，可以开始操作DOM了。mounted() {document.querySelector("#inp").focus();},});</script></body>
</html>
2. 综合案例 - 小黑记账清单
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><!-- CSS only --><linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"/><style>.red {color: red !important;}.search {width: 300px;margin: 20px 0;}.my-form {display: flex;margin: 20px 0;}.my-form input {flex: 1;margin-right: 20px;}.table > :not(:first-child) {border-top: none;}.contain {display: flex;padding: 10px;}.list-box {flex: 1;padding: 0 30px;}.list-box a {text-decoration: none;}.echarts-box {width: 600px;height: 400px;padding: 30px;margin: 0 auto;border: 1px solid #ccc;}tfoot {font-weight: bold;}@media screen and (max-width: 1000px) {.contain {flex-wrap: wrap;}.list-box {width: 100%;}.echarts-box {margin-top: 30px;}}</style></head><body><div id="app"><div class="contain"><!-- 左侧列表 --><div class="list-box"><!-- 添加资产 --><form class="my-form"><inputtype="text"class="form-control"placeholder="消费名称"v-model.trim="billName"/><inputtype="text"class="form-control"placeholder="消费价格"v-model.trim.number="billPrice"/><button type="button" class="btn btn-primary" @click="add">添加账单</button></form><table class="table table-hover"><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>{{item.price}}</td><td><a href="javascript:;" @click="del(item.id)">删除</a></td></tr><!-- <tr><td>2</td><td>大衣</td><td class="red">199.00</td><td><a href="javascript:;">删除</a></td></tr> --></tbody><tfoot><tr><td colspan="4">消费总计： {{totalPrice}}</td></tr></tfoot></table></div><!-- 右侧图表 --><div class="echarts-box" id="main"></div></div></div><script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script><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>/*** 接口文档地址：* https://www.apifox.cn/apidoc/shared-24459455-ebb1-4fdc-8df8-0aff8dc317a8/api-53371058** 功能需求：* 1. 基本渲染* 2. 添加功能* 3. 删除功能* 4. 饼图渲染*/const app = new Vue({el: "#app",data: {list: [],creator: "caihaili",billName: "",billPrice: "",},created() {/* const res = await axios.get('https://applet-base-api-t.itheima.net/bill', { params: { creator: this.creator } })// console.log(res.data.data)this.list = res.data.data */this.render();},mounted() {this.mychart = echarts.init(document.querySelector("#main"));this.mychart.setOption({title: {text: "消费账单列表",// subtext: 'Fake Data',left: "center",},tooltip: {trigger: "item",},legend: {orient: "vertical",left: "left",},series: [{name: "消费账单",type: "pie",radius: "50%",data: [{ value: 1048, name: "Search Engine" },{ value: 735, name: "Direct" },{ value: 580, name: "Email" },{ value: 484, name: "Union Ads" },{ value: 300, name: "Video Ads" },],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: "rgba(0, 0, 0, 0.5)",},},},],});},methods: {async render() {const res = await axios.get("https://applet-base-api-t.itheima.net/bill",{ params: { creator: this.creator } });// console.log(res.data.data[1].price)this.list = res.data.data;this.mychart.setOption({series: [{/* data: [{ value: 1048, name: 'Search Engine' },{ value: 735, name: 'Direct' },{ value: 580, name: 'Email' },{ value: 484, name: 'Union Ads' },{ value: 300, name: 'Video Ads' }] */data: this.list.map((item) => ({value: item.price,name: item.name,})),},],});},async add() {/* this.list.unshift({id: +new Date(),name: this.billName,price: this.billPrice,}) */if (this.billName === "" || this.billPrice === "") {alert("内容不能为空");return;}// axios简写时, post方法不用写data{}, 直接写键对值数据await axios.post("https://applet-base-api-t.itheima.net/bill", {// id: +new Date(),name: this.billName,price: this.billPrice,creator: this.creator,});this.render();this.billName = "";this.billPrice = "";},async del(id) {await axios.delete(`https://applet-base-api-t.itheima.net/bill/${id}`);this.render();},},computed: {totalPrice() {return this.list.reduce((sum, item) => {return (sum += item.price);}, 0);},},});</script></body>
</html>
3. 工程化开发入门
3.1 工程化开发和脚手架
/* 1. 开发Vue的两种方式- 核心包传统开发模式：基于html / css / js 文件，直接引入核心包，开发 Vue。- 工程化开发模式：基于构建工具（例如：webpack）的环境中开发Vue。2. 工程化开发模式优点：提高编码效率，比如使用JS新语法、Less/Sass、Typescript等通过webpack都可以编译成浏览器识别的ES3/ES5/CSS等3. 脚手架Vue CLIVue CLI 是Vue官方提供的一个全局命令工具可以帮助我们快速创建一个开发Vue项目的标准化基础架子。【集成了webpack配置】4. 使用步骤：1. 全局安装（只需安装一次即可） yarn global add @vue/cli 或者 npm i @vue/cli -g2. 查看vue/cli版本：vue --version3. 创建项目架子：vue create project-name(项目名不能使用中文)4. 启动项目：yarn serve 或者 npm run serve(命令不固定，找package.json)
*/3.2 项目运行流程
3.3 组件化
3.4 组件注册
<template><!-- <vue 回车可生成框架 --><!-- template 只允许有一个根元素 --><div class="app"><!-- 3. 使用组件 组件名+Tab 补充尖括号 --><HmHeader></HmHeader><HmMain></HmMain></div>
</template><script>
// 1. 导入
import HmHeader from "./components/HmHeader.vue";
import HmMain from "./components/HmMain.vue";export default {// 2. 注册组件(局部)components: {HmHeader,HmMain,},
};
</script><style>
.app {width: 400px;height: 600px;background-color: blueviolet;padding: 10px;box-sizing: border-box;margin: 0 auto;
}
</style>4. 综合案例 - 小兔鲜首页 - 拆分组件
Alt+Shift 多光标，Shift+左右箭头 多光标选中
5. 作业
5.1 BOSS直聘薪资分析-综合实战
5.2 Saas系统布局-变形题
5.3 重构百度云盘文件列表-二次开发
相关文章：
二七(vue2-03)、生命周期四个阶段及八个钩子、工程化开发和脚手架、组件注册、拆分组件
1. 生命周期 1.1 生命周期四个阶段 <!-- Vue生命周期：一个Vue实例从 创建 到 销毁 的整个过程。生命周期四个阶段：① 创建 ② 挂载 ③ 更新 ④ 销毁1.创建阶段：创建响应式数据2.挂载阶段：渲染模板3.更新阶段：修改…...
[树] 最轻的天平
问题描述 天平的两边有时不一定只能挂物品，还可以继续挂着另一个天平，现在给你一些天平的情况和他们之间的连接关系，要求使得所有天平都能平衡所需物品的总重量最轻。 一个天平平衡当且仅当“左端点的重量 \times 左端点到支点的距离 …...
Linux udev介绍使用
udev udev配置文件匹配键和赋值键操作符解释示例修改udev配置U盘自动挂载Usb卸载SD卡挂载SD卡卸载 udev配置文件 /etc/udev/udev.conf 这个文件通常很短，他可能只是包含几行#开头的注释，然后有几行选项： udev_root“/dev/” udev_rules“/…...
单片机：实现节日彩灯（附带源码）
本项目的目标是通过编程实现几个常见的彩灯效果，包括： 流水灯效果（从左到右或从右到左）闪烁效果（所有灯同时闪烁）渐变效果（灯光从亮到灭，再从灭到亮）定时切换颜色效果&a…...
流程引擎Activiti性能优化方案
流程引擎Activiti性能优化方案 Activiti工作流引擎架构概述 Activiti工作流引擎架构大致分为6层。从上到下依次为工作流引擎层、部署层、业务接口层、命令拦截层、命令层和行为层。 基于关系型数据库层面优化 MySQL建表语句优化 Activiti在MySQL中创建默认字符集为utf8&…...
【爬虫一】python爬虫基础合集一
【爬虫一】python爬虫基础合集一 1. 网络请求了解1.1. 请求的类型1.2. 网络请求协议1.3. 网络请求过程简单图解1.4. 网络请求Headers(其中的关键字释义)：请求头、响应头 2. 网络爬虫的基本工作节点2.1. 了解简单网络请求获取响应数据的过程所涉及要点 1. 网络请求了…...
any/all 子查询优化规则的原理与解析 | OceanBase查询优化
背景 在通常情况下，当遇到包含any/all子查询的语句时，往往需要遵循嵌套执行的方式，因此其查询效率较低。Oceanbase中制定了相应的any/all子查询优化规则，能够能够识别并优化符合条件的any/all子查询，从而有效提升查询…...
ECharts 饼图：数据可视化的重要工具
ECharts 饼图：数据可视化的重要工具 引言 在数据分析和可视化的领域，ECharts 是一个广受欢迎的开源库。它由百度团队开发，用于在网页中创建交互式图表。ECharts 提供了多种图表类型，包括柱状图、折线图、散点图等，而饼图则是其中最常用的一种。本文将深入探讨 ECharts 饼…...
第10章：CSS最佳实践 --[CSS零基础入门]
代码组织 在CSS开发中，良好的代码组织和最佳实践对于项目的可维护性和扩展性至关重要。以下是两个示例，展示了如何遵循CSS最佳实践来组织代码。 示例 1: 使用 BEM（Block Element Modifier）命名法 BEM 是一种用于提高 CSS 可读性…...
怎么在idea中创建springboot项目
最近想系统学习下springboot，尝试一下全栈路线 从零开始，下面将叙述下如何创建项目 环境 首先确保自己环境没问题 jdkMavenidea 创建springboot项目 1.打开idea，选择file->New->Project 2.选择Spring Initializr->设置JDK->…...
递归读取指定目录下的文件
序言 需要读取sftp服务器上符合指定的文件名正则的文件列表，目前想到的最好的办法就是递归。 我这里引入的依赖是： <!-- jsch-sftp连接 --><dependency><groupId>com.jcraft</groupId><artifactId>jsch</artif…...
【模型压缩】原理及实例
在移动智能终端品类越发多样的时代，为了让模型可以顺利部署在算力和存储空间都受限的移动终端，对模型进行压缩尤为重要。模型压缩（model compression）可以降低神经网络参数量，减少延迟时间，从而实现提高神经…...
常用的JVM启动参数有哪些？
大家好，我是锋哥。今天分享关于【常用的JVM启动参数有哪些？】面试题。希望对大家有帮助； 常用的JVM启动参数有哪些？ 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 JVM（Java Virtual Machine）启…...
Curvelet 变换与FDCT
Curvelet变换 Curvelet变换 是一种多尺度、多方向的信号分析工具，专门用于处理具有各向异性特征的信号，例如边缘和曲线。与传统的傅里叶变换和小波变换相比，Curvelet变换能够更精确地表示信号中的曲线特征，因此在图像处理、地震数据分析、医学成像等领域得到了广泛应用。 …...
Django Admin 管理工具
Django 提供了基于 web 的管理工具。 Django 自动管理工具是 django.contrib 的一部分。你可以在项目的 settings.py 中的 INSTALLED_APPS 看到它： /HelloWorld/HelloWorld/settings.py 文件代码： INSTALLED_APPS ( django.contrib.admin, django.co…...
Android笔记【19】
具体示例 run: val result someObject.run {// 这里可以使用 thisthis.someMethod() }let: val result someObject?.let {// 这里使用 itit.someMethod() }with: val result with(someObject) {// 这里使用 thissomeMethod() }apply: val obj SomeClass().apply {// 这里使…...
矩阵在资产收益(Asset Returns)中的应用：以资产回报矩阵为例（中英双语）
本文中的例子来源于： 这本书，网址为：https://web.stanford.edu/~boyd/vmls/ 矩阵在资产收益(Asset Returns)中的应用：以资产回报矩阵为例 在量化金融中，矩阵作为一种重要的数学工具，被广泛用于描述和分析…...
Docker 中如何限制CPU和内存的使用 ？
在容器化的动态世界中，Docker 已经成为构建、部署和管理容器化的关键工具应用。然而，Docker 的效率在很大程度上取决于资源管理得有多好。设置适当的内存和 CPU 限制对于优化 Docker 性能至关重要，确保每个容器在不使主机负担过重的情况下获得…...
【AIGC-ChatGPT进阶提示词-《动图生成》】怪物工厂：融合想象力与创造力的奇幻世界
引言 在这个科技飞速发展的时代，人工智能正在不断突破我们的想象。而在众多AI应用中，有一个独特的创意工具正在悄然兴起，它就是"怪物工厂"。这个神奇的工具能够将人类天马行空的想象力与AI的创造力完美结合，打造出一个个奇异、有趣、甚至有些恐怖的怪物形象。本…...
docker 使用 xz save 镜像
适用场景 如果docker save -o xxx > xxx 镜像体积过大，可以使用 xz 命令压缩。 命令 例如 save busybox:1.31.1 镜像，其中 -T 是使用多核心压缩，可以加快压缩。 docker save busybox:1.31.1 |xz -T 8 > /tmp/busybox:1.31.1安装 xz Ubuntu/Debian sudo apt upda…...
C#经典算法面试题
网络上收集的一些C#经典算法面试题，分享给大家 # 递归算法 ## C#递归算法计算阶乘的方法 > 一个正整数的阶乘（factorial）是所有小于及等于该数的正整数的积，并且0的阶乘为1。自然数n的阶乘写作n!。1808年，基斯顿…...
vulnhub靶场【DriftingBlues】之9 final
前言 靶机：DriftingBlues-6，IP地址192.168.1.66 攻击：kali，IP地址192.168.1.16 都采用虚拟机，网卡为桥接模式 主机发现 使用arp-scan -l或netdiscover -r 192.168.1.1/24 信息收集 使用nmap扫描端口 网站探测 访…...
有124个叶子节点的，完全二叉树最多有多少个节点
n＝n0n1n2 其中n0为叶子节点， n2＝n0-1 完全二叉树的定义和性质 最后化简，n＝2*n0n1-1...
从RNN到Transformer：生成式AI自回归模型的全面剖析
个人主页：chian-ocean 文章专栏 生成式AI中的自回归模型详解 在生成式AI的飞速发展中，自回归模型作为核心技术之一，成为文本生成、语音合成、图像生成等领域的重要支柱。本文将全面探讨自回归模型的原理、架构、实际应用，并结合…...
Java爬虫大冒险：如何征服1688商品搜索之巅
在这个信息爆炸的时代，数据就是力量。对于电商平台而言，数据更是金矿。今天，我们要踏上一场Java爬虫的冒险之旅，目标是征服1688这个B2B电商巨头，获取按关键字搜索的商品信息。这不仅是技术的挑战，更是智慧的…...
基于Spring Boot的无可购物网站系统
一、系统背景与意义 随着互联网的快速发展，电子商务已经成为人们日常生活的重要组成部分。构建一个稳定、高效、可扩展的电商平台后端系统，对于满足用户需求、提升用户体验、推动业务发展具有重要意义。Spring Boot作为当前流行的Java开发框架ÿ…...
智能人家谱程序创意
实现一个家谱程序，并结合自传、视频、图片资料和智能对话系统，涉及到多个领域的技术：自然语言处理（NLP）、机器学习、计算机视觉、多媒体处理和数据存储。下面，我为你制定一个可执行的计划，详细阐…...
Redis 7.x哨兵模式如何实现？基于Spring Boot 3.x版
大家好，我是袁庭新。 在Redis主从复制模式中，因为系统不具备自动恢复的功能，所以当主服务器（master）宕机后，需要手动把一台从服务器（slave）切换为主服务器。在这个过程中࿰…...
解决QTCreator在Debug时无法显示std::string类型的问题
环境： 操作系统：Ubuntu 20.04.6 LTS QT版本：Qt Creator 4.11.0 问题： Debug时，无法显示std::string类型的值，如下图： 解决方法： 修改/usr/share/qtcreator/debugger/stdtypes.py…...
leetcode 面试经典 150 题：无重复字符的最长子串
链接无重复字符的最长子串题序号3类型字符串解题方法滑动窗口难度中等 题目 给定一个字符串 s ，请你找出其中不含有重复字符的 最长子串 的长度。 示例 1: 输入: s “abcabcbb” 输出: 3 解释: 因为无重复字符的最长子串是 “abc”，所以其长度为 3。 …...