2021年12月31日
一、vue：前端框架
其特性体现：数据驱动试图、双向数据绑定
二、vue的指令：
①{{}}语法-插值表达式：优点是不会覆盖元素中默认的文本内容
②属性绑定指令（v-bind）：为元素属性动态绑定属性值，其简写形式（：）
③事件绑定指令（v-on）：用来辅助程序员为 DOM 元素绑定事件监听
通过 v-on 绑定的事件处理函数，需要在 methods 节点中进行声明
其简写形式为（@）
事件修饰符：.prevent阻止默认行为：（例如：阻止 a 连接的跳转、阻止表单的提交等）
@="clearInput"//按键修饰符， 松开esc键触发
④双向绑定指令（v-model）：只能配合表单元素一起使用！
三种修饰符：.number自动转换为数值型、.trim自动过滤首尾空白字符、.lazy在“change”时而非“input”时更新
⑤条件渲染指令（v-if）：按需控制 DOM 的显示与隐藏
⑥列表渲染指令（v-for）：需要使用 item in items 的特殊语法（item 是当前的循环项、items 是待循环的数组）
使用key维护列表的状态：好处有：正确维护列表的状态、复用现有的DOM元素，提升渲染的性能
三、过滤器（Filters）常用于文本的格式化
过滤器可以用在 插值表达式、v-bind 属性绑定
需要在 filters 节点中定义，应该被添加在 JavaScript 表达式的尾部，由“管道符（|）”进行调用
2022年1月1日
一、品牌列表案例（第一天学过知识的应用）
具体见****之前内容
2022年1月2日
一、创建vite的项目并运行
npm init vite-app 项目名称
cd 项目名称
npm install
npm run dev
二、、、（确认预留的el区域）
vue组件的构成：template(组建的模板结构)、script（组件的 JavaScript 行为）、style（组件的样式）
vue 组件渲染期间需要用到的数据，可以定义在data 节点中，
组件中的 data 必须是一个函数，不能直接指向一个数据对象。
为 style 节点提供了 scoped 属性，从而防止组件之间的样式冲突问题。
三、组件的 props
props 是组件的自定义属性，可通过 props 向子组件传递要展示的数据，好处是提高了组件的复用性。
可以使用 v-bind 属性绑定的形式，为组件动态绑定 props 的值
四、Class 与 Style 绑定（不太明白）
通过 v-bind 属性绑定指令，为元素动态绑定 class 属性的值和行内的 style 样式
2022年1月3日
一、props验证
在封装组件时对外界传递过来的props 数据进行合法性的校验，从而防止数据不合法的问题。
数据验证方案：①基础的类型检查 ②多个可能的类型 ③必填项校验 ④属性默认值 ⑤自定义验证函数
二、计算属性
计算属性需要以 function 函数的形式声明到组件的 computed 选项中。
计算属性侧重于得到一个计算的结果，因此计算属性中必须有 return 返回值！
计算属性会缓存计算的结果，只有计算属性的依赖项发生变化时，才会重新进行运算。
三、自定义事件
为了让组件的使用者可以监听到组件内状态的变化。
三步骤：
在封装组件时：
①声明自定义事件：必须事先在 emits 节点中声明
②触发自定义事件：可以通过 this.$emit('自定义事件的名称') 方法进行触发
在使用组件时：
③监听自定义事件：通过 v-on 的形式监听自定义事件
在调用 this.$emit() 方法触发自定义事件时，可以通过第2 个参数为自定义事件传参
四、组件上的v-model
父->子同步数据
① 父组件通过 v-bind: 属性绑定的形式，把数据传递给子组件
② 子组件中，通过 props 接收父组件传递过来的数据
子->父同步数据
① 在 v-bind: 指令之前添加 v-model 指令
② 在子组件中声明 emits 自定义事件，格式为 update:xxx
③ 调用 $emit() 触发自定义事件，更新父组件中的数据
2022年1月4日
一、任务列表案例
具体见****之前内容
2022年1月5日
一、watch侦听器
允许开发者监视数据的变化，从而针对数据的变化做特定的操作。
需要在 watch 节点下，定义自己的侦听器
默认情况下，组件在初次加载完毕后不会调用 watch 侦听器。
如果想让 watch 侦听器立即被调用，则需要使用 immediate 选项。
当 watch 侦听的是一个对象，如果对象中的属性值发生了变化，
则无法被监听到。此时需要使用 deep 选项
计算属性 vs 侦听器
计算属性侧重于监听多个值的变化，最终计算并返回一个新值
侦听器侧重于监听单个数据的变化，最终执行特定的业务处理，不需要有任何返回值
二、watch的生命周期
created:组件在内存中创建完毕、mounted:组件渲染到页面完毕
updated:data数据完成更新、unmounted:组件被销毁完毕
三、组件之间的数据共享
1、父子关系
① 父->子 属性绑定 父组件通过 v-bind 属性绑定向子组件共享数据。同时，子组件需要使用 props 接收数据。
② 子->父 事件绑定 在子组件中声明 emits 自定义事件,调用 $emit() 触发自定义事件，更新父组件中的数据。
③ 父<->子 组件上的v-model
2、兄弟关系
④ EventBus 创建
3、后代关系
⑤ provide & inject 父节点的组件可以通过 provide 方法，对其子孙组件共享数据；子孙节点通过 inject 接收数据
4、全局数据共享
⑥ vuex 全局配置axios
2022年1月6日-2022年1月7日
“购物车案例”
① 初始化项目基本结构
② 封装 EsHeader 组件
允许用户自定义 title 标题内容
允许用户自定义 color 文字颜色
允许用户自定义 bgcolor 背景颜色
允许用户自定义 fsize 字体大小
es-header 组件必须固定定位到页面顶部的位置，高度为 45px，文本居中，z-index 为 999
③ 基于 axios 请求商品列表数据
④ 封装 EsFooter 组件
1. es-footer 组件必须固定定位到 页面底部 的位置，高度为 50px，内容两端贴边对齐，z-index 为 999
2. 允许用户自定义 amount 总价格（单位是元），并在渲染时 保留两位小数
3. 允许用户自定义 total 总数量，并渲染到 结算按钮 中；如果要结算的商品数量为0，则 禁用结算按钮
4. 允许用户自定义 isfull 全选按钮的选中状态
5. 允许用户通过 自定义事件 的形式，监听全选按钮 选中状态的变化 ，并获取到 最新的选中状态
⑤ 封装 EsGoods 组件
1. 实现 EsGoods 组件的基础布局
2. 封装组件的 6 个自定义属性（id, thumb，title，price，count，checked）
3. 封装组件的自定义事件 stateChange ，允许外界监听组件选中状态的变化
⑥ 封装 EsCounter 组件
1. 渲染组件的 基础布局
2. 实现数量值的 加减操作
3. 处理 min 最小值
4. 使用 watch 侦听器处理文本框输入的结果
5. 封装 numChange 自定义事件
