vue-day03
目录
1第三天课程介绍
2vue生命周期及其四个阶段
问题:
3生命周期案例-初始化渲染和获取焦点
问题:
4小黑记账清单-添加/删除/渲染(2)
5饼图渲染
问题:
6工程化开发和脚手架
7项目目录介绍和运行流程
8组件化开发和根组件
问题:
9普通组件的注册-局部注册
问题:
10普通组件的注册-全局注册
问题:
11小兔鲜首页-拆分模块组件-组件拆分
12小兔鲜首页-实现结构和样式并拆分组件
13总结
1第三天课程介绍
2vue生命周期及其四个阶段
问题:
各自阶段的名称及单词？
各自阶段完成什么工作?
3生命周期案例-初始化渲染和获取焦点
问题:
如何一进页面让搜索框就获取焦点?
在mounter阶段使用foucus();
4小黑记账清单-添加/删除/渲染(2)
动态控制类名样式
axios.get和axios.post传参的区别?
将created中注释的代码封装到method中的getList//因为这个方法通用,增加/删除等涉及修改的都得需要使用
这里面的typeof什么意思?
问题:
axios.get和axios.post传参的区别?
上图有，主要是传参不一样
typeof this.price 的作用是检测 this.price 这个变量的数据类型，然后与字符串 'number' 比较。
5饼图渲染
使用this将它们联系起来,另外在methods只需要修改setOption里面的data数据即可,其它的不动是不会消失的,只会覆盖修改的地方(data)
注意,箭头函数中,如果返回值是一个对象,一定要记得用括号将其包裹住
问题:
ecahrts怎么使用?
6工程化开发和脚手架
里面的命令过时了,去看Javaweb_p150节吧
问题:
注意使用npm --version而不是vue --verison查看版本
7项目目录介绍和运行流程
下面图片解释.$mount('#app')和render的替换写法
8组件化开发和根组件
问题:
template标签下只能有一个div标签,但是可以有多层标签
script标签里面的东西可以写在export default中?
在 Vue 组件的 <script> 标签中，代码写在 export default 里，是因为 Vue 采用模块化思想管理组件，而 export default 是 ES6 模块系统的语法，用于将组件的配置信息 “暴露” 出去，让 Vue 框架能够识别和处理这个组件。
style标签的属性 lang="less"是什么意思 ?
在 Vue 组件的 <style> 标签中，lang="less" 表示该样式代码使用 Less 预处理器语法 编写。
含义与作用
- Less 是一种 CSS 预处理器，它在 CSS 基础上扩展了变量、嵌套、混合（Mixin）、函数等功能，让样式编写更高效、更具维护性。
lang="less"告诉 Vue 编译器：这段样式代码不是普通 CSS，需要先通过 Less 编译器处理，再转换为浏览器可识别的 CSS 代码。- 其实就是可以嵌套的格式()
9普通组件的注册-局部注册
问题:
面两个HmHeader各指什么?
10普通组件的注册-全局注册
问题:
组件对象对应上面的的import的,组件名自己再起就行，最好一样驼峰命名即可
11小兔鲜首页-拆分模块组件-组件拆分
12小兔鲜首页-实现结构和样式并拆分组件
13总结
上面理解可以不看下面
Vue 从入门到实战：核心知识点与项目实践全解析
作为前端开发的三大主流框架之一，Vue 以其渐进式、易上手、生态完善的特点，成为许多开发者入门前端框架的首选。本文将结合 Vue 学习路径中的核心知识点，从生命周期、工程化、组件化到项目实战，为你系统梳理 Vue 开发的关键脉络，助你从 Vue 新手成长为能独立开发项目的实践者。
一、Vue 生命周期：组件的 “成长轨迹”
Vue 实例从创建到销毁的整个过程，被称为生命周期。理解生命周期，能让我们在合适的时机执行代码（如初始化数据、发起请求、操作 DOM 等），是掌握 Vue 组件逻辑的基础。
1. 生命周期的四个核心阶段
Vue 生命周期可分为创建、挂载、更新、销毁四个大阶段，每个阶段对应一组钩子函数：
创建阶段：
beforeCreate：实例刚被创建，数据观测（data 响应式）和事件配置尚未完成，无法访问 data、methods。
created：实例创建完成，data 和 methods 已初始化，可在此发起异步请求（如接口调用），但 DOM 尚未挂载。
挂载阶段：
beforeMount：模板编译完成，但未挂载到页面，$el 为虚拟 DOM。
mounted：DOM 已挂载到页面，可在此操作真实 DOM（如初始化第三方插件、获取 DOM 尺寸）。
更新阶段：
beforeUpdate：数据更新后，DOM 尚未重新渲染，可获取更新前的 DOM 状态。
updated：DOM 已重新渲染，可获取更新后的 DOM 状态。
销毁阶段：
beforeDestroy：实例销毁前调用，可在此清理定时器、解绑事件等。
destroyed：实例已销毁，所有监听和子实例均被销毁。
2. 生命周期的实际应用场景
以 “初始化渲染并获取焦点” 的案例为例：
vue
<template>
<input ref="inputRef" type="text" />
</template>
<script>
export default {
mounted() {
// 挂载完成后，操作真实 DOM 获取焦点
this.$refs.inputRef.focus();
}
};
</script>
在 mounted 钩子中操作 DOM 是最安全的，因为此时 DOM 已完全渲染。
二、工程化开发：从 “手写代码” 到 “高效协作”
Vue 工程化开发依赖脚手架工具，它能帮我们快速搭建项目结构、集成打包工具、规范化开发流程，是企业级项目的必备能力。
1. 脚手架工具：Vue CLI 与 Vite
Vue CLI：Vue 官方早期推出的脚手架，基于 Webpack 构建，功能完善但启动速度较慢。安装与创建项目：
bash
# 全局安装 Vue CLI
npm i @vue/cli -g
# 创建项目
vue create my-vue-project
Vite：新一代构建工具，基于原生 ES 模块，启动速度极快（秒级），是 Vue 3 推荐的脚手架。安装与创建项目：
bash
# 创建项目（Vue 3 模板）
npm create vue@latest
# 进入项目并启动
cd my-vite-project && npm run dev
2. 项目目录与运行流程
以 Vite 搭建的 Vue 3 项目为例，核心目录结构及作用如下：
plaintext
my-vite-project/
├── public/ # 静态资源（如 favicon.ico）
├── src/
│ ├── assets/ # 资源文件（图片、样式）
│ ├── components/ # 公共组件
│ ├── router/ # 路由配置（Vue Router）
│ ├── store/ # 状态管理（Pinia 或 Vuex）
│ ├── views/ # 页面组件
│ ├── App.vue # 根组件
│ └── main.js # 入口文件
└── package.json # 项目依赖与脚本配置
运行流程：main.js 导入 App.vue 并挂载到 index.html 的 #app 节点，App.vue 中通过路由或组件嵌套渲染整个应用。
三、组件化开发：Vue 的 “核心竞争力”
组件化是 Vue 实现代码复用、逻辑解耦的关键机制。一个 Vue 应用由若干个组件嵌套、组合而成，从 “根组件” 到 “业务组件”，构成完整的页面。
1. 根组件与组件树
Vue 项目的入口是 App.vue（根组件），它通过引入其他组件（如头部、侧边栏、内容区）构建页面结构，形成组件树。例如：
vue
<!-- App.vue -->
<template>
<div class="app">
<HmHeader /> <!-- 头部组件 -->
<HmSidebar /> <!-- 侧边栏组件 -->
<router-view /> <!-- 路由视图，渲染页面组件 -->
</div>
</template>
<script>
import HmHeader from './components/HmHeader.vue';
import HmSidebar from './components/HmSidebar.vue';
export default {
components: { HmHeader, HmSidebar }
};
</script>
2. 组件的注册：局部注册与全局注册
组件注册分为局部注册（仅当前组件可用）和全局注册（所有组件可用）。
局部注册：在需要使用组件的文件中，通过 import 引入，再在 components 选项中注册。如上文的 HmHeader 就是局部注册，仅在 App.vue 中可用。
全局注册：在 main.js 中通过 Vue.component（Vue 2）或 app.component（Vue 3）注册，所有组件均可直接使用。示例：
js
// main.js（Vue 3）
import { createApp } from 'vue';
import App from './App.vue';
import HmButton from './components/HmButton.vue';
const app = createApp(App);
// 全局注册 HmButton 组件
app.component('HmButton', HmButton);
app.mount('#app');
全局注册适合通用组件（如按钮、输入框），但会增加打包体积，需谨慎使用。
四、实战项目：从 “理论” 到 “落地”
学习 Vue 的最终目标是独立开发项目。以下以 “小兔鲜电商平台” 和 “数据可视化（饼图渲染）” 为例，展示 Vue 在实际业务中的应用。
1. 项目拆分：模块化与组件化思维
以 “小兔鲜首页” 为例，需将页面按功能模块拆分为组件：
头部组件：Header.vue（包含搜索、导航）
轮播组件：Carousel.vue
分类组件：Category.vue
商品列表组件：GoodsList.vue
每个组件只关注自己的逻辑和样式，通过 props 传递数据、emit 触发事件，实现 “高内聚、低耦合”。
2. 结构与样式拆分：单文件组件的优势
Vue 的单文件组件（.vue） 允许在一个文件中写模板、逻辑、样式，让组件的结构更清晰。以 Header.vue 为例：
vue
<template>
<!-- 模板：页面结构 -->
<header class="header">
<div class="search">搜索框</div>
<nav class="nav">导航菜单</nav>
</header>
</template>
<script>
// 逻辑：数据、方法、生命周期
export default {
data() {
return {
searchText: '请输入商品名称'
};
},
methods: {
handleSearch() {
console.log('搜索内容：', this.searchText);
}
}
};
</script>
<style scoped>
/* 样式：作用域仅当前组件 */
.header {
display: flex;
justify-content: space-between;
}
.search {
width: 300px;
height: 40px;
background: #f5f5f5;
}
</style>
scoped 属性让样式仅作用于当前组件，避免全局样式污染。
3. 数据可视化：饼图渲染（ECharts 结合 Vue）
在 Vue 中集成 ECharts 实现饼图渲染，步骤如下：
安装 ECharts：
bash
npm install echarts
在组件中初始化图表：
vue
<template>
<div ref="chartRef" style="width: 400px; height: 400px;"></div>
</template>
<script>
import * as echarts from 'echarts';
export default {
mounted() {
// 初始化 ECharts 实例
const chart = echarts.init(this.$refs.chartRef);
// 配置饼图选项
const option = {
series: [
{
type: 'pie',
data: [
{ value: 30, name: '商品A' },
{ value: 50, name: '商品B' },
{ value: 20, name: '商品C' }
]
}
]
};
// 渲染图表
chart.setOption(option);
}
};
</script>
五、总结：Vue 学习的 “道” 与 “术”
学习 Vue 不仅是掌握 API 和语法，更要理解其设计思想：
渐进式框架：可根据需求逐步引入 Vue 特性（从简单渲染到路由、状态管理），降低学习成本。
响应式系统：通过 Object.defineProperty（Vue 2）或 Proxy（Vue 3）实现数据与视图的自动同步，让开发者专注于业务逻辑。
组件化思维：将页面拆分为可复用的组件，是大型项目协作和维护的核心保障。
从生命周期的 “底层逻辑”，到工程化的 “效率工具”，再到组件化的 “架构设计”，最后到实战项目的 “落地能力”，这是一条完整的 Vue 学习路径。建议在学习过程中，多动手写 Demo、参与开源项目或搭建个人博客，将知识转化为实际技能。
Vue 的生态还在持续发展（如 Vue 3 对 TypeScript 的更好支持、Pinia 替代 Vuex），保持对新特性的关注，才能在前端领域持续成长。