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

Vue03

news 2025/7/8 2:36:24

一、今日目标

1.生命周期

2.综合案例-小黑记账清单

3.工程化开发入门

4.综合案例-小兔仙首页

二、Vue生命周期

三、Vue生命周期钩子

四、生命周期钩子小案例

1.在created中发送数据

六、工程化开发模式和脚手架

1.开发Vue的两种方式

2.Vue CLI脚手架

基本介绍：

好处：

创建一个Vue项目的标准基础架子的步骤：

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

1.项目目录介绍

2.运行流程

八、组件化开发

九、根组件 App.vue

1.根组件介绍

2.全部组件都由三部分构成

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

1.特点：

2.步骤：

3.使用组件的方式：

4.注意：

5.案例

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

1.特点：

2.步骤

3.使用

4.注意

5.案例

十二、综合案例

1.小兔仙首页启动项目演示

2.小兔仙组件拆分示意图

3.开发思路

一、今日目标

1.生命周期

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

2.综合案例-小黑记账清单

列表渲染
添加/删除
饼图渲染

3.工程化开发入门

工程化开发和脚手架（之前都是引包开发）
项目运行流程
组件化
组件注册

4.综合案例-小兔仙首页

拆分模块-局部注册
结构样式完善
拆分组件 – 全局注册

二、Vue生命周期

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

初始化请求就是一进页面，就立即从后台拿数据，进行页面的渲染
当响应式数据创建好之后，才能发初始化渲染请求，才能对它修改和赋值
挂载完之后，才能操作dom

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

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

1.在创建阶段：创建响应式数据，将data中的普通数据转换为响应式数据

2.在挂载阶段：基于提供的数据，渲染模板

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

4.在销毁阶段：关闭浏览器就会，销毁Vue实例

三、Vue生命周期钩子

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

Vue生命周期钩子函数写的位置和data配置项同级

重点看created和mounted函数

created函数：在创建响应式数据之后执行，这时可以开始发送初始化渲染请求
mounted函数：在模板渲染完成之后执行，在这一刻开始DOM才算渲染完成，才能操作DOM了
beforeDestroy函数：在Vue实例快销毁的时候执行一些操作

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

六、工程化开发模式和脚手架

1.开发Vue的两种方式

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

工程化开发模式优点：

提高编码效率，比如使用JS新语法、Less/Sass、Typescript等通过webpack都可以编译成浏览器识别的ES3/ES5/CSS等

工程化开发模式问题：

webpack配置不简单
雷同的基础配置
缺乏统一的标准

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

2.Vue CLI脚手架

基本介绍：

Vue CLI 是Vue官方提供的一个全局命令工具

可以帮助我们快速创建一个Vue项目的标准基础架子，就是vue的项目目录。【集成了webpack配置】

好处：

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

创建一个Vue项目的标准基础架子的步骤：

全局安装Vue CLI（只需安装一次即可） yarn global add @vue/cli 或者 npm i @vue/cli -g
1. 前面那个命令安装可能会报找不到命令错误，直接换后面那个命令安装就可以了
查看vue/cli版本，确认是否安装成功： vue --version
创建项目架子：vue create project-name(项目名不能使用中文)
1. 在哪个目录下运行的这个命令，项目就创建在哪个目录下
运行项目：yarn serve 或者 npm run serve(命令不固定，看package.json文件中的scripts)
1. 进入到vue项目的根目录，执行上述命令

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

1.项目目录介绍

虽然脚手架中的文件有很多，目前咱们只需看下面标绿的三个文件和下面这四个即可

node_modules：存放第三方依赖的
public：存放html文件
src：写代码的文件夹
package.json：项目配置文件

index.html 模板文件

<!DOCTYPE html>
<html lang=""><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"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><title><%= htmlWebpackPlugin.options.title %></title></head><body><!-- 用于兼容：给不支持js的浏览器一个提示 --><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><!-- Vue所管理的容器，将来创建结构动态渲染这个容器 --><div id="app"><!-- 工程化开发模式中，这里不再直接编写模板语法，通过App.vue提供结构渲染 --><!-- 将来在App.vue中提供模板，提供结构 --></div><!-- built files will be auto injected --></body>
</html>

main.js 入口文件

//main.js文件的核心作用：导入App.vue，基于App.vue创建结构渲染index.html//1.导入vue核心包
import Vue from 'vue'
//2.导入App.vue根组件
import App from './App.vue'//在console中提示当前处于什么环境（生产环境/开发环境）
Vue.config.productionTip = false//3.实例化Vue，提供render方法，基于App.vue创建结构渲染index.html
new Vue({render: h => h(App),
}).$mount('#app')     //$mount('选择器')作用和 el:'#app' 一样，用于指定Vue要管理的容器

App.vue App根组件

<template><div id="app"><img alt="Vue logo" src="./assets/logo.png"><HelloWorld msg="Welcome to Your Vue.js App"/></div>
</template><script>
import HelloWorld from './components/HelloWorld.vue'export default {name: 'App',components: {HelloWorld}
}
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

所以整体的流程就是：基于App.vue来创建结构，最终渲染index.html里面的id属性为app的盒子

2.运行流程

八、组件化开发

组件化：可以将一个页面拆分成一个个的组件，每个组件都有自己独立的结构、样式、行为，在使用组件时，但组件使用的顺序来渲染。

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

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

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

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

九、根组件 App.vue

1.根组件介绍

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

2.全部组件都由三部分构成

语法高亮插件

三部分构成

template标签：结构（有且只能一个根元素）
script标签: js逻辑
style标签：样式 (可支持less，需要装包)

<template><!-- 这里面写HTML标签 -->
</template><script>
//export default中导出当前组件的配置项  
//里面可以提供data methods computed watch 生命周期八大钩子函数
export default {}
</script><style><!-- 这里面写CSS样式 -->
</style>

让组件支持less

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

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

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

1.特点：

局部注册的组件 只能在注册的组件内使用

2.步骤：

先在components目录下，创建.vue组件(文件)（三个组成部分）
在要使用的组件内，先导入组件（在script标签中导入组件），再注册组件（在components配置项中注册组件），最后使用组件（注册组件的时候如果组件名和组件对象同名，则只用写组件名即可）

3.使用组件的方式：

和使用html标签一样：<组件名></组件名>

4.注意：

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

5.案例

components目录下的HmHeader.vue文件：

<template><div class="hm-header">我是hm-header</div>
</template><script>
export default {}
</script><style>
.hm-header{height: 100px;line-height: 100px;text-align: center;font-size: 30px;background-color: rgb(196, 45, 207);color: white;
}
</style>

components目录下的HmMain.vue文件：

<template><div class="hm-main">我是hm-main</div></template><script>export default {}</script><style>.hm-main{height: 400px;line-height: 400px;text-align: center;font-size: 30px;background-color: coral;color: white;margin: 20px 0;}</style>

components目录下的HmFooter.vue文件：

<template><div class="hm-footer">我是hm-footer</div></template><script>export default {}</script><style>.hm-footer{height: 100px;line-height: 100px;text-align: center;font-size: 30px;background-color: rgb(20, 32, 211);color: white;}</style>

App.vue根组件：

<template><div class="App"><!-- 头部组件 --><HmHeader></HmHeader><!-- 主体组件 --><HmMain></HmMain><!-- 底部组件 --><HmFooter></HmFooter></div>
</template><script>
import HmHeader from './components/HmHeader.vue'
import HmMain from './components/HmMain.vue'
import HmFooter from './components/HmFooter.vue'
export default {components: {HmHeader: HmHeader,HmMain,HmFooter},
}
</script><style>
.App {width: 600px;height: 700px;background-color: #459cc8;margin: 0 auto;padding: 20px;
}
</style>

运行vue项目：

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

1.特点：

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

通用的组件可以进行全局注册。

2.步骤

在components目录下，创建.vue组件(文件)（三个组成部分）
main.js中，全局注册组件

3.使用

当成HTML标签直接使用

<组件名></组件名>

4.注意

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

5.案例

1.先在components目录下创建HmButton.vue组件(文件)

<template><button class="hm-button">通用按钮</button>
</template><script>
export default {}
</script><style>
.hm-button {height: 50px;line-height: 50px;padding: 0 20px;background-color: #3bae56;border-radius: 5px;
}
</style>

2.然后在main.js中进行全局注册

import Vue from 'vue'
import App from './App.vue'
import HmButton from './components/HmButton.vue'Vue.config.productionTip = false//全局注册组件
Vue.component('HmButton', HmButton)new Vue({render: h => h(App),
}).$mount('#app')

3.最后在要使用的组件里面使用

<template><div class="hm-main">我是hm-main<HmButton></HmButton></div></template><script>export default {}</script><style>.hm-main{height: 400px;line-height: 400px;text-align: center;font-size: 30px;background-color: coral;color: white;margin: 20px 0;}</style>

十二、综合案例

1.小兔仙首页启动项目演示

2.小兔仙组件拆分示意图

3.开发思路

分析页面，按模块拆分组件，如上图，搭架子 (局部或全局注册)
根据设计图，编写组件 html 结构 css 样式 (已准备好)
拆分封装通用的小组件 (局部或全局注册)

将来 → 通过 js 动态渲染，实现功能

Vue03

目录一、今日目标 1.生命周期 2.综合案例-小黑记账清单 3.工程化开发入门 4.综合案例-小兔仙首页二、Vue生命周期三、Vue生命周期钩子四、生命周期钩子小案例 1.在created中发送数据六、工程化开发模式和脚手架 1.开发Vue的两种方式 2.Vue CLI脚手架基本介绍…...

编程日记 2024/12/8 13:34:45

深入浅出：Gin框架路由与HTTP请求处理

深入浅出：Gin框架路由与HTTP请求处理引言在Web开发中，路由和HTTP请求处理是构建API的核心部分。Gin框架作为Go语言中最受欢迎的Web框架之一，提供了简洁而强大的工具来处理这些任务。本文将深入浅出地介绍如何使用Gin框架进行路由定义、处…...

编程日记 2024/12/8 13:32:41

C++初阶——模板初阶

目录 1、如何实现一个通用的交换函数 2、函数模板 2.1 函数模板的概念 2.2 函数模板的格式 2.3 函数模板的原理 2.4 函数模板的实例化 2.5 模板参数的匹配原则 3、类模板 3.1 类模板的格式 3.2 类模板的实例化 1、如何实现一个通用的交换函数 void Swap(int& lef…...

编程日记 2024/12/8 13:31:38

y3编辑器文档3：物体编辑器

文章目录一、物体编辑器简介1.1 界面介绍1.2 复用（导入导出）1.3 收藏夹（项目资源管理）1.4 对象池二、单位2.1 数据设置2.2 表现设置2.3 单位势力和掉率设置2.4 技能添加和技能参数修改2.5 商店2.5.1 商店属性设置2.5.2 商店物品设置三、装饰物3.1 属性编辑3.2 碰撞体积四、…...

编程日记 2024/12/8 13:29:34

Linux-USB驱动实验

USB 是很常用的接口，目前大多数的设备都是 USB 接口的，比如鼠标、键盘、USB 摄像头等，我们在实际开发中也常常遇到 USB 接口的设备，本章我们就来学习一下如何使能 Linux内核自带的 USB 驱动。注意！本章并不讲解具体的 …...

编程日记 2024/12/8 13:26:30

【配置查询】.NET开源 ORM 框架 SqlSugar 系列

.NET开源 ORM 框架 SqlSugar 系列【开篇】.NET开源 ORM 框架 SqlSugar 系列【入门必看】.NET开源 ORM 框架 SqlSugar 系列【实体配置】.NET开源 ORM 框架 SqlSugar 系列【Db First】.NET开源 ORM 框架 SqlSugar 系列【Code First】.NET开源 ORM 框架 SqlSugar 系列【数据事务…...

编程日记 2024/12/8 13:25:29

JavaWeb学习--cookie和session

目录 （一）Cookie概述 1.什么叫Cookie 2.Cookie规范 3.Cookie的覆盖 4.cookie的最大存活时间 （Cookie的生命） （二） Cookie的API 1.创建Cookie：new 构造方法 2.保存到客户端浏…...

编程日记 2024/12/8 13:24:28

Next.js系统性教学：动态路由与并行路由

更多有关Next.js教程，请查阅： 【目录】Next.js 独立开发系列教程-CSDN博客目录 1. 动态路由 (Dynamic Routes) 1.1 动态路由的基础 1.2 获取动态参数 1.3 动态嵌套路由 1.4 捕获所有动态路由 2. 并行路由 (Parallel Routes) 2.1 并行路由的基础…...

编程日记 2024/12/8 13:22:24

Backblaze 2024 Q3硬盘故障质量报告解读

作为一家在2021年在美国纳斯达克上市的云端备份公司，Backblaze一直保持着对外定期发布HDD和SSD的故障率稳定性质量报告，给大家提供了一份真实应用场景下的稳定性分析参考数据： 以往报告解读系列参考： Backblaze发布2024 Q2硬盘故障…...

编程日记 2024/12/8 13:20:21

[创业之路-179]：《领先的密码 - BLM核心方法体系与企业实践》主要章节与主要内容

目录前言： 1、引言或概述 2、BLM方法论的背景与起源 3、BLM方法论的发展与完善 4、BLM方法论的重要性与价值 5、本书的内容与结构二、BLM核心方法体系 1. 领先的起点 2. 领先的战略 3. 领先的执行 4. 领先之魂三、本书的核心思想 1、以战略为核心 …...

编程日记 2024/12/8 13:17:17

uniapp的生命周期

在 UniApp 中，生命周期函数是指在组件（如页面、视图等）创建和销毁过程中会自动触发的一些函数。UniApp 提供了多种生命周期函数，帮助开发者在适当的时机进行相关的逻辑处理。 UniApp 的生命周期函数可以分为页面生命周期和组件…...

编程日记 2024/12/8 13:14:12

基于 RNN(GRU, LSTM)+CNN 的红点位置检测（pytorch）

文章目录 1 项目背景2 数据集3 思路4 实验结果5 代码 1 项目背景需要在图片精确识别三跟红线所在的位置，并输出这三个像素的位置。其中，每跟红线占据不止一个像素，并且像素颜色也并不是饱和度和亮度极高的红黑配色，每个红线放大…...

编程日记 2024/12/8 13:13:09

文章目录 LMDeploy 量化部署实践闯关任务环境配置W4A16 量化 KV cacheKV cache 量化Function call LMDeploy 量化部署实践闯关任务环境配置 conda create -n lmdeploy python3.10 -y conda activate lmdeploy conda install pytorch2.1.2 torchvision0.16.2 torchaudio2.1.…...

编程日记 2024/12/8 13:09:05

verilog编程规范

verilog编程规范文章目录 verilog编程规范前言一、代码划分二、verilog编码ABCDEFG 前言高内聚，低耦合，干净清爽的代码一、代码划分高内聚： 一个功能一个模块干净的接口提取公共的代码低耦合： 模块之间低耦合尽量用少量…...

编程日记 2024/12/8 13:08:02

飞飞5.4游戏源码（客户端+服务端+工具完整源代码+5.3fix+5.4patch+数据库可编译进游戏）

飞飞5.4游戏源码（客户端服务端工具完整源代码5.3fix5.4patch数据库可编译进游戏） 下载地址： 通过网盘分享的文件：【源码】飞飞5.4游戏源码（客户端服务端工具完整源代码5.3fix5.4patch数据库可编译进游戏） 链…...

编程日记 2024/12/8 13:04:57

【MySQL】——用一文领悟表的增删查改

目录前言 🍃1.表的增加 🍙1.1增——insert 🍙1.2插入否则更新 🍤1.2.1影响行说明 🍂2.表的查询 🍘2.1查询——select 🍘2.2特殊表查询 🍥2.2.1添加表达式 🍥…...

编程日记 2024/12/8 12:55:45

Zabbix监控Oracle 19c数据库完整配置指南

Zabbix监控Oracle 19c数据库完整配置指南本文将详细介绍如何使用Zabbix配置Oracle 19c数据库监控，包括安装、配置、问题排查等全过程。本指南适合新手独立完成配置。 1. 环境准备 1.1 系统要求 Oracle 19c数据库服务器Zabbix服务器（版本5.0或更高&a…...

编程日记 2024/12/8 12:54:44

静态路由与交换机配置实验

1.建立网络拓扑添加2台计算机，标签名为PC0、PC1；添加2台二层交换机2960，标签名为S0、S1；添加2台路由器2811，标签名为R0、R1；交换机划分的VLAN及端口根据如下拓扑图，使用直通线、DCE串口线连接…...

编程日记 2024/12/8 12:52:41

【jvm】讲讲jvm中的gc

目录 1. 说明2. 主要算法2.1 标记-清除算法2.2 复制算法2.3 标记-整理算法3. 主要回收器3.1 Serial GC3.2 Parallel GC3.3 CMS（Concurrent Mark-Sweep）GC3.4 G1（Garbage-First）GC 4. 触发条件4.1 Minor GC（Young GC&am…...

编程日记 2024/12/8 12:50:37

openlayers地图事件

OpenLayers是一个开源的JavaScript库，用于在Web上创建交互式地图。它提供了许多地图事件，使用户可以与地图进行交互。以下是OpenLayers常用的地图事件： 1. click：当用户单击地图时触发该事件。 2. dblclick：当用户双…...

编程日记 2024/12/8 12:47:33

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 （1）连接查询（JOIN） 内连接（INNER JOIN）：返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

编程新知 2025/6/19 11:42:45

8k长序列建模，蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂（如抗体、抑制肽）在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上，高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术，但这类方法普遍面临资源消耗巨大、研发周期冗长…...

编程新知 2025/7/6 20:12:25

Axios请求超时重发机制

Axios 超时重新请求实现方案在 Axios 中实现超时重新请求可以通过以下几种方式： 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...

编程新知 2025/6/21 10:09:08

QT： `long long` 类型转换为 `QString` 2025.6.5

在 Qt 中，将 long long 类型转换为 QString 可以通过以下两种常用方法实现： 方法 1：使用 QString::number() 直接调用 QString 的静态方法 number()，将数值转换为字符串： long long value 1234567890123456789LL; …...

编程新知 2025/7/7 18:16:51

逻辑回归暴力训练预测金融欺诈

简述「使用逻辑回归暴力预测金融欺诈，并不断增加特征维度持续测试」的做法，体现了一种逐步建模与迭代验证的实验思路，在金融欺诈检测中非常有价值，本文作为一篇回顾性记录了早年间公司给某行做反欺诈预测用到的技术和思路。百度…...

编程新知 2025/7/5 23:00:12

[ACTF2020 新生赛]Include 1(php://filter伪协议)

题目做法启动靶机，点进去点进去查看URL，有 ?fileflag.php说明存在文件包含，原理是php://filter 协议当它与包含函数结合时，php://filter流会被当作php文件执行。用php://filter加编码，能让PHP把文件内容…...

编程新知 2025/7/7 16:10:51

鸿蒙HarmonyOS 5军旗小游戏实现指南

1. 项目概述本军旗小游戏基于鸿蒙HarmonyOS 5开发，采用DevEco Studio实现，包含完整的游戏逻辑和UI界面。 2. 项目结构 /src/main/java/com/example/militarychess/├── MainAbilitySlice.java // 主界面├── GameView.java // 游戏核…...

编程新知 2025/6/16 1:59:32

TJCTF 2025

还以为是天津的。这个比较容易，虽然绕了点弯，可还是把CP AK了，不过我会的别人也会，还是没啥名次。记录一下吧。 Crypto bacon-bits with open(flag.txt) as f: flag f.read().strip() with open(text.txt) as t: text t.read…...

编程新知 2025/7/6 0:42:40

数据分析六部曲？

引言上一章我们说到了数据分析六部曲，何谓六部曲呢？ 其实啊，数据分析没那么难，只要掌握了下面这六个步骤，也就是数据分析六部曲，就算你是个啥都不懂的小白，也能慢慢上手做数据分析啦。第一…...

编程新知 2025/7/7 1:14:55

C++ 类基础：封装、继承、多态与多线程模板实现

前言 C 是一门强大的面向对象编程语言，而类（Class）作为其核心特性之一，是理解和使用 C 的关键。本文将深入探讨 C 类的基本特性，包括封装、继承和多态，同时讨论类中的权限控制，并展示如何使用类…...

编程新知 2025/7/6 12:05:57

一、今日目标

1.生命周期

2.综合案例-小黑记账清单

3.工程化开发入门

4.综合案例-小兔仙首页

二、Vue生命周期

三、Vue生命周期钩子

四、生命周期钩子小案例

1.在created中发送数据

六、工程化开发模式和脚手架

1.开发Vue的两种方式

2.Vue CLI脚手架

基本介绍：

好处：

创建一个Vue项目的标准基础架子的步骤：

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

1.项目目录介绍

2.运行流程

八、组件化开发

九、根组件 App.vue

1.根组件介绍

2.全部组件都由三部分构成

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

1.特点：

2.步骤：

3.使用组件的方式：

4.注意：

5.案例

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

1.特点：

2.步骤

3.使用

4.注意

5.案例

十二、综合案例

1.小兔仙首页启动项目演示

2.小兔仙组件拆分示意图

3.开发思路

相关文章：