当前位置：首页 > news >正文

3.从零开始学会Vue--{{生命周期,工程化,组件化}}

news 2025/10/3 8:24:39

1.生命周期钩子

1.是什么

生命周期

概念：就是一个Vue实例从创建到销毁的整个过程

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

1.创建阶段：创建响应式数据

2.挂载阶段：渲染模板

3.更新阶段：修改数据，更新视图

4.销毁阶段：销毁Vue实例

作用：Vue底层提供了很多生命周期钩子，让开发者可以在Vue生命周期【特定阶段】植入一些自己的代码来实现一些功能。

生命周期钩子

生命周期钩子概念：钩子是Vue生命周期过程中，会自动执行的一些函数

作用： 让开发者可以在【特定阶段】运行自己的代码

思考：有哪些功能需要用到生命周期钩子呢？

什么时候可以发送初始化渲染请求？（越早越好）
什么时候可以开始操作dom？（至少dom得渲染出来）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><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><br /><hr /><button id="btn">销毁Vue</button><script src="./vue.2.7.js"></script><script>const app = new Vue({el: '#app',data: {count: 100,title: '计数器',},// 1. 创建阶段（准备数据）beforeCreate() {console.log('1 .beforeCreate');},created() {// ✨✨作用：发ajax请求获取数据赋值给响应式数据(data中定义的数据)console.log('2. created');},// 2. 挂载阶段（渲染模板）beforeMount() {console.log('3. beforeMount');},mounted() {// ✨✨操作dom操作，比如： document.querySelector('button')console.log('4. mounted');},// 3. 更新阶段(修改数据 → 更新视图)beforeUpdate() {console.log('1. beforeUpdate');},updated() {console.log('2. updated');},// 4. 卸载阶段beforeDestroy() {// ✨✨✨ 实例销毁之前，做一些定时器的清除工作(clearInterval() , clearTimeout())console.log('1. beforeDestroy');},destroyed() {console.log('2. destroyed');},});btn.addEventListener('click', () => {app.$destroy();});</script></body>
</html>

2.案例

1.案例1

需求：页面进入后请求新闻接口获取数据后展示在页面上

核心思路：

1. 等data中的数据侦听完成（形成响应式数据）， created 钩子

2. 发送ajax请求获取数据v-for渲染

<!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 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>
</html>

2.案例2

需求：页面进入后，文本框自动获取焦点

核心思路：

1. 等input框渲染出来 mounted 钩子

2. 让input框获取焦点 inp.focus()


<!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><!-- 初始化样式 --><link rel="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: ''},// 核心思路：// 1. 等input框渲染出来 mounted 钩子// 2. 让input框获取焦点 inp.focus()mounted () {document.querySelector('#inp').focus()}})
</script></body></html>

3.案例3

<!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="name"/><inputtype="text"class="form-control"placeholder="消费价格"v-model.trim.number="price"/><button type="button" class="btn btn-primary" @click="addsalary">添加账单</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></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="./vue.2.7.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: {name: '',price: '',list: [],},created() {this.getLists();},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: [{ value: 1048, name: '球鞋' },{ value: 735, name: '防晒霜' },],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)',},},},],});},computed: {totalPrice() {return this.list.reduce((prev, curr) => {return (prev += curr.price);}, 0);},},methods: {async getLists() {let res = await axios({url: 'https://applet-base-api-t.itheima.net/bill',params: {creator: 'zs123',},});this.list = res.data.data;this.myChart.setOption({series: [{data: this.list.map((item) => {return { value: item.price, name: item.name };}),},],});},addsalary() {if (this.name && this.price) {axios({method: 'post',url: 'https://applet-base-api-t.itheima.net/bill',data: {creator: 'zs123',name: this.name,price: this.price,},}).then((res) => {this.getLists();this.name = '';this.price = '';});} else {alert('请输入消费名称或价格');}},async del(id) {console.log(id);await axios({method: 'delete',url: `https://applet-base-api-t.itheima.net/bill/${id}`,});this.getLists();},},});</script></body>
</html>

2.工程化

开发Vue的两种方式

核心包传统开发模式：基于html / css / js 文件，直接引入核心包，开发 Vue。
工程化开发模式：基于构建工具（例如：webpack）的环境中开发Vue。

脚手架Vue CLI

概念：Vue CLI 是Vue官方提供的一个全局命令工具 【集成了webpack配置】

作用：可以帮助我们快速创建一个Vue项目的标准化基础架子

好处：

内置了webpack工程化需要的相关loader，plugins等工具

1. css-loader
2. html-webpack-plugin

开箱即用，零配置

1. 比如扩展less-loader 只需要 npm i less less-loader安装即可支持，无需再配置

使用步骤：

全局安装（只需安装一次即可） yarn global add @vue/cli 或者 npm i @vue/cli -g
查看vue/cli版本： vue --version
创建项目架子：vue create project-name(项目名不能使用中文，所在路径中不能有特殊字符比如 (),& )
启动项目：yarn serve 或者 npm run serve(命令不固定，找package.json)

项目目录介绍和运行流程

1.项目目录介绍

虽然脚手架中的文件有很多，目前咱们只需认识三个文件即可

main.js 入口文件
App.vue App根组件
index.html 模板文件

2.运行流程

3.组件化开发

1.是什么

组件化：一个页面可以拆分成一个个组件，每个组件有着自己独立的结构、样式、行为。

好处：便于维护，利于复用 → 提升开发效率。

组件分类：普通组件、根组件。

比如：下面这个页面，可以把所有的代码都写在一个页面中，但是这样显得代码比较混乱，难易维护。咱们可以按模块进行组件划分

Vue中每个组件均由三部分构成：
template：结构（有且只能一个根元素）
script: js逻辑
style：样式 (可支持less，需要装包)
（1）装包: npm i less less-loader -D
（2）style标签，lang="less" 开启less功能

语法高亮插件 Vetur

2.局部注册

概念：局部注册的组件，只能在注册的组件内使用

组件局部注册步骤：

① 创建.vue文件（三个组成部分）

② 注册组件

③ 使用组件<组件名></组件名>

组件名规范 —> 大驼峰命名法，如 HelloWorld

3.全局注册

概念：全局注册的组件，在项目的任何组件中都能使用

组件全局注册步骤：

① 创建.vue文件（三个组成部分）

② 在main.js中进行全局注册

③ 项目任意组件中使用

组件名规范 —> 大驼峰命名法，如 HmButton

注意：组件的template中只能有一个根元素

3.从零开始学会Vue--{{生命周期,工程化,组件化}}

1.生命周期钩子 1.是什么生命周期概念：就是一个Vue实例从创建到销毁的整个过程生命周期包括：① 创建 ② 挂载 ③ 更新 ④ 销毁四个阶段 1.创建阶段：创建响应式数据 2.挂载阶段：渲染模板 3.更新阶段：修改…...

编程日记 2025/2/16 15:20:08

3. 网络编程与Socket 3.1 Socket基础创建Socket import socket# TCP Socket tcp_socket socket.socket(socket.AF_INET, socket.SOCK_STREAM)# UDP Socket udp_socket socket.socket(socket.AF_INET, socket.SOCK_DGRAM)服务器端函数函数描述bind((host, port))绑定…...

编程日记 2025/2/16 15:19:02

【java】方法的基本内存原理（栈和堆）

java内存主要分为栈和堆，方法相关的部分主要在栈内存里，每个方法调用时会在栈里创建一个栈帧，存放局部变量和方法执行的信息。执行完后栈帧被销毁，局部变量消失。而对象实例存在堆里，由垃圾回收器管理。 **Java方法内…...

编程日记 2025/2/16 15:18:00

SQLMesh 系列教程4- 详解模型特点及模型类型

SQLMesh 作为一款强大的数据建模工具，以其灵活的模型设计和高效的增量处理能力脱颖而出。本文将详细介绍 SQLMesh 模型的特点和类型，帮助读者快速了解其强大功能。我们将深入探讨不同模型类型（如增量模型、全量模型、SCD Type 2 等&#xff0…...

编程日记 2025/2/16 15:15:57

SpringBoot（接受参数相关注解）

文章目录 1.基本介绍2.PathVariable 路径参数获取信息 1.代码实例 1.index.html2.ParameterController.java3.测试 2.细节说明 3.RequestHeader 请求头获取信息 1.代码实例 1.index.html2.ParameterController.java3.测试 2.细节说明 4.RequestParameter 请求获取参数信息 1.…...

编程日记 2025/2/16 15:14:55

hbase合并队列超长问题分析

问题现象 hbase集群合并队列超长，有节点上合并任务已经运行超过1天未结束，合并队列总长不断增加。问题分析参数配置：配置参数默认值含义hbase.hregion.memstore.flush.size128MMemStore达到该值会Flush成StoreFilehbase.hregion.memstore.block.multiplier4当region中…...

编程日记 2025/2/16 15:12:52

FPGA的星辰大海

编者按时下风头正盛的DeepSeek，正值喜好宏大叙事的米国大统领二次上岗就业，OpenAI、软银、甲骨文等宣布投资高达5000亿美元“星际之门”之际，对比尤为强烈。某种程度上，，是低成本创新理念的直接落地。包括来自开源社区的诸多赞誉是，并非体现技术有多“超越”，而是…...

编程日记 2025/2/16 15:11:49

认识vue-admin

认识vue-admin **核心交付:** 为什么要基于现成架子二次开发什么是二次开发：基于已有的代码（项目工程，脚手架）开进行新功能的开发所以看懂已有的框架中的既有代码，变得很重要了 1. 背景知识后台管理系统是一种最…...

编程日记 2025/2/16 15:08:39

STM32、GD32驱动TM1640原理图、源码分享

一、原理图分享二、源码分享 /************************************************* * copyright: * author:Xupeng * date:2024-07-18 * description: **************************************************/ #include "smg.h"#define DBG_TAG "smg&…...

编程日记 2025/2/16 15:06:31

spring boot 对接aws 的S3 服务，实现上传和查询

1.aws S3介绍 AWS S3（Amazon Simple Storage Service）是亚马逊提供的一种对象存储服务，旨在提供可扩展、高可用性和安全的数据存储解决方案。以下是AWS S3的一些主要特点和功能： 1.1. 对象存储对象存储模型：S3使用…...

编程日记 2025/2/16 15:04:26

PH热榜 | 2025-02-12

1. FirstHR 2.0 with HR Copilot 标语：小型企业的一站式人力资源平台介绍：对小型企业来说，FirstHR是一个人力资源平台，专注于招聘和团队发展，并融合了一点人工智能技术。产品网站： 立即访问 Product …...

编程日记 2025/2/16 15:03:17

通过例子学 rust 个人精简版 1-1

1-1 Hello World fn main() {println!("Hello World!");// 动手试一试println!("Im a Rustacean!"); }Hello World! Im a Rustacean!要点1 ：println 自带换行符注释 fn main() {let x 5 /* 90 */ 5;println!("Is x 10 or 100? x …...

编程日记 2025/2/16 15:01:09

HTTP的前世今生：如何塑造现代互联网的交互方式？

一、关于HTTP 1.1 简介 “没有HTTP协议，就没有今天的互联网。” 从简单的文本传输到支撑全球数十亿设备的实时交互，HTTP协议始终是Web世界的核心纽带。本文将深入剖析其设计思想、演进历程及底层工作原理。 HTTP（HyperText Transfer Protoco…...

编程日记 2025/2/16 15:00:06

Flutter_学习记录_动画的简单了解

用AnimationController简单实现如下的效果图： 1. 只用AnimationController实现简单动画 1.1 完整代码案例 import package:flutter/material.dart;class AnimationDemo extends StatefulWidget {const AnimationDemo({super.key});overrideState<AnimationDe…...

编程日记 2025/2/16 14:57:56

【java】for (int num : numbers) { System.out.print(num + “ “)； } for里的是什么意思

for (int num : numbers) 是 Java 中的一种增强型 for 循环（也称为 for-each 循环）。它的作用是遍历数组或集合中的每一个元素，并对每个元素执行循环体中的操作。 1. 增强型 for 循环的语法 java Copy for (元素类型变量名 : 数组或集合…...

编程日记 2025/2/16 14:55:48

内容中台驱动企业CMS架构优化与高效策略

内容概要在数字化转型浪潮中，企业内容管理系统（CMS）正面临从单一内容存储向智能化、协同化方向演进的迫切需求。通过引入内容中台架构，企业能够有效整合元数据管理、版本控制与智能协作能力，从而优化传统CMS的底层逻…...

编程日记 2025/2/16 14:54:44

我用 Cursor 开发了一款个人小记系统

https://note.iiter.cn 项目背景在日常工作和学习中,我们经常需要快速记录一些想法、收藏一些有用的链接或者保存一些重要的文本、图片内容。虽然市面上已经有很多笔记软件,但我想要一个更轻量、更简单的工具,专注于快速记录和智能检索。于是我开发了这款个人小记系统。系统…...

编程日记 2025/2/16 14:53:41

百问网(100ask)提供的烧写工具的原理和详解；将自己编译生成的u-boot镜像文件烧写到eMMC中

百问网(100ask)提供的烧写工具的原理具体的实现原理见链接 http://wiki.100ask.org/100ask_imx6ull_tool 为了防止上面这个链接失效，我还对上面这个链接指向的页面保存成了mhtml文件，这个mhtml文件的百度网盘下载链接： https://pan.baidu.c…...

编程日记 2025/2/16 14:52:38

doris:异步物化视图概述

物化视图作为一种高效的解决方案，兼具了视图的灵活性和物理表的高性能优势。它能够预先计算并存储查询的结果集，从而在查询请求到达时，直接从已存储的物化视图中快速获取结果，避免了重新执行复杂的查询语句所带来的开销。使用场…...

编程日记 2025/2/16 14:51:34

图像缩放的双线性插值实现方式

1、双线性插值概念双线性插值是一种用于在二维网格上进行插值的方法，适用于图像处理、计算机图形学等领域。它通过利用四个邻近点的已知值，估算出任意点的值。双线性插值在两个方向（通常是水平和垂直）上分别进行线性插值&#x…...

编程日记 2025/2/16 14:48:29

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0：开发环境同步测试 cookie 至 localhost，便于本地请求服务携带 cookie 参考地址：https://juejin.cn/post/7139354571712757767 里面有源码下载下来，加在到扩展即可使用FeHelp…...

编程新知 2025/8/16 3:55:30

【JavaWeb】Docker项目部署

引言之前学习了Linux操作系统的常见命令，在Linux上安装软件，以及如何在Linux上部署一个单体项目，大多数同学都会有相同的感受，那就是麻烦。核心体现在三点： 命令太多了，记不住软件安装包名字复杂&…...

编程新知 2025/9/28 3:34:11

JVM暂停（Stop-The-World，STW）的原因分类及对应排查方案

JVM暂停（Stop-The-World，STW）的完整原因分类及对应排查方案，结合JVM运行机制和常见故障场景整理而成：一、GC相关暂停 1. 安全点（Safepoint）阻塞现象：JVM暂停但无GC日志，日志显示No GCs detected。原因：JVM等待所有线程进入安全点（如…...

编程新知 2025/10/2 12:07:03

docker 部署发现spring.profiles.active 问题

报错： org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...

编程新知 2025/9/20 12:14:18

C#学习第29天：表达式树（Expression Trees）

目录什么是表达式树？ 核心概念 1.表达式树的构建 2. 表达式树与Lambda表达式 3.解析和访问表达式树 4.动态条件查询表达式树的优势 1.动态构建查询 2.LINQ 提供程序支持： 3.性能优化 4.元数据处理 5.代码转换和重写适用场景代码复杂性…...

编程新知 2025/7/21 4:21:36

Unity UGUI Button事件流程

场景结构测试代码 public class TestBtn : MonoBehaviour {void Start(){var btn GetComponent<Button>();btn.onClick.AddListener(OnClick);}private void OnClick(){Debug.Log("666");}}当添加事件时 // 实例化一个ButtonClickedEvent的事件 [Formerl…...

编程新知 2025/9/28 6:24:24

Python 训练营打卡 Day 47

注意力热力图可视化在day 46代码的基础上，对比不同卷积层热力图可视化的结果 import torch import torch.nn as nn import torch.optim as optim from torchvision import datasets, transforms from torch.utils.data import DataLoader import matplotlib.pypl…...

编程新知 2025/9/28 14:32:59