【vue】实训总结

2021年12月31日
一、vue：前端框架
   其特性体现：数据驱动试图、双向数据绑定
二、vue的指令：
   ①{{}}语法-插值表达式：优点是不会覆盖元素中默认的文本内容
   ②属性绑定指令（v-bind）：为元素属性动态绑定属性值，其简写形式（：）
   ③事件绑定指令（v-on）：用来辅助程序员为 DOM 元素绑定事件监听
     通过 v-on 绑定的事件处理函数，需要在 methods 节点中进行声明
     其简写形式为（@）
事件修饰符：.prevent阻止默认行为：（例如：阻止 a 连接的跳转、阻止表单的提交等）
@keyup.esc="clearInput"//按键修饰符，keyup.esc 松开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日
一、品牌列表案例（第一天学过知识的应用）
具体见CSDN之前内容

2022年1月2日
一、创建vite的项目并运行
   npm init vite-app 项目名称
   cd 项目名称
   npm install
   npm run dev
二、App.vue、main.js、index.html（确认预留的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日
一、任务列表案例
具体见CSDN之前内容

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  创建EventBus.js
   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 自定义事件