Vue学习笔记（三）

v2官网：v2.cn.vuejs.org

引包：

// Vue
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
// axios
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
// echarts
<script src="<https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js>"></script>

Vue生命周期函数（钩子函数）

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

• 创建阶段（准备响应式数据）
  1. beforeCreated()
  2. created() （一般在这个函数中发请求）
• 挂载阶段
  1. beaforMount()
  2. mounted() （在这个阶段中操作）
• 更新阶段
  1. beforeUpdate()
  2. updated()
• 销毁阶段
  1. beforeDestroy()
  2. destroyed()

综合案例 --- 记账清单

• 效果图

• 总结

• 渲染（ 要多次使用，封装为一个方法getList() ）
  1. 立刻发送请求获取数据 created()
  2. 拿到数据，存到data响应式数据中
  3. 结合数据，进行渲染 v-for
  4. 消费统计 computed

• 添加
  1. 收集表单数据 v-model
  2. 给添加按钮注册点击事件，发送添加请求
  3. 重新渲染

• 删除
  1. 注册点击事件，传参id
  2. 根据 id 发送删除请求(注意路径参数的传参格式)
  3. 调用 getList() 重新渲染

• 饼图（使用echarts实现）
  1. echarts官网：echarts.apache.org/
  2. 初始化一个饼图，在 mounted 钩子函数中实现
  3. 在getList()中根据数据实时更新饼图 echarts.setOption({ ... })

git地址：

gitee.com/wiedersehen…

工程化开发 & 脚手架 Vue CLi

• 基本介绍：
  • Vue CLi 是Vue官方提供的一个全局命令工具，可以帮助我们快速创建一个开发Vue项目的标准化框架，并且继承了webpack配置
• 优势
  1. 开箱即用，零配置
  2. 内置babel等工具
  3. 标准化
• 使用步骤

脚手架目录文件 & 项目运行流程

• 脚手架目录文件
• 项目运行流程

组件化开发 & 根组件

• 组件化：页面可拆分成一个个的组件，每个组件有独立的结构、样式、行为
  1. 优势：便于维护，利于复用 ---> 提升开发效率
  2. 组件分类：普通组件、根组件
• 根组件：
  • 整个应用最上层的组件，包裹所有普通小组件
  • 根组件App.vue包含的三个部分
    1. tempate 结构（Vue2中只能有一个根节点）
    2. style样式
    3. script行为

普通组件的注册使用

• 组件注册的两种方式
  1. 局部注册: 只能在注册的组件内使用（单文件组件）
     1. 创建.vue文件（三个组成部分）
     2. 在使用的组件内导入并注册

2. 全局注册：所有的组件内都能使用
   1. 创建.vue组件（单文件组件）
   2. main.js内导入，并全局注册

• 使用
  • 当成html标签使用 <组件名></组件名>
• 注意
  • 使用大驼峰命名法：HmHeader
  • 一般是局部组件，如果发现是通用的，再抽离去全局组件

综合案例 --- 小兔鲜首页

• 页面开发思路
  1. 分析页面，按模块拆分组件，搭架子，根据使用频次进行局部或全局注册
  2. 根据设计图，编写组件 html 结构 css 样式
  3. 拆分封装通用小组件
  4. 通过js动态渲染，实现功能
• 页面结构：

• 最终效果：