# Vue2-Vue3练习

**Repository Path**: mengyi-sets-sail/vue2-vue3-exercise

## Basic Information

- **Project Name**: Vue2-Vue3练习
- **Description**: 这是一个Vue的学习手册，从Vue2-Vue3所有的语法的相关知识以及相关案例
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2024-07-05
- **Last Updated**: 2024-10-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# day01 初识Vue
## 01 讲了如何创建一个Vue
## 02 讲了插值表达式的用法
## 03 讲了Vue的响应式

# day02 Vue的指令学习
## 01 讲了解析标签语法v-html:作用：设置元素的innerHTML,语法：v-html="表达式"
## 02 讲了v-show 控制元素显示隐藏；语法：v-show="表达式"表达式值 true 显示，false
## 03 讲了v-if 控制元素显示隐藏（条件渲染,v-if="裴达式表达式值true显示，false隐藏
## 04 讲了if else else-if 的用法
## 05 讲了事件绑定v-on 语法:v-on:事件名="内联语句",v-on:事件名="methods中的函数名"
###    例子:<button v-on:click="count++">按钮</button> 简写:@事件名
## 06 讲了v-bind 语法 v-bind:属性名="表达式"；动态的设置html的标签属性→src url title...
## 07 使用v-show、v-on、v-bind指令做的一个图片切换的小案例
## 08 讲了v-for 基于数据循环，多次渲染整个元素→数组、对象、数字.；
###    语法:v-for="(item, index) in 数组" item是元素，index是数组下标
## 09 做了一个图书馆小案例，功能:用v-for实现内容的遍历,用v-on实现内容的删除
## 10 讲了v-model  给表单元素使用,双向数据绑定→可以快速获取或设置表单元素内容;
###    V-model='变量'; ①数据变化→视图自动更新 ②视图变化→数据自动更新;
## 综合案例 小黑记事本 具体功能：内容的新增、内容的删除、内容的统计、内容的清空

# day03 指令补充-属性计算-侦听器
## 01  指令修饰符 通过""指明一些指令后缀，不同后缀封装了不同的处理操作→简化代码 1.按键修饰符
###     @keyup.enter -> 键盘回车监听
## 02  v-model修饰符  v-model.trim -> 去除首尾空格  v-model.number -> 转数字 
## 03  事件修饰符 @事件名.stop -> 阻止冒泡 @事件名.prevent -> 阻止默认行为 
## 04  v-bind对于样式控制的增强-操作class 语法:class="对象/数组"
###    ①对象→键就是类名，值是布尔值。如果值为true，有这个类，否则没有这个类
###     <div class="box”:class="{ 类名1：布尔值，类名2：布尔值 }"></div>
###     ②数组→数组中所有的类，都会添加到盒子上，本质就是一个 class 列表
###     <div class="box":class="[ 类名1，类名2，类名3]"></div> -->
## 05  核心思路：
###      1.基于数据动态渲染tab → v-for
###      2.准备下标记录高亮的是哪一个tab → activeIndex
###      3．基于下标，动态控制class 类名 -> v-bind:class
###      所谓切换高亮，就是该下标 -->
## 06   v-bind对于样式控制的增强-操作style  语法:style="样式对象"
##      <div class="box":style="{ CSS属性名1：CSS属性值，CSs属性名2：CSS属性值}"></div>
##      适用场景：某个具体属性的动态设置
## 07   v-bind对于样式控制的增强-操作style  语法:style="样式对象" 进度条设置
## 08   V-model应用于其他表单元素，常见的表单元素都可以用v-model绑定关联关→快速获取或设置表##      单元素的值，它会根据控件类型自动选取正确的方法来更新元素
##      输入框input:textI -> value
##      文本域 textarea -> value
##      复选框 input:checkbox -> checked
##      单选框 input:radio -> checked
##      下拉菜单select -> value
## 09   计算属性
##      概念：基于现有的数据，计算出来的新属性。依赖的数据变化，自动重新计算。
##      语法：
##      ①声明在computed 配置项中,一个计算属性对应一个函数
##      ②使用起来和普通属性一样使用{{计算属性名}}
## 10   computed计算属性 vs methods方法
##          computed计算属性：
##          作用：封装了一段对于数据的处理，求得一个结果。
##          语法：
##          ①写在computed配置项中
##          ②作为属性，直接使用 -> this.计算属性 {{计算属性}}
##          methods方法：
##          作用：给实例提供一个方法，调用以处理业务逻辑。
##          语法：
##          ①写在methods配置项中
##          ②作为方法，需要调用 -> this.方法名（）{{方法名（）}} @事件名="方法名"
##          缓存特性（提升性能）：
##          计算属性会对计算出来的结果缓存，再次使用直接读取缓存
##          依赖项变化了，会自动重新计算→并再次缓存
## 11  计算属性完整写法 → 获取 + 设置
##      (1) 当fullName计算属性，被获取求值时，执行get（有缓存，优先读缓存）
##          会将返回值作为，求值的结果
##      (2) 当fullName计算属性，被修改赋值时，执行set
##          修改的值，传递给set方法的形参
## 12  watch侦听器（监视器）
##      作用：监视数据变化，执行一些业务逻辑或异步操作。
##      语法:
##      1.简单写法 -> 简单类型数据，直接监视
##      2.完整写法 -> 添加额外配置项
## 13  watch侦听器（监视器）
##      作用：监视数据变化，执行一些业务逻辑或异步操作。
##      语法:
##      2.完整写法 -> 添加额外配置项 
##      (1)deep:true对复杂类型深度监视
##      (2)immediate:true初始化立刻执行一次handler方法
##      需求：输入内容，修改语言，都实时翻译
## 综合案例一 - 成绩案例 
##          业务技术点总结：
##          1.渲染功能（不及格高亮）
##          v-if v-else v-for v-bind:class
##          2.删除功能
##          点击传参 filter过滤覆盖原数组
##          .prevent阻止默认行为
##          3.添加功能
##          v-model v-model修饰符(.trim.number)
##          unshift修改数组更新视图
##          4.统计总分，求平均分
##          计算属性reduce求和
## 综合案例二 - 购物车案例
##          业务技术点总结：
##          1.渲染功能：:v-if/v-elsev-for:class
##          2.删除功能：点击传参filter过滤覆盖原数组
##          3.修改个数：点击传参find找对象
##          4.全选反选：计算属性computed完整写法get/set
##          5.统计选中的总价和总数量：计算属性computedreduce条件求和
##          6.持久化到本地：watch监视，localStorage，JSON.stringify，JSON.parse

# day04 生命周期
## 01  生命周期的概念：Vue实例从创建到销毁的过程，称为生命周期。
##      ①创建阶段：new Vue()实例化，Vue实例创建，生命周期开始
##      ②运行阶段：Vue实例创建成功，生命周期开始
##      ③销毁阶段：Vue实例销毁，生命周期结束
## 02  生命周期钩子：Vue实例从创建到销毁的过程，自动触发一系列特定名称的方法。
##      created(创建完成)
## 03   mounted(挂载完成)
## 综合案例 小黑记账清单
##          功能需求:
##              1. 基本渲染
##                 1.1 立刻发送请求获取数据created
##                 1.2 拿到数据，存到data的响应式数据中
##                 1.3 结合数据，进行渲染v-for
##                 1.4 消费统计 => 计算属性
##              2. 添加功能
##                 2.1 收集表单数据v-model
##                 2.2 给添加按钮注册点击事件，发送添加请求
##                 2.3 需要重新渲染
##              3. 删除功能
##                 3.1 注册点击事件，传参传id
##                 3.2 根据id发送删除请求
##                 3.3 需要重新渲染
##              4. 饼图渲染
##                 4.1 mounted初始化echarts实例
##                 4.2 渲染函数中setOption动态更新饼图(map)

# day05 工程化开发
## 01  脚手架介绍：
##          工程化开发&脚手架Vue CLI
##          基本介绍：
##             Vue CLI 是Vue官方提供的-全局命令工具
##             可以帮助我们快速创建一个开发Vue项目的标准化基础架子。【集成了webpack配置】
##          好处：
##              1.开箱即用，零配置
##              2.内置置babel等工具
##              3.标准化
##          使用步骤：
##              1.全局安装（一次）：yarn global add@vue/cli或npmi @vue/cli -g
##              2.查看Vue版本：vue--version
##              3.创建项目架子：vue create project-name（项目名-不能用中文）
##              4.启动项目：yarn serve或npm run serve（找package.json）
## 02   普通组件的注册使用-局部注册(只能在注册的组件内使用)
##          ①创建.vue文件(三个组成部分)(单文件组件)
##          ②在使用的组件内导入并注册 components:{组件名：组件对象}
##          使用：当成html标签使用 <组件名></组件名>
##          注意：组件名规范→大驼峰命名法，如：HmHeader
## 03   普通组件的注册使用-全局注册(所有组件内都能使用)
##          ①创建.vue文件(三个组成部分)(单文件组件)
##          ②在main.js中导入并进行全局注册 Vue.component(组件名，组件对象)
##          使用：当成html标签使用 <组件名></组件名>
##          注意：组件名规范→大驼峰命名法，如：HmHeader
## 04   综合案例 - 小兔鲜首页 - 组件拆分
##          页面开发思路：
##              1.分析页面，按模块拆分组件，搭架子（局部或全局注册）
##              2.根据设计图，编写组件html结构css 样式(已准备好)
##              3.拆分封装通用小组件（局部或全局注册）
##              将来→通过js 动态渲染，实现功能
## 05   组件样式冲突 scoped
##          默认情况：写在组件中的样式会全局生效→因此很容易造成多个组件之间的样式冲突问题。
##          1.全局样式：默认组件中的样式会作用到全局
##          2.局部样式：以给组件加上scoped属性，可以让样式只作用于当前组件
## 06   data是一个函数：
##          一个组件的data选项必须是一个函数 -> 保证每个组件实例,维护独立的一份数据对象##          每次创建新的组件实例时，都会执行一次data函数,得到一个新的对象
## 07   什么是组件通信:
##          组件通信：是指组件与组件之间的数据传递。
##          组件的数据是独立的，无法直接访问其他组件的数据。
##          想用其他组件的数据 -> 组件通信
##          父子关系,非父子关系
## 08   父 -> 子
##          父组件通过props向子组件传递数据
## 09   子 -> 父
##          子组件利用$emit通知父组件，进行修改更新
## 10   1.两种组件关系分类 和 对应的组件通信方案
##          父子关系:props & $emit
##          非父子关系:provide & inject 或 eventbus
##          通用方案:vuex
##      2.父子通信方案的核心流程
##          2.1父传子props:
##             ①父中给子添加属性传值② 子props 接收③使用
##          2.2子传父$emit:
##             ①子$emit发送消息②父中给子添加消息监听 ③父中实现处理函数
## 11   什么是prop
##          prop定义:组件上注册的一些自定义属性
##          作用:向子组件传递数据
##          特点:
##              可以传递任意数量的的prop
##              可以传递任意类型的prop
##      props 校验
##          作用：为组件的prop指定验证要求，不符合要求，控制台就会有错误提示→帮助开发者，##                快速发现错误
##          语法：类型校验、非空校验、默认值、自定义校验
## 12   prop & data、单向数据流
##          共同点：都可以给组件提供数据。
##          不同点：
##              data 的数据是自己的→随便改
##              prop 的数据是外部的 →不能直接改，要遵循 单向数据流
##          单向数据流：父级 prop 的数据更新，会向下流动，影响子组件。这个数据流动是单向的
##          口诀:谁的数据谁负责
## 综合案例 小黑记事本
##       核心步骤：
##          ①拆分基础组件
##              新建组件→拆分存放结构→》导入注册使用
##          ②渲染待办任务
##              提供数据(公共父组件)）→父传子传递list→v-for渲染
##          ③添加任务
##              收集数据v-model→监听事件→子传父传递任务→父组件unshift
##          ④删除任务
##              监听删除携带id→子传父传递id→父组件filter 删除
##          ③底部合计和清空功能
##              底部合计：父传子传递list→合计展示
##              清空功能：监听点击→子传父通知父组件→父组件清空
##              持久化存储：watch监视数据变化，持久化到本地
## 13   非父子通信-event bus事件总线
##          作用：非父子组件之间，进行简易消息传递。(复杂场景→ Vuex)
##          步骤：1.创建一个都能访问到的事件总线（空 Vue 实例）→utils/EventBus.js
##                2.A 组件(接收方)，监听 Bus 实例的事件
##                3.B 组件(发送方)，触发 Bus 实例的事件
## 14   非父子通信-provide & inject
##          provide & inject 作用：跨层级共享数据。
##          步骤：1.父组件 provide 提供数据
##                2.子/孙组件 inject 取值使用
## 15   V-model原理：
##      V-model本质上是一个语法糖。例如应用在输入框上，就是value属性和 input事件 的合写。
##          作用：提供数据的双向绑定
##              ① 数据变，视图跟着变:value
##              ② 视图变，数据跟着变 @input
##              注意：$event 用于在模板中，获取事件的形参
## 16   表单类组件封装&v-model简化代码
##          1.表单类组件 封装 → 实现子组件 和 父组件数据 的双向绑定
##          ①父传子：数据应该是父组件 props 传递过来的，v-model拆解绑定数据
##          ②子传父：监听输入，子传父传值给父组件修改
## 17   表单类组件封装&v-model简化代码
##          2.父组件v-model 简化代码，实现子组件和父组件数据双向绑定
##          ①子组件中：props 通过 value 接收，事件触发 input
##          ②父组件中：V-model 给组件直接绑数据（:value+@input）
## 18   总结
##          1.表单类基础组件封装思路
##              ①父传子：父组件动态传递prop数据，拆解v-model，绑定数据
##              ②子传父：监听输入，子传父传值给父组件修改
##              本质：实现了实现子组件和父组件数据的双向绑定
##          2.V-model简化代码的核心步骤
##             ①子组件中：props 通过value 接收，事件触发 input
##             ②父组件中：V-model 给组件直接绑数据
## 19   .sync修饰符
##          作用：可以实现子组件与父组件数据的双向绑定，简化代码
##          特点：prop属性名，可以自定义，非固定为value
##          场景：封装弹框类的基础组件，visible属性true显示false隐藏
##          本质：就是：属性名和@update:属性名合写
## 20   ref和$refs 获取dom元素 
##          作用：利用ref和$refs可以用于获取dom元素。
##          特点：查找范围→当前组件内 (更精确稳定)
##          ①获取dom：
##              1.目标标签-添加ref属性
##              2.恰当时机，通过this.$refs.xxx,获取目标标签
## 21   ref和$refs 获取组件实例
##          ②获取组件
##              1.目标组件－添加ref属性
##              2.通过this.$refs.xxx，获取目标组件，就可以调用组件对象里面的方法
## 22   Vue异步更新、$nextTick
##          需求：编辑标题，编辑框自动聚焦
##              1.点击编辑，显示编辑框
##              2.让编辑框，立刻获取焦点
##          问题：“显示之后”，立刻获取焦点是不能成功的！
##          原因：Vue是异步更新DOM（提升性能）
##              $nextTick:等DOM更新后，才会触发执行此方法里的函数体
##              语法:this.$nextTick(函数体)

## day06 
## 01    自定义指令：
##          1.通过指令的值相关语法，可以应对更复杂指令封装场景
##          2.指令值的语法：
##              ①v-指令名="指令值"，通过等号可以绑定指令的值
##              ②通过binding.value可以拿到指令的值
##              ③通过update 钩子，可以监听指令值的变化，进行dom更新操作
## 02    自定义指令：
##          1.通过指令相关语法，封装了指令v-loading实现了请求的loading效果
##          2．核心思路：
##              （1）准备类名 loading，通过伪元素提供遮罩层
##              （2）添加或移除类名，实现loading蒙层的添加移除
##              （3）利用指令语法，封装v-loading通用指令
##                  inserted钩子中，binding.value判断指令的值，设置默认状态
##                  update 钩子中，binding.value 判断指令的值，更新类名状态
## 05    默认插槽:
##          插槽基本语法：
##              1.组件内需要定制的结构部分，改用<slot></slot>占位
##              2.使用组件时,<MyDialog></MyDialog>标签内部,传入结构替换slot
##          作用：让组件内部的一些结构支持自定义
##          场景：当组件内某一部分结构不确定，想要自定义怎么办?
##              用插槽slot占位封装
## 06    插槽-后备内容:
##          插槽后备内容：封装组件时，可以为预留的<slot>插槽提供后备内容（默认内容）。
##          语法：在<slot>标签内，放置内容，作为默认显示内容
##          效果：外部使用组件时，不传东西，则slot会显示后备内容
##                外部使用组件时，传东西了，则slot整体会被换掉
## 07    插槽-具名插槽:
##          需求：一个组件内有多处结构，需要外部传入标签，进行定制
##          默认插槽：一个的定制位置
##          具名插槽简化语法：
##               1.多个slot使用name属性区分名字
##               2.template配合v-slot:名字来分发对应标签
##               3.V-slot:插槽名可以简化成 #插槽名
##          组件内有多处不确定的结构怎么办?
##              具名插槽
## 08    作用域插槽:
##          作用域插槽：定义slot插槽的同时，是可以传值的。给插槽上可以绑定数据，将来使用组##                     件时可以用。
##          场景：封装表格组件
##              1.父传子，动态渲染表格内容
##              2.利用默认插槽，定制操作列
##              3.删除或查看都需要用到当前项的id，属于组件内部的数据,
##                通过作用域插槽传值绑定，进而使用
##          基本使用步骤：
##             1.给slot标签，以添加属性的方式传值
##             2.所有添加的属性，都会被收集到一个对象中
##             3.在template中，通过`#插槽名="obj"`接收，默认插槽名为default
## 09 商品案例-组件封装  
##         1.my-tag标签组件封装
##              (1)双击显示输入框，输入框获取焦点
##              (2)失去焦点，隐藏输入框                 
##              (3)回显标签信息
##              (4)内容修改，回车→修改标签信息
##         2.my-table表格组件封装
##              (1)动态传递表格数据渲染
##              (2)表头支持用户自定义
##              (3)主体支持用户自定义
##       核心技术点:
##         （1）props父传子 $emit子传父v-model
##         （2）$nextTick自定义指令
##         （3）插槽：具名插槽，作用域插槽
##  10 Vue Router 路由
##         1.版本问题扩展
##             使用Vue2  只能使用Vue Router3.x  Vuex3.x
##             使用Vue3  只能使用Vue Router4.x  Vuex4.x
##             
##         2.Vue Router路由的初步使用 (基础五步+核心步骤两步)
##             五个基础步骤(固定) 
##              1. 下载 ：下载VueRouter模块到当前工程，版本3.6.5
##              npm install vue-router@3.6.5
##              2.引入
##              import VueRouter from 'vue-router'
##              3.安装注册
##              Vue.use(VueRouter)
##              4.创建路由对象
##              const router = new VueRouter()
##              5.注入，将路由对象注入到newVue实例中，建立关联
##              /* new Vue({
##                render: h => h(App),
##                router // 简写 -- 完整写法是 router: router
##              }).$mount('#app') */
##         2个核心步骤
##              1。建组件（views目录），配规则
##              2。准备导航链接，配置路由出口（匹配的组件展示的位置）
## 11  组件存放目录问题(组件分类)
##          分类开来更易维护
##             src/views文件夹
##                 页面组件－页面展示－配合路由用
##             src/components文件夹
##                 复用组件－展示数据－常用于复用

# day07 路由进阶
##  01     路由的封装抽离
###            问题：所有的路由配置都堆在main.js中合适么?
###            目标：将路由模块抽离出来。好处：拆分模块，利于维护
##  02     声明式导航－导航链接
###            需求：实现导航高亮效果
###            vue-router提供了一个全局组件router-link（取代a标签）
###            语法：<router-link to="路由地址">导航文字</router-link>
###            ①能跳转，配置 to 属性指定路径（必须）。本质还是a 标签，to 无需#
##         声明式导航－两个类名
###            说明：我们发现router-link自动给当前导航添加了两个高亮类名
###              router-link-active模糊匹配
###                 to="/find"  =>  地址栏  /find   /find/one   /find/two
###              router-link-exact-active精准匹配
###                 to="/find"  =>  地址栏  /find
##         声明式导航－两个类名 自定义类名
###            说明：router-link的两个高亮类名太长了，我们希望能定制怎么办?
###            语法：<router-link to="路由地址" tag="自定义标签名"></router-link>
###                  //link自定义高亮类名
###                  linkActiveClass: 'active',//配置模糊匹配的类名
###                  linkExactActiveClass: 'exact-active' //配置精确匹配的类名
##  03     声明式导航-跳转传参
###            两种传参方式的区别
###            1.查询参数传参（比较适合传多个参数）
###                  ①跳转：to="/path?参数名=值&参数名2=值"
###                  ②接收：this.$route.query.参数名
###            2.动态路由传参(优雅简洁，传单个参数比较方便)
###                  ①配置动态路由：path:"/path/参数名
###                  ②跳转：to="/path/参数值"
###                  ③获取：$route.params.参数名
##  04     Vue路由 
###             1.重定向
####                 问题：网页打开，url 默认是／路径，未匹配到组件时，会出现空白 
####                 说明：重定向→匹配path后，强制跳转path路径 
####                 语法：{path:匹配路径,redirect:重定向到的路径} 
###             2.404
####                 作用：当路径找不到匹配时，给个提示页面 
####                 位置：配在路由最后 
####                 语法：path:"*"(任意路径)－前面不匹配就命中最后这个 
###             3.模式设置
####                 问题：路由的路径看起来不自然，有#，能否切成真正路径形式?
####                 hash路由(默认)     例如: http://localhost:8080/#/home
####                 history路由(常用)例如：http://localhost:8080/home(后台改规则)
##  05     编程式导航 
###             1.基本跳转
####                 ① path 路径跳转
#####                    语法：this.$router.push('路由路径')
######                      传参数: this.$router.push('/path?参数名=值&参数名2=值')
######                      用$.route.query.参数名解析值  
######                      动态传参: this.$router.push(`/search/${this.inpValue}`) 
######                      用$router.params.参数名解析     
#####                    语法：this.$router.push({path:'路由路径'})
######                      传参数: this.$router.push({path:'/path',query:{参数名
######                                :参数值}})  
######                      用$.route.params.参数名解析值   

####                 ② name 命名路由跳转   -- 通过路由名字跳转 (适合路径名字长的场景) 
#####                    语法：this.$router.push({name:'路由名字'})           
#####                         // 传参：
#####                            query传参 -- 用$router.query.参数名解析
#####                            param传参 -- 用$router.params.参数名解析
#####                            query:{参数名:参数值}，
#####                            params:{参数名:参数值}    

##  06     组件缓存keep-alive
###           1.问题和原因
####           问题：从面经 点到详情页，又点返回，数据重新加载了→希望回到原来的位置
####           原因：路由跳转后，组件被销毁了，返回回来组件又被重建了，所以数据重新被加载了
###           2.keep-alive是什么
####          keep-alive 是Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而####          不是销毁它们。keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也####          不会出现在父组件链中。
####           出现问题：缓存了所有被切换的组件
###           3.解决办法： keep-alive的三个属性 
####          ① include：组件名数组，只有匹配的组件会被缓存
####          ② exclude：组件名数组，任何匹配的组件都不会被缓存
####          ③ max : 最多可以缓存多少组件实例

##  06     综合案例-面经导航
###             1.项目案例实现的基本步骤分哪两大步？
####                 1.配路由：
#####                    ①首页和面经详情，两个一级路由
#####                    ②首页内嵌四个可切换页面(嵌套二级路由)
###             2.嵌套路由的关键配置项是什么？
####                 children
###             3.实现功能
####                 ①首页请求渲染
####                 ②跳转传参到详情页，详情页渲染
####                 ③组件缓存，优化性能
###             4.路由传参两种方式？
####                 ①查询参数传参，$route.query.参数名(适合多个参数)
####                 ②动态路由传参，$route.params.参数名(更简洁直观)
###             5.缓存组件可以用哪个内置组件？
####                 keep-alive
####                 三个属性：include  exclude   max

##  day08
##  01     自定义创建项目
###             安装脚手架(V) -> 创建项目(vue-cli) -> 选择自定义
###             -> Babel/Router/ Css/Linter -> Vue2.x ->VueRouter hash模式
###             -> CSS预处理Less -> ESlint: Standard & Lint on Save
###             -> 配置文件dedicated configfiles
##  02     Vuex 概述 
###             Vuex 是一个 Vue 的 状态管理工具，状态就是数据。
###             某个状态 在 很多个组件 来使用 (个人信息)
###             优势
####                 1.共同维护一份数据，**数据集中化管理**
####                 2.响应式变化
####                 3.操作简洁 (vuex提供了一些辅助函数)
##  03     vuex 的使用 - 创建仓库
###                  1.安装 vuex -> 2.新建 `store/index.js` 专门存放 vuex
###                  3.创建仓库 `store/index.js` ->4 在 main.js 中导入挂载到 Vue 实例上
###                  5.测试打印Vuex
##  04     vuex  核心概念 -state 状态
###                  1.目标：明确如何给仓库提供数据，如何使用仓库的数据
###                  2.使用数据：
####                   ①通过store直接访问
####                   ②通过辅助函数
##  05     vuex 核心概念 -mutations 
###                  1.目标：掌握mutations传参语法
###                  2.提交mutation是可以传递参数的this.$store.commit（'xxx'，参数）
####                   ①提供 mutation 函数（带参数－提交载荷payload）
####                   ②页面中提交调用mutation
###                 3.目标：掌握mutations 的操作流程，来修改 state 数据。（state数据的修###                     改只能通过 mutations）
####                   ①定义mutations对象，对象中存放修改 state的方法
####                   ②件中提交调用mutations，修改state数据
####                   this.$store.commit('方法名')
##  06     辅助函数：mapMutations
###                  1.目标：掌握辅助函数mapMutations，映射方法
###                  2.作用：mapMutations和mapState很像，它是把位于mutations中的方法提取###                  了出来，映射到组件methods中
##  07     vuex 核心概念 -actions
###                  1.目标：明确 actions 的基本语法，处理异步操作
###                  2.需求：一秒钟之后，修改 state 的count 成666。
####                 3.说明：mutations必须是同步的（便于监测数据变化，记录调试）
##  08     辅助函数：mapActions
###                  1.目标：掌握辅助函数mapActions，映射方法
###                  2.作用：mapActions是把位于actions中的方法提取了出来，映射到组件###                          methods中
##  09     vuex 核心概念 -模块module（进阶语法）
###                  1.目标：掌握核心概念module模块的创建
###                  2.作用：由于vuex使用单一状态树，应用的所有状态会集中到一个比较大的对###                          象。当应用变得非常复杂时，store对象就有可能变得相当臃肿。（当###                          项目变得越来越大的时候，Vuex会变得越来越难以维护）
###                  3.解决：模块化，把store拆分成多个模块，每个模块拥有自己的state、###                          mutations、actions、getters、甚至是嵌套子模块。
###                  4.目标：掌握握模块中 state 的访问语法
###                  5.目标: 掌握模块中getters的访问语法
###                  6.目标：掌握模块中中mutation的调用语法

##  day09
##    01  
###                  目标：功能分析，创建项目，构建分析基本结构
###                  1.功能模块分析
####                    ①请求动态渲染购物车，数据存vuex
####                    ②数字框控件修改数据
####                    ③动态计算总价和总数量
###                  2.脚手架新建项目 (注意：勾选vuex)
####                    vue create vue-cart-demo
###                  3.将原本src内容清空，替换成素材的《vuex-cart-准备代码》并分析
##    02
###                  目标：构建cart购物车模块
###                  说明：既然明确数据要存vuex，建议分模块存，购物车数据存cart 模块，将来###                        还会有user 模块，article 模块...
####                    1.新建`store/modules/cart.js
####                    2.挂载到vuex 仓库上`store/index.js"
##    03
###                  目标：请求获取数据存入vuex，映射渲染
####                    1.安装 axios
####                    2.准备actions和mutations
####                    3.调用action获取数据
####                    4.动态渲染  - mapState映射
##    04                
###                  目标：修改数量功能完成     注意：前端vuex数据，后端数据库数据都要更新
####                   1.点击事件
####                   2.页面中dispatch
####                   3.提供action函数
####                   4.提供mutation函数
##    05
###                  目标：底部getters 统计
####                   1.提供 getters
####                   2.使用 getters