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

vue2 生命周期,工程化开发入门

news 2025/7/12 17:24:34

一、今日目标

1.生命周期

生命周期介绍
生命周期的四个阶段
生命周期钩子
声明周期案例

2.工程化开发入门

工程化开发和脚手架
项目运行流程
组件化
组件注册

二、Vue生命周期

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

Vue生命周期：就是一个Vue实例从创建 到 销毁 的整个过程。

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

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

2.挂载阶段：渲染模板

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

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DACIFzt7-1693057054325)(assets/1682065937815.png)]

三、Vue生命周期钩子

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dDd6J4Lc-1693057054327)(assets/1682066040295.png)]

<!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><script>const app = new Vue({el: '#app',data: {count: 100,title: '计数器'},// 1. 创建阶段（准备数据）beforeCreate () {console.log('beforeCreate 响应式数据准备好之前', this.count)},created () {console.log('created 响应式数据准备好之后', this.count)// this.数据名 = 请求回来的数据// 可以开始发送初始化渲染的请求了},// 2. 挂载阶段（渲染模板）beforeMount () {console.log('beforeMount 模板渲染之前', document.querySelector('h3').innerHTML)},mounted () {console.log('mounted 模板渲染之后', document.querySelector('h3').innerHTML)// 可以开始操作dom了},// 3. 更新阶段(修改数据 → 更新视图)beforeUpdate () {console.log('beforeUpdate 数据修改了，视图还没更新', document.querySelector('span').innerHTML)},updated () {console.log('updated 数据修改了，视图已经更新', document.querySelector('span').innerHTML)},// 4. 卸载阶段beforeDestroy () {console.log('beforeDestroy, 卸载前')console.log('清除掉一些Vue以外的资源占用，定时器，延时器...')},destroyed () {console.log('destroyed，卸载后')}})</script>
</body>
</html>

四、生命周期钩子小案例

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 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.在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><!-- 初始化样式 --><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>

五、工程化开发和脚手架

1.开发Vue的两种方式

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RTuvPyF3-1693057054329)(assets/1682090039070.png)]

工程化开发模式优点：
- 提高编码效率，比如使用JS新语法、Less/Sass、Typescript等通过webpack都可以编译成浏览器识别的ES3/ES5/CSS等
工程化开发模式问题：
- webpack配置不简单
- 雷同的基础配置
- 缺乏统一的标准

为了解决以上问题，所以我们需要一个工具，生成标准化的配置

2.脚手架Vue CLI

基本介绍：

Vue CLI 是Vue官方提供的一个全局命令工具
可以帮助我们快速创建一个开发Vue项目的标准化基础架子。【集成了webpack配置】

好处：

开箱即用，零配置
内置babel等工具
标准化的webpack配置

使用步骤：

全局安装（只需安装一次即可）

 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.项目目录介绍

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KtCQK5se-1693057054330)(assets/1682092148521.png)]

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

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

2.运行流程

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jHbLh6fy-1693057054331)(assets/1682094032876.png)]

七、组件化开发

组件化：一个页面可以拆分成一个个组件，每个组件有着自己独立的结构、样式、行为
好处：便于维护，利于复用 → 提升开发效率
组件分类：普通组件、根组件

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lvJHfnHX-1693057054331)(assets/1682168852372.png)]

八、根组件 App.vue

1.根组件介绍

整个应用最上层的组件，包裹所有普通小组件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MXGMolcu-1693057054332)(assets/1682169131688.png)]

2.组件是由三部分构成

语法高亮插件
三部分构成
- template：结构（有且只能一个根元素）
- script: js逻辑
- style：样式 (可支持less，需要装包)
让组件支持less

（1） style标签，lang=“less” 开启less功能

（2）装包: yarn add less less-loader -D 或者npm i less less-loader -D

九、普通组件的注册使用-局部注册

1.特点：

只能在注册的组件内使用

2.步骤：

创建.vue文件（三个组成部分）
在使用的组件内先导入再注册，最后使用

3.使用方式：

当成html标签使用即可 <组件名></组件名>

4.注意：

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

5.语法：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Imoz189E-1693057054334)(assets/1682227966812.png)]

// 导入需要注册的组件
// import 组件对象 from '.vue文件路径'
import HmHeader from './components/HmHeader'export default {  // 局部注册components: {// '组件名': 组件对象,HmHeader:HmHeaer,HmHeader // 也可以简写}
}

十、普通组件的注册使用-全局注册

1.特点：

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

2.步骤

创建.vue组件（三个组成部分）
main.js中进行全局注册

3.使用方式

当成HTML标签直接使用

<组件名></组件名>

4.注意

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

5.语法

Vue.component(‘组件名’, 组件对象)

例：

// 导入需要全局注册的组件
import HmButton from './components/HmButton'
Vue.component('HmButton', HmButton)

vue2 生命周期,工程化开发入门

一、今日目标 1.生命周期生命周期介绍生命周期的四个阶段生命周期钩子声明周期案例 2.工程化开发入门工程化开发和脚手架项目运行流程组件化组件注册二、Vue生命周期思考：什么时候可以发送初始化渲染请求？（越早越好）什么…...

编程日记 2023/9/2 22:35:08

Elasticsearch 分布式搜索——聚合

1.聚合的种类聚合常见的有三类： **桶（Bucket）**聚合：用来对文档做分组 TermAggregation：按照文档字段值分组，例如按照品牌值分组、按照国家分组Date Histogram：按照日期阶梯分组，例…...

编程日记 2023/9/2 22:34:06

苹果将在iPhone16系列中引入微透镜阵列技术，亮度更高、功耗更低

根据韩国媒体The Elec的报道，苹果公司正与其主要供应商三星和LG展开合作，以评估并衡量是否有必要在明年的iPhone 16系列中引入微透镜（micro-lens）技术来升级屏幕。这项方案集中在OLED屏幕架构上，计划采用微透镜阵列&…...

编程日记 2023/9/2 22:33:05

Window10 安装 Lua

1、下载地址：https://luabinaries.sourceforge.net/download.html 2、下载 3、解压后共有4个文件，这里我把这几个文件放到如下目录 D:\Program Files\lua-5.4.2\bin 4、定义环境变量 5、打开 powershell，运行 lua54 -v PS C:\Windows\syste…...

编程日记 2023/9/2 22:32:04

Centos替代方案分析（Ubuntu篇）

最受欢迎Linux操作系统在上百个Linux版本中，Ubuntu和CentOS是最受欢迎的开源操作系统，以其稳定性、高性能和广泛的社区支持而闻名。Ubuntu以友好的用户界面和多样的应用程序生态系统吸引着广大用户，适用于桌面和服务器。而CentOS则因其与RH…...

编程日记 2023/9/2 22:31:01

关于计数以及Index返回订单号升级版可以控制年月日累计（不重复）（sqlite）

1数据库创建： RAGMA foreign_keys false;-- ---------------------------- -- Table structure for OrderSIndex -- ---------------------------- DROP TABLE IF EXISTS "OrderSIndex"; CREATE TABLE "OrderSIndex" ("Id" INTEGER…...

编程日记 2023/9/2 22:29:59

前端实现在线预览文件

一、实现word、xls、ppt文件的在线预览功能 1、通过调用微软的在线预览功能， word、ppt、xls文件实现在线预览的方式比较简单可以直接通过调用微软的在线预览功能实现（预览前提：资源必须是公共可访问的） <iframe srchttps://…...

编程日记 2023/9/2 22:28:58

海外有哪些流行的支付方式？

大家好，我是老三，很久没写支付相关的文章了，这期给大家讲一讲，海外都在用哪些支付方式。简介我们先来看下两个主流电商产品的美国站的支付方式： 在国内，想必大家都习惯了支付宝和微信支付二分天下&…...

编程日记 2023/9/2 22:27:56

服务器数据恢复-重组RAID导致RAID6数据丢失的数据恢复案例

服务器数据恢复环境： 一台存储设备中有一组由12块硬盘组建的RAID6磁盘阵列，上层采用EXT3文件系统，共划分3个LUN。服务器故障&分析： 存储设备在运行过程中RAID6阵列突然不可用，管理员对故障存储进行了重新分配RAI…...

编程日记 2023/9/2 22:26:55

Redis数据库持久化---RDB（Redis DataBase）概念与实操

一、概念 1redis提供了两种持久化的方式，分别是RDB（Redis DataBase）和AOF（Append Only File）。 RDB（Redis DataBase）：是在不同的时间点，将redis存储的数据生成快照并存…...

编程日记 2023/9/2 22:25:54

分部署存储Ceph

文章目录 Ceph一.deploy-ceph部署1.系统环境初始化1.1 修改主机名，DNS解析1.2 时间同步1.3 配置apt基础源与ceph源1.4关闭selinux与防火墙1.5 创建 ceph 集群部署用户cephadmin1.6分发密钥 2. ceph部署2.1 安装ceph 部署工具2.2 初始化 mon 节点2.3 安装ceph-mon服务…...

编程日记 2023/9/2 22:24:52

项目：点餐系统3mysql知识回顾MySQL客户端

连接数据库 mysql -uroot -p 密码：空一、第三方库：MySQL 数据库-存储并管理数据的仓库，是一个C/S架构 MySQL客户端通过sql来告诉MySQL服务器，自己需要做什么操作 1.sql语句 sql：structure query language结构化查询…...

编程日记 2023/9/2 22:23:50

docker命令学习

docker vscode插件出现的问题 docker命令 docker images （查看所有的镜像） docker ps -a （查看所有的容器） docker ps （查看运行的容器） docker run imageID docker run --gpus all --shm-size8g -it imag…...

编程日记 2023/9/2 22:22:49

【STM32教程】第二章通用输入输出口GPIO

资料下载链接： 链接：https://pan.baidu.com/s/1hsIibEmsB91xFclJd-YTYA?pwdjauj 提取码：jauj 1. GPIO的基本结构 1.1 概述 GPIO（General Purpose Input Output）意思是通用输入输出口可配置为8种输入输出模式&a…...

编程日记 2023/9/2 22:21:48

2023.9 - java - ArrayList

ArrayList 类是一个可以动态修改的数组，与普通数组的区别就是它是没有固定大小的限制，我们可以添加或删除元素。 ArrayList 继承了 AbstractList ，并实现了 List 接口。 ArrayList 类位于 java.util 包中，使用前需要引入它&…...

编程日记 2023/9/2 22:20:46

记1次前端性能优化之CPU使用率

碰到这样的一个问题，用户反馈页面的图表一直加载不出来，页面还卡死打开链接页面，打开控制台 Network 看到有个请求一直pending，结合用户描述，页面一直loading,似乎验证了我的怀疑：后端迟迟没有相应。但是…...

编程日记 2023/9/2 22:19:44

记一次postgres导致cpu100%

周末想打两把训练赛，没想到朋友发来一个截图我：嗯？？wtf 于是我上服务器看了一下日志，诶我超，还真的查看进程详情 [rootiZ7xv7q4im4c48qen2do2bZ project]# pstree -tp postgres memory(904475)─┬─…...

编程日记 2023/9/2 22:18:41

详谈SpringBoot启动项目后执行自定义方法的方式

在 main 启动函数中调用这个是在所有启动后执行，也是常用之一。 SpringBootApplication public class ListenerApplication {public static void main(String[] args) {SpringApplication.run(ListenerApplication.class, args);System.out.println("启动成…...

编程日记 2023/9/2 22:17:39

KubeAdmin方式搭建K8S(1.26.0)

本次安装K8S版本为1.26.0 服务器环境配置 ip描述配置192.168.233.221master节点CPU（2C） 内存（2G） 硬盘（50G）192.168.233.222node1节点CPU（2C） 内存（2G） 硬盘…...

编程日记 2023/9/2 22:16:38

代码随想录打卡—day57—【编辑距离】— 9.2+9.3 编辑距离系列

1 647. 回文子串 647. 回文子串纯暴力解法，应该是O（n^3），居然AC了： class Solution { public:int countSubstrings(string s) {// 暴力int cnt 0;cout << s.substr(1,1);for(int i 0; i < s.size();i){…...

编程日记 2023/9/2 22:15:37

conda相比python好处

Conda 作为 Python 的环境和包管理工具，相比原生 Python 生态（如 pip 虚拟环境）有许多独特优势，尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处： 一、一站式环境管理&#xff1a…...

编程新知 2025/6/15 5:36:36

PPT|230页| 制造集团企业供应链端到端的数字化解决方案：从需求到结算的全链路业务闭环构建

制造业采购供应链管理是企业运营的核心环节，供应链协同管理在供应链上下游企业之间建立紧密的合作关系，通过信息共享、资源整合、业务协同等方式，实现供应链的全面管理和优化，提高供应链的效率和透明度，降低供应链的成…...

编程新知 2025/7/12 8:24:40

屋顶变身“发电站” ，中天合创屋面分布式光伏发电项目顺利并网！

5月28日，中天合创屋面分布式光伏发电项目顺利并网发电，该项目位于内蒙古自治区鄂尔多斯市乌审旗，项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站，总装机容量为9.96MWp。项目投运后，每年可节约标煤3670…...

编程新知 2025/7/12 10:13:03

基于Docker Compose部署Java微服务项目

一. 创建根项目根项目（父项目）主要用于依赖管理一些需要注意的点： 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件，否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...

编程新知 2025/7/12 9:26:29

Java入门学习详细版（一）

大家好，Java 学习是一个系统学习的过程，核心原则就是“理论实践坚持”，并且需循序渐进，不可过于着急，本篇文章推出的这份详细入门学习资料将带大家从零基础开始，逐步掌握 Java 的核心概念和编程技能。 …...

编程新知 2025/7/10 17:02:29

【开发技术】.Net使用FFmpeg视频特定帧上绘制内容

目录一、目的二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结一、目的当前市场上有很多目标检测智能识别的相关算法，当前调用一个医疗行业的AI识别算法后返回…...

编程新知 2025/7/10 8:45:22

RNN避坑指南：从数学推导到LSTM/GRU工业级部署实战流程

本文较长，建议点赞收藏，以免遗失。更多AI大模型应用开发学习视频及资料，尽在聚客AI学院。本文全面剖析RNN核心原理，深入讲解梯度消失/爆炸问题，并通过LSTM/GRU结构实现解决方案，提供时间序列预测和文本生成…...

编程新知 2025/7/12 9:10:41

08. C#入门系列【类的基本概念】：开启编程世界的奇妙冒险

C#入门系列【类的基本概念】：开启编程世界的奇妙冒险嘿，各位编程小白探险家！欢迎来到 C# 的奇幻大陆！今天咱们要深入探索这片大陆上至关重要的 “建筑”—— 类！别害怕，跟着我，保准让你轻松搞…...

编程新知 2025/7/7 21:19:24

Caliper 配置文件解析：fisco-bcos.json

config.yaml 文件 config.yaml 是 Caliper 的主配置文件，通常包含以下内容： test:name: fisco-bcos-test # 测试名称description: Performance test of FISCO-BCOS # 测试描述workers:type: local # 工作进程类型number: 5 # 工作进程数量monitor:type: - docker- pro…...

编程新知 2025/7/8 4:24:01

【LeetCode】3309. 连接二进制表示可形成的最大数值（递归|回溯|位运算）

LeetCode 3309. 连接二进制表示可形成的最大数值（中等） 题目描述解题思路Java代码题目描述题目链接：LeetCode 3309. 连接二进制表示可形成的最大数值（中等） 给你一个长度为 3 的整数数组 nums。现以某种顺序连接…...

编程新知 2025/7/5 18:01:05

一、今日目标

1.生命周期

2.工程化开发入门

二、Vue生命周期

三、Vue生命周期钩子

四、生命周期钩子小案例

1.在created中发送数据

2.在mounted中获取焦点

五、工程化开发和脚手架

1.开发Vue的两种方式

2.脚手架Vue CLI

基本介绍：

好处：

使用步骤：

六、项目目录介绍和运行流程

1.项目目录介绍

2.运行流程

七、组件化开发

八、根组件 App.vue

1.根组件介绍

2.组件是由三部分构成

九、普通组件的注册使用-局部注册

1.特点：

2.步骤：

3.使用方式：

4.注意：

5.语法：

十、普通组件的注册使用-全局注册

1.特点：

2.步骤

3.使用方式

4.注意

5.语法

相关文章：