【无标题】复习式HTML CSS

选中后面所有的

Ctrl +D

点击修改按钮 实现编辑修改

contenteditable=“bianJi” 想修改哪里的文本内容就写在那个标签 默认值是false

@click=“Gai()”

Gai(){
this.bianJi=true
}

删除

步骤：注册点击事件 传id @click=“del(item.id)”
根据id删除 del(id){}

删除函数
methods:{
del(id){
this.list=this.list.filter(item=>item.id!==id)
}
}
filter( 保留项 => 保留条件)
filter：根据条件，保留满足条件的对应项，得到一个新数组，但是并不会直接取代旧数组，所以得赋值给原数组

离开页面时销毁

写在destoryed(){}

验证码 剩余x秒 或 发送验证码 标签中引用

{{ 判断语句(结果true或false) ? true执行 : false执行${引用某个变量} }}

接口 解构 变量定义

const {data : {接口属性1,接口属性2…}}

在当前组件下的template下

想使用该组件script 里的方法或变量，不需要加this.
但在同一个script里想用其他的变量和方法则需要加list

依赖冲突

依赖冲突： --legacy-peer-deps -

微信导航栏点击展示

//代替a标签使用,vant时在外部标签加个route，内部标签加 to:“/path的值”，再加个指定位置的出口标签即可实现

向下复制

Shift + Alt + 向下键

配置一级路由

@/views下新建以及每个路由文件（文件名全小写），
且在每个路由文件下再创建一个主核心文件index.vue（export default里加name,名字如LayoutIndex）

@/router/index.js里添加：
import (可现命名)组件名 from ‘@/views/.vue文件所在文件，可以省略.vue文件不写’(二级路由要写)
{path:‘设置地址栏路径比如/rearch’,component:上面import的组件名} */

Vuex模块化的使用小结

1.直接使用

1. state --> $store.state.模块名.数据项名
2. getters --> $store.getters[‘模块名/属性名’]
3. mutations > $–store.commit(‘模块名/方法名’, 其他参数)
4. actions --> $store.dispatch(‘模块名/方法名’, 其他参数)

2.借助辅助方法使用

1.import { mapXxxx, mapXxx } from ‘vuex’

computed、methods: {

​ // …mapState、…mapGetters放computed中；
​ // …mapMutations、…mapActions放methods中；
​ …mapXxxx(‘模块名’, [‘数据项|方法’]),

​ …mapXxxx(‘模块名’, { 新的名字: 原来的名字 }),

}

2.组件中直接使用 属性 {{ age }} 或 方法 @click="updateAge(2)"

动态路由传参 (优雅简洁，传单个参数比较方便)

1. 配置动态路由：path: “/path/:参数名”
   /search/:words 表示，必须要传参数。如果不传参数，也希望匹配，可以加个可选符"？"

2. 跳转：to=“/path/参数值”

3. 获取：$route.params.参数名
   （path即地址路径）

注意：动态路由也可以传多个参数，但一般只传一个

健忘解释

route:[
{path:‘/find’,component:Find }
]

发现音乐//代替a标签使用,vant时在外部标签加个route，内部标签加 to:“/path的值”，再加个指定位置的出口标签即可实现

path：地址栏路径（跟a标签或者router-link
搭配使用，即 点击->跳转 ）
component:跳转到的组件名（页面.vue）

lang="less"嵌套属性，减少代码量 */

子想改父里边的数据需要标签里加

：value=“value”

只展示其中一个

v-if 搭配 v-else

双击点击事件

@dblclick=“handleClick”

失去焦点隐藏

@blur="名 = false "
false看情况改

vue-test1

Project setup

npm install

打开运行台

Ctrl + `

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

一次多光标（同一列）

Shift + Alt + 目的行数位置

所有的折叠

Ctrl + k ,Ctrl + 0（上面的）

所有的展开

Ctrl + k ,Ctrl + J

渲染“是否”时 对象属性 isSingle给true 变成“是”的方法

{isSingle ? ‘是’：‘否’}}

渲染数据

1.提供数据 -> 提供在公共的父组件 App.vue
2.通过父传子，将数据传递给 子组件
3.v-for渲染

点击添加数据：

1.收集表单数据 -> v-model=“todoName” (data加 todoName=‘’)
2.监听事件（回车，点击都添加） 回车：在input标签处添加 @keyup.enter=“添加事件”
3.子传父，将任务名称传递给父组件App.vue
4.进行添加unshift(自己的数据自己负责)
headleAdd(){
this.list.unshift({
id: +new Date(),
name:todoName
})

}

此内容包括：
第一阶段 Vue2核心技术 路由插件Vue Router 状态管理插件Vuex

  二阶   移动端智慧商城项目 vant ESlint

  三阶   Vue核心技术 

  四阶   PC端大事件管理系统  组件库：Element   

day01

一、为什么要学习Vue

1.前端必备技能

2.岗位多，绝大互联网公司都在使用Vue

3.提高开发效率

4.高薪必备技能（Vue2+Vue3）

二、什么是Vue

概念：Vue (读音 /vjuː/，类似于 view) 是一套 **构建用户界面 ** 的 渐进式 框架

Vue2官网：https://v2.cn.vuejs.org/

1.什么是构建用户界面

基于数据渲染出用户可以看到的界面

2.什么是渐进式

所谓渐进式就是循序渐进，不一定非得把Vue中的所有API都学完才能开发Vue，可以学一点开发一点

Vue的两种开发方式：

1. Vue核心包开发

   场景：局部模块改造

2. Vue核心包&Vue插件&工程化

   场景：整站开发

3.什么是框架

所谓框架：就是一套完整的解决方案

举个栗子

如果把一个完整的项目比喻为一个装修好的房子，那么框架就是一个毛坯房。

我们只需要在“毛坯房”的基础上，增加功能代码即可。

提到框架，不得不提一下库。

• 库，类似工具箱，是一堆方法的集合，比如 axios、lodash、echarts等
• 框架，是一套完整的解决方案，实现了大部分功能，我们只需要按照一定的规则去编码即可。

框架的特点：有一套必须让开发者遵守的规则或者约束

咱们学框架就是学习的这些规则 官网

总结：什么是Vue？

Vue是什么：

什么是构建用户界面：

什么是渐进式：

什么是框架：

三、创建Vue实例

我们已经知道了Vue框架可以 基于数据帮助我们渲染出用户界面

html文件写vue

核心步骤（4步）：

1. 准备容器 例如 div 想在html里写vue

2. 引包（官网） — (开发版本 常用)/生产版本
   引入在线链接

3. 创建Vue实例 new Vue({ })

4. 指定配置项，渲染数据

   1. el:指定挂载点
   2. data提供数据

const app = new Vue({

		el: '#app',     
<!-- 通过 data 提供数据 -->
		data: {
     msg:"666"
  }

})

四、插值表达式 {{ }}

插值表达式是一种 Vue 的模板语法

利用 插值表达式 渲染出 Vue 0提供的数据

1.作用：利用表达式进行插值，渲染到页面中

表达式：是可以被求值的代码，JS引擎会讲其计算出一个结果

以下的情况都是表达式：

加减乘除：
    money + 100
    money - 100
    money * 10
    money / 10 

判断语句
    price >= 100 ? '真贵':'还行'

对象里的某个值
    obj.name
    data里的 对象名.变量名

列表索引
    arr[0]

函数
  fn()

obj.fn()

2.语法

插值表达式语法：{{ 表达式 }}

<h3>{{title}}<h3>

<p>{{nickName.toUpperCase()}}</p>  字母大写

<p>{{age >= 18 ? '成年':'未成年'}}</p>  判断语句

<p>{{obj.name}}</p>     data里的 对象名.变量名

<p>{{fn()}}</p>        方法名

3.错误用法

1.在插值表达式中使用的数据 必须在data中进行了提供
<p>{{hobby}}</p>  //如果在data中不存在 则会报错

2.支持的是表达式，而非语句，比如：if   for ...
<p>{{if}}</p>

3.不能在标签属性中使用 {{  }} 插值 (插值表达式只能标签中间使用)
<p title="{{username}}">我是P标签</p>

4.总结

{{ }}
1.插值表达式的作用是什么
利用表达式进行插值，将数据渲染页面中

2.语法是什么
{{表达式}}

3.插值表达式的注意事项

data中存在的数据才可以

if else之类的语句禁止

标签内禁用

五、响应式特性

Vue的核心特性之一：想要更新展示的视图，根据 业务核心逻辑 修改数据

1.什么是响应式？

​ 简单理解就是数据变，视图对应变。

2.如何访问 和 修改 data中的数据（响应式演示）

data中的数据, 最终会被添加到实例上

① 访问数据： 实例.属性名
实例即app.

② 修改数据： 实例.属性名 = 新值

3.总结

1. 什么是响应式
   数据改变，视图自动更新

2. 如何访问和修改data中的数据呢
   控制台：
   app.属性名
   app.属性名 = 新值
   这种方法有点麻烦，可以使用Vue开发者工具进行，如下

六、Vue开发者工具安装 新电脑安装 调试工具

1. 通过谷歌应用商店安装（国外网站）

2. 极简插件下载（推荐） https://chrome.zzzmh.cn/index
   下载步骤：搜索Vue 选择VueDevtools 推荐下载 下载解压

安装步骤： 下载
开发者模式 （打开Chrome 右上角三个点 更多工具 扩展程序 右上角打开开发者模式）
拖拽更新 （将下载好的.crx文件拖到大屏）
插件详情允许访问文件 （详情信息 打开允许访问文件网址）

安装之后可以F12后看到多一个Vue的调试面板，可以拖前面来

七、Vue中的常用指令

概念：指令（Directives）是 Vue 提供的带有
v- 前缀
的 特殊 标签属性。

为啥要学：提高程序员操作 DOM 的效率。

vue 中的指令按照不同的用途可以分为如下 6 大类：

• 内容渲染指令（v-html、v-text）
• 条件渲染指令（v-show、v-if、v-else、v-else-if）
• 事件绑定指令（v-on）
• 属性绑定指令 （v-bind）
• 双向绑定指令（v-model）
• 列表渲染指令（v-for）

指令是 vue 开发中最基础、最常用、最简单的知识点。

八、内容渲染指令 v-html=" "

• v-html（类似 innerHTML） 可以解析 data里的标签属性，拼接在标签里的文字后面

• • 使用语法：<p v-html="intro">hello</p>，意思是将 intro 值渲染到 p 标签中
  • 类似 innerHTML，使用该语法，会覆盖 p 标签原有内容
  • 类似 innerHTML，使用该语法，能够将HTML标签的样式呈现出来。

  <div id="app">
    <h2>个人信息</h2>
	// 既然指令是vue提供的特殊的html属性，所以咱们写的时候就当成属性来用即可
    <p v-text="uname">姓名：</p> 
    <p v-html="intro">简介：</p>
  </div> 

<script>
        const app = new Vue({
            el:'#app',
            data:{
                uname:'张三',
                intro:'<h2>这是一个<strong>非常优秀</strong>的boy<h2>'
            }
        })
</script>

九、条件渲染指令 显示与隐藏 v-show=" " v-if=" " v-else=" " v-else-if=" 判断语句 "

条件判断指令，用来辅助开发者按需控制 DOM 的显示与隐藏。条件渲染指令有如下两个，分别是：
区别：v-show是 虽然隐藏了但是还存在那个块
v-if是 一旦隐藏了就会彻底消失

1. v-show

   1. 作用： 简单 控制元素显示隐藏
   2. 语法： v-show = “表达式” 表达式值为 true 显示， false 隐藏
   3. 原理： css 中的 display:none
   4. 场景： 频繁切换显示隐藏的场景 经常显示或者隐藏
      例如：鼠标悬停时展示的列表

2. v-if

   1. 作用： 控制元素显示隐藏（条件渲染）
   2. 语法： v-if= “表达式” 表达式值 true显示， false 隐藏
   3. 原理： 基于条件判断，是否创建 或 移除元素节点
   4. 场景： 要么显示 ,要么隐藏 ,不频繁切换的场景
      例如：为方便您购买，请提前登录 立即登录 （根据有没有登陆出现该提示）

     <div id="app">
       <div class="box" v-show="flag">我是v-show控制的盒子</div>
       <div class="box" v-if="flag">我是v-if控制的盒子</div>
     </div>
   
     <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
     <script>
       const app = new Vue({
         el: '#app',
         data: {
           flag: false
         }
       })
     </script>
   

3. v-else 和 v-else-if 多种条件判断时使用

   1. 作用：辅助v-if进行判断渲染
   2. 语法：v-else v-else-if=“表达式”
   3. 需要紧接着v-if使用

  <div id="app">
    <p v-if=" gender === 1 ">性别：♂ 男</p>
    <p v-else="gender === 2">性别：♀ 女</p>
    <hr>
    <p v-if=" score >= 90 ">成绩评定A：奖励电脑一台</p>
    <p v-else-if="   score >=70 ">成绩评定B：奖励周末郊游</p>
    <p v-else-if="score>=60">成绩评定C：奖励零食礼包</p>
    <p v-else> 成绩评定D：惩罚一周不能玩手机</p>
  </div>
  
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>

    const app = new Vue({
      el: '#app',
      data: {
        gender: 2,
        score: 95
      }
    })
  </script>

十、事件绑定指令 动态传参 v-on: 事件名 = “methods中的函数名”

v-on
作用：注册事件 = 添加监听 + 提供处理逻辑
语法：1. v-on: 事件名 = “内联语句” 内联语句：可执行的代码
2. v-on: 事件名 = “methods中的函数名”

• v-on: 简写为 @

事件名：click 鼠标点击
mouseenter 鼠标划入

1. 内联语句

  <div id="app">
      <button @click="count--">-</button>     
      <span>{{ count }}</span>
      <button v-on:click="count++">+</button>                /* v-on:事件名="内联语句" */
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          count: 100
        }
      })
    </script>

2. 事件处理函数
   注意：

   • 事件处理函数应该写到一个跟data同级的配置项（methods）中
   • methods中的函数内部的this都指向Vue实例

点击切换显示或隐藏 案例

<div id="app">
    <button @click="fn">切换显示隐藏</button>          事件处理函数
    <h1 v-show="isShow">黑马程序员</h1>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        isShow: true
      },
      methods{
        fn(){
          this.isShow = !this.isShow  /* 取反 */
  /* this.isShow  其实就是 app.isShow = 新值 ,不过为了防止上面的 const app 改变，则用this代替更好 */
        }
      }
    })
  </script>

3.给事件处理函数 传参

• 如果不传递任何参数，则方法无需加小括号；methods方法中可以直接使用 e 当做事件对象
• 如果传递了参数，则实参 $event 表示事件对象，固定用法。

 <style>
    .box {
      border: 3px solid #000000;
      border-radius: 10px;
      padding: 20px;
      margin: 20px;
      width: 200px;
    }
    h3 {
      margin: 10px 0 20px 0;
    }
    p {
      margin: 20px;
    }
  </style>

 <div id="app">
    <div class="box">
      <h3>小黑自动售货机</h3>
      <button @click="buy(5)">可乐5元</button>
      <button @click="buy(10)">咖啡10元</button>
      <button @click="buy(8)">牛奶8元</button>
    </div>
    <p>银行卡余额：{{ money }}元</p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        money: 100
      },
      methods{
        buy(price){                       /* price会自动找到 v-on 的 buy参数 price此处名字随意 */
           this.money -= price
        }

      }

    })
  </script>

十一、属性绑定指令 动态标签属性 图片动态设置 v-bind : 属性名=“表达式” :url=" data里的url属性 "

1. 作用：动态设置html的标签属性 不会写死的 比如：src、url、title
   还可以操作css类名哦…

2. 语法：v-bind : 属性名=“表达式”

3. v-bind:可以简写成只写一个 :

比如，有一个图片，它的 src 属性值，是一个图片地址。这个地址在数据 data 中存储。

则可以这样设置属性值：

• <img v-bind:src="url" />
• <img :src="url" /> （v-bind可以省略）

  <div id="app">
    <img v-bind:src="imgUrl" v-bind:title="msg" alt="">   {/* 此处图片和标题都动态设置了 */ }
    <img :src="imgUrl" :title="msg" alt="">            {/* （v-bind可以省略） */}
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        imgUrl: './imgs/10-02.png',
        msg: 'hello 波仔'
      }
    })
  </script>

十二、小案例-波仔的学习之旅 点击按钮 切换图片

需求：默认展示数组中的第一张图片，点击上一页下一页来回切换数组中的图片

实现思路：

1.data里边 数组存储图片路径 list : [‘url1’,‘url2’,‘url3’，…]

2.默认展示第一张 在标签处 v-bind:list[0]

3.想要改图片，设置一个变量index即可，将来点击时变量index ++或-- 即可

4.index写在data下，默认值为0（第一张） index:0

5.注册点击事件 上一页index++ 下一页-- @click=“index++”
此时发现到最后一页时还有下一页按钮…，不合理, index超出5或index小于0

6.v-show解决bug：index的取值要在数组的下标之间
v-show=“index > 0” 表示等于零隐藏上一页 v-show=“index < 5” 表示等于5隐藏下一页

7.将来可能有更多的图片 所以把index<5 优化成 index < list.length-1 (数组总数量 统计数量时也可以用到)

 <div id="app">
    <button @click="index--" v-show="index > 0">上一页</button>
    <div>
      <img :src=" list[index]" alt="">
    </div>
    <button @click="index++ v-show="index < list.length-1">下一页</button>
   </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        index:0,
        list: [
          './imgs/11-00.gif',
          './imgs/11-01.gif',
          './imgs/11-02.gif',
          './imgs/11-03.gif',
          './imgs/11-04.png',
          './imgs/11-05.png',
        ]
      }
    })
  </script>

十三、列表渲染指令 v-for

Vue 提供了 v-for 列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。

v-for 指令需要使用 (item, index) in arr 形式的特殊语法，其中：

• item 每一项
• index 下标，不需要可以省略
• arr 数组名

此语法也可以遍历对象和数字

//遍历对象
<div v-for="(value, key, index) in object">{{value}}</div>
value:对象中的值
key:对象中的键
index:遍历索引从0开始

//遍历数字
<p v-for="item in 10">{{item}}</p>
item从1 开始

十四、小案例-小黑的书架 列表渲染 v-for

需求：

1.根据左侧数据渲染出右侧列表（v-for）

2.点击删除按钮时，应该把当前行从列表中删除（获取当前行的id，利用filter进行过滤）
注意：删除键 @click=“del(item.id)” 传过来的是item.id 下面methods里接收的是 del(id)

准备代码：

<div id="app">
    <h3>小黑的书架</h3>
    <ul>
      <li v-for="(item,index) in booksList":key="item.id">
        <span>{{item.name}}</span>
        <span>{{ item.author}}</span>
        <button @click="del(item.id)">删除</button>
      </li>
    </ul>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        booksList: [
          { id: 1, name: '《红楼梦》', author: '曹雪芹' },
          { id: 2, name: '《西游记》', author: '吴承恩' },
          { id: 3, name: '《水浒传》', author: '施耐庵' },
          { id: 4, name: '《三国演义》', author: '罗贯中' }
        ]
      },
      methods:{
        del(id){
             this.booksList=this.booksList.filter(item => item.id !== id) 
                                         {/* filter( 保留项 => 保留条件) */}
        }
      }
    })
  </script>

十五、v-for中的key

语法：key=“唯一值”

作用：给列表项添加的 唯一标识。便于Vue进行列表项的 正确排序复用。

为什么加key： Vue 的默认行为会尝试原地修改元素（就地复用）

注意：

1. key 的值只能是"字符串" 或 数字类型
2. key 的值必须具有唯一性
3. 推荐使用 id 作为 key（唯一），不推荐使用 index 作为 key（会变化，不对应）
   实例代码：

<ul>
  <li v-for="(item, index) in booksList" :key="item.id">
    <span>{{ item.name }}</span>
    <span>{{ item.author }}</span>
    <button @click="del(item.id)">删除</button>
  </li>
</ul>

十六、双向绑定指令 表单元素 (v-model=“变量” data里准备 变量=‘’ ) 账号密码输入框

所谓双向绑定就是：

1. 用调试工具 将数据改变后，呈现的页面结果会更新
2. 页面结果更新后，调试工具上的 数据也会随之而变

作用： 给表单元素（input、radio、select）使用，
双向绑定数据，可以快速 获取 或 设置 表单元素内容

**语法：**v-model=“变量”

**需求：**使用双向绑定实现以下需求

1. 点击登录按钮获取表单中的内容 双向绑定
2. 点击重置按钮清空表单中的内容 变成 空’’

<div id="app">
    账户：<input type="text" v-model="username"> <br><br>
    密码：<input type="password" v-model="password"> <br><br>
    <button @click="login">登录<tton>
    <button @click="reset">重置<tton>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
          /* 此处username与账户那行的v-model进行双向绑定  
             password与密码那行的v-model进行双向绑定       */
        username: '', 
        password: ''

      },
      methods:{
          login(){
              /* 想要拿到 账户 和  密码 的数据*/
          console.log(this.username,this.password)

          },
          reset(){
              /*重置数据 */
               this.username: '', 
               this.password: ''
          }
      }
    })
  </script>

十七、综合案例-小黑记事本 输入框添加 点击删除 合计（总的统计） 清空

功能需求：

1. 列表渲染
   准备想要渲染的数据
   list:[ 对象 ]

v-for渲染 写在li里边
v-for=“( item,index ) in list”:key=" item.id "
{{ item.属性名 }}

2. 删除功能

注册点击事件
@click=" del(item.id) "

方法：
methods:{
del(id){
this.list=this.list.filter(item => item.id!==id)
}
}

3. 添加功能
   1.实现 v-model 双向绑定
   v-model=“task” 在input标签里记得加！！

data{
task=“”
}
2.点击添加 往最前面加：
@click=“add”

add(){

if(this.task.trim() ===‘’) {
alert(‘请输入任务’)
}else{
this.list.unshift({

id: +new Date( ),
name: this.task
})

this.task=""
}

}

4. 底部统计 和 清空
   底部统计 统计总数量 即 list.length 数组个数 list.length-1是下标最大值
   {{ list.length }}

清空 即把原数组清空
@click=“clear()”
clear(){
this.list=[]
}
此时没有任务，可优化页面，把合计那行的内容隐藏掉
v-show=“判断条件”
v-show=" list.length > 1 "

day02

一、今日学习目标

1.指令补充

1. 指令修饰符
2. v-bind对样式增强的操作
3. v-model应用于其他表单元素

2.computed计算属性

1. 基础语法
2. 计算属性vs方法
3. 计算属性的完整写法
4. 成绩案例

3.watch侦听器

1. 基础写法
2. 完整写法

4.综合案例 （演示）

1. 渲染 / 删除 / 修改数量 / 全选 / 反选 / 统计总价 / 持久化

二、指令修饰符

1.什么是指令修饰符？

​ 所谓指令修饰符就是通过 “.” 指明一些指令后缀 不同的后缀封装了不同的处理操作 —> 简化代码

2.按键修饰符 回车键执行语句 @keyup.enter=" 事件 "

• @keyup.enter —>当点击enter键的时候才触发
  一般和 输入框的某个按键 共用一种功能（方法）

代码演示：

  <div id="app">
    <h3>@keyup.enter  →  监听 键盘回车 事件</h3>
    <input v-model="username" type="text" @keyup.enter="add">{/* 例如回车添加 */}
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        username: ''
      },
      methods: {
        
      }
    })
  </script>

3.v-model修饰符 .trim .number

• v-model.trim —>去除首位空格 防止输入框空格占位置
• v-model.number —>转数字 字符串转数字，比如年龄 qq账号 (a,b,c这种不可以)

4.事件修饰符 没遇到过

• @事件名.stop —> 阻止冒泡
• @事件名.prevent —>阻止默认行为
• @事件名.stop.prevent —>可以连用 即阻止事件冒泡也阻止默认行为

 <style>
    .father {
      width: 200px;
      height: 200px;
      background-color: pink;
      margin-top: 20px;
    }
    .son {
      width: 100px;
      height: 100px;
      background-color: skyblue;
    }
  </style>

 <div id="app">
    <h3>v-model修饰符 .trim .number</h3>
    姓名：<input v-model.trim="username" type="text"><br>
    年纪：<input v-model.number="age" type="text"><br>

    
    <h3>@事件名.stop     →  阻止冒泡</h3>
    <div @click="fatherFn" class="father">
      <div @click="sonFn" class="son">儿子</div>
    </div>

    <h3>@事件名.prevent  →  阻止默认行为</h3>
    <a @click.stop href="http://www.baidu.com">阻止默认行为</a>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        username: '',
        age: '',
      },
      methods: {
        fatherFn () {
          alert('老父亲被点击了')
        },
        sonFn (e) {
          // e.stopPropagation()
          alert('儿子被点击了')
        }
      }
    })
  </script>

三、v-bind对样式控制的增强-操作class 通过布尔值动态控制css选择器

为了方便开发者进行样式控制， Vue 扩展了 v-bind 的语法，可以针对 class 类名 和 style 行内样式 进行控制 。

1.语法：

<div> :class = "对象/数组">这是一个div</div>

2.对象语法

当class动态绑定的是对象时，键就是类名选择器，值就是布尔值，如果值是true，就有这个类，否则没有这个类

<div class="box" :class="{ 类名选择器: 布尔值, 类名选择器: 布尔值 }"></div>

​ 适用场景：一个类名选择器，来回切换
高亮导航栏：点击(@click=“activeIndex = index”) data写个activeIndex = 0 记录高亮的下标默认0
就切换某个类名 (:class=“{类名:记录高亮的下标activeIndex === v-for下标index}”) 实现高亮

3.数组语法

当class动态绑定的是数组时 → 数组中所有的类，都会添加到盒子上，本质就是一个 class 列表

<div class="box" :class="[ '类名选择器', '类名选择器2', '类名选择器3' ]"></div>  一加上就使用这些选择器里的样式

使用场景:批量添加或删除类

4.代码练习

 <style>
    .box {
      width: 200px;
      height: 200px;
      border: 3px solid #000;
      font-size: 30px;
      margin-top: 10px;
    }
    .pink {
      background-color: pink;
    }
    .big {
      width: 300px;
      height: 300px;
    }
  </style>


<div id="app">
    <!--绑定对象-->
    <div class="box" :class="{ pink:true,big:true }">黑马程序员</div>
    <!--绑定数组-->
    <div class="box" :class="['pink','big']">黑马程序员</div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {

      }
    })
  </script>

四、京东秒杀-tab栏切换导航高亮 v-bind:class={ 选择器: 布尔值 } 点哪哪亮导航栏

1.需求：

​ 当我们点击哪个tab页签时，哪个tab页签就高亮
高亮导航栏：点击(@click=“activeIndex = index”) activeIndex = 0 记录高亮的下标默认0
就切换某个类名 (:class=“{类名:记录高亮的下标activeIndex === v-for下标index}”) 实现高亮

2.准备代码:

 <style>
    * {
      margin: 0;
      padding: 0;
    }
    ul {
      display: flex;
      border-bottom: 2px solid #e01222;
      padding: 0 10px;
    }
    li {
      width: 100px;
      height: 50px;
      line-height: 50px;
      list-style: none;
      text-align: center;
    }
    li a {
      display: block;
      text-decoration: none;
      font-weight: bold;
      color: #333333;
    }
    li a.active {
      background-color: #e01222;
      color: #fff;
    }

  </style>

<div id="app">
    <ul>                                                <!--将数组下标赋值给记录高亮的下标 -->
      <li v-for="(item,index) in list":key="item.id" @click="activeIndex = index">
        <a :class="{active:'activeIndex === index'}" href="#" >{{item.name}}</a>
      </li>
    </ul>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        activeIndex = 0,
        list: [
          { id: 1, name: '京东秒杀' },
          { id: 2, name: '每日特价' },
          { id: 3, name: '品类秒杀' }
        ]
      }
    })
  </script>

3.思路：

1.基于数据，动态渲染tab（v-for）

2.准备一个下标 记录高亮的是哪一个 tab

3.基于下标动态切换class的类名

五、v-bind对有样式控制的增强-操作style v-bind:style=“{ CSS属性名1: ‘CSS属性值’, CSS属性名2: ‘CSS属性值’ }”

1.语法

<div class="box" :style="{ CSS属性名1: 'CSS属性值', CSS属性名2: 'CSS属性值' }"></div>

注意有bg-color这种有 杠 的要引号引起来 ‘cg-color’
属性值要 ‘’，否则会报错

2.代码练习

<style>
    .box {
      width: 200px;
      height: 200px;
      background-color: rgb(187, 150, 156);
    }
 </style>
 <div id="app">
    <div class="box" :style="{ width: '400px','background-color':'red' }"></div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {

      }
    })
  </script>

3.进度条案例 底层原理：大盒子里有小盒子，修改小盒子宽度即可

准备一个变量记录百分比，将来改那个变量即可

 <style>
    .progress {
      height: 25px;
      width: 400px;
      border-radius: 15px;
      background-color: #272425;
      border: 3px solid #272425;
      box-sizing: border-box;
      margin-bottom: 30px;
    }
    .inner {
      width: 50%;
      height: 20px;
      border-radius: 10px;
      text-align: right;
      position: relative;
      background-color: #409eff;
      background-size: 20px 20px;
      box-sizing: border-box;
      transition: all 1s;
    }
    .inner span {
      position: absolute;
      right: -20px;
      bottom: -25px;
    }
  </style>

<div id="app">
    <div class="progress">
      <div class="inner" :style="{ width: percent + '%' }">
        <span>50%</span>
      </div>
    </div>
    <button @click="schedule(25)">设置25%</button>
    <button @click="schedule(50)">设置50%</button>
    <button @click="schedule(75)">设置75%</button>
    <button @click="schedule(100)">设置100%</button>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
      percent:0,
      },
      methods:{
        schedules(value){
            this.percent = value
        }
      }
    })
  </script>

六、v-model在其他表单元素的使用

  (v-model="变量"   data里准备 变量='' / 布尔值)      form表单里的都能用！！！
  表单元素的 获取 与 绑定

1.讲解内容：

常见的表单元素都可以用 v-model 绑定关联 → 快速 获取 或 设置 表单元素的值

它会根据 控件类型 正确的方法 来更新元素

输入框  input:text   ——> value
文本域  textarea	 ——> value
复选框  input:checkbox  ——> checked
单选框  input:radio   ——> checked
下拉菜单 select    ——> value
...

2.代码准备

 <style>
    textarea {
      display: block;
      width: 240px;
      height: 100px;
      margin: 10px 0;
    }
  </style>
 <div id="app">
    <h3>小黑学习网</h3>
    姓名：
      <input type="text" v-model="username"> 
      <br><br>

      <!-- 勾选值   选中状态 绑定的是布尔值   -->
    是否单身：
      <input type="checkbox" v-model="isSingle"> 
      <br><br>

    <!-- 
      前置理解：
        1. name:  给单选框加上 name 属性 可以分组 → 同一组互相会互斥
        2. value: 给单选框加上 value 属性，用于提交给后台的数据 value值通常是数字
      结合 Vue 使用 → v-model
    -->
    性别: 
      <input type="radio" name="gender" value:"1" v-model="gender">男
      <input type="radio" name="gender" value:"2" v-model="gender">女
      <br><br>

    <!-- 
      下拉菜单 下拉框 前置理解：
        1. option 需要设置 value 值，提交给后台
        2. select 的 value 值，关联了选中的 option 的 value 值
      结合 Vue 使用 → v-model
    -->
    所在城市:
      <select v-model="cityId">
        <option value='101'>北京</option>
        <option value='102'>上海</option>
        <option value='103'>成都</option>
        <option value='104'>南京</option>
      </select>
      <br><br>
    自我描述：
    <!-- 文本输入框 文本域 -->
      <textarea v-model="desc"></textarea> 
    <button>立即注册</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        /* 姓名 */
        username:'',
        isSingle:ture,
        gender:1,
        cityId:102,
        desc:''
      }
    })
  </script>

七、computed计算属性 动态灵活计算，设置自动计算的computed方法

1.概念

基于 现有 的数据，计算出来的 新属性。
依赖的数据变化，自动重新计算。

2.语法

1. 声明在 computed 配置项中，一个计算属性对应一个函数
2. 使用起来和普通属性一样使用 {{ 计算属性名}}
   computed()}{
   let 算的啥 = 算算算。。。
   算总数（总和,求和，求累积和）的方法名reduce( (sum,item) => 对参数进行计算xxx,起始值0)

  return 算的啥

}

3.注意

1. computed配置项和data配置项是同级的
   data:{},
   computed:{}

2. computed中的计算属性虽然是函数的写法，但他依然是个属性
   所以引用时也是{{ computed方法名 }}

3. computed中的计算属性

4. 使用computed中的计算属性和使用data中的属性是一样的用法
   虽是方法，但是不加(),懂？

5. computed中计算属性内部的 this 依然指向的是Vue实例
   比如找data中list的值num, this.list.num

6. 计算出的东西要return
   computed()}{
   let 算的啥 = 算算算。。。
   算总数（总和）的方法名reduce( (sum,item) => 对参数进行计算xxx,起始值0)

  return 算的啥

}

4.案例

比如我们可以使用计算属性实现下面这个业务场景

5.代码准备

<style>
    table {
      border: 1px solid #000;
      text-align: center;
      width: 240px;
    }
    th,td {
      border: 1px solid #000;
    }
    h3 {
      position: relative;
    }
  </style>

<div id="app">
    <h3>小黑的礼物清单</h3>
    <table>
      <tr>
        <th>名字</th>
        <th>数量</th>
      </tr>
      <tr v-for="(item, index) in list" :key="item.id">
        <td>{{ item.name }}</td>
        <td>{{ item.num }}个</td>
      </tr>
    </table>

    <!-- 目标：统计求和，求得礼物总数 -->
    <p>礼物总数：{{totalNum}} 个</p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        // 现有的数据
        list: [
          { id: 1, name: '篮球', num: 1 },
          { id: 2, name: '玩具', num: 2 },
          { id: 3, name: '铅笔', num: 5 },
        ]
      },
      computed:{
        totalNum(){
          /* 求累计和，算总数 */
         let total = this.list.reduce((sum,item) => sum+item.num,0) 
         return total
        }
      }
    })
  </script>

八、computed计算属性 VS methods方法

1.computed计算属性

作用：封装了一段对于数据的处理，求得一个结果

语法：

1. 写在computed配置项中
2. 作为属性，直接使用
   • js中使用计算属性： this.计算属性
   • 模板中使用计算属性：{{计算属性}}

2.methods计算属性

作用：给Vue实例提供一个方法，调用以处理业务逻辑。

语法：

1. 写在methods配置项中
2. 作为方法调用
   • js中调用：this.方法名()
   • 模板中调用 {{方法名()}} 或者 @事件名=“方法名”

3.计算属性的优势

1. 缓存特性（提升性能）

   计算属性会对计算出来的结果缓存，再次使用直接读取缓存，

   依赖项变化了，会自动重新计算 → 并再次缓存

2. methods没有缓存特性

3. 通过代码比较

<style>
    table {
      border: 1px solid #000;
      text-align: center;
      width: 300px;
    }
    th,td {
      border: 1px solid #000;
    }
    h3 {
      position: relative;
    }
    span {
      position: absolute;
      left: 145px;
      top: -4px;
      width: 16px;
      height: 16px;
      color: white;
      font-size: 12px;
      text-align: center;
      border-radius: 50%;
      background-color: #e63f32;
    }
  </style>

<div id="app">
    <h3>小黑的礼物清单🛒<span>?</span></h3>
    <table>
      <tr>
        <th>名字</th>
        <th>数量</th>
      </tr>
      <tr v-for="(item, index) in list" :key="item.id">
        <td>{{ item.name }}</td>
        <td>{{ item.num }}个</td>
      </tr>
    </table>

    <p>礼物总数：{{ totalCount }} 个</p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        // 现有的数据
        list: [
          { id: 1, name: '篮球', num: 3 },
          { id: 2, name: '玩具', num: 2 },
          { id: 3, name: '铅笔', num: 5 },
        ]
      },
      computed: {
        totalCount () {
          /* 算总数 累计和 reduce */
          let total = this.list.reduce((sum, item) => sum + item.num, 0)
          return total
        }
      }
    })
  </script>

4.总结

1.computed有缓存特性，methods没有缓存

2.当一个结果依赖其他多个值时，推荐使用计算属性

3.当处理业务逻辑时，推荐使用methods方法，比如事件的处理函数

九、计算属性的完整写法 修改计算属性 全选反选

既然计算属性也是属性，能访问，应该也能修改了？

1. 计算属性默认的简写，只能读取访问，不能 直接"修改"

2. 如果要 “修改” → 需要写计算属性的完整写法（ 获取get +设置set ）

   computed:{
   计算属性名:{
   
   get() {
   计算逻辑
   return 结果 (结果赋值给计算属性名)
   },
   
   set(修改的值value){
   修改逻辑
   }
   }
   }

完整写法代码演示

 <div id="app">
    姓：<input type="text" v-model="firstName"> +
    名：<input type="text" v-model="lastName"> =
    <span>{{fullName}}</span><br><br> 
    <button @click="change()">改名卡</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
 		    firstName: '刘',
        lastName: '备'
      },
      computed: {
       fullName:{
        get(){
        return this.firstname + this.lastname
        },
        set(value){  /* value即 上面的 return */
          this.firstname=value.slice(0,1)   /* 拆分字符串：下标0-1 下标1之后所有 */
          this.lastname=value.slice(1)
        }
       }
      },
      methods: {
          change(){
            this.fullName = '卢西奥'
          }
      }
    })
  </script>

十、综合案例-成绩案例 渲染 删除 添加 求和、平均分（保留小数2）

功能描述：

1.渲染功能
v-for=“(item,index) in list”:key=“item.id”
list:[]
{{item…}}

2.删除功能
@click=“del(item.id)”
del(id){
this.list = this.list.fliter(item => item.id !== id)
}

3.添加功能
v-model=“subject”
v-model=“score”

subject=“”
score=“”

@click=“add”
add() {
if( !this.subject){
alert(‘请输入科目’)
return
}
if(typeof this.score !== ‘number’){
alert(‘请输入正确的分数’)
return
}
this.list.unshift({
id: +new Date(),
subject: this.subject,
score: this.score
}) ,

this.subject=“”
this.score=“”
}

4.统计总分，求平均分 求和函数
{{totalScore}}
{{avgScore}}

computed:{
totalScore(){
let score =this.list.reduce((sum,item) => sum+item.score,0)
return score
},
avgScore(){
if(this.list.length===0){
return 0
}
let avg = this.totalScore / this.list.length
return avg.toFixed
}保留两位小数
}

思路分析：

1.渲染功能 v-for :key v-bind:动态绑定class的样式

2.删除功能 v-on绑定事件， 阻止a标签的默认行为

3.v-model的修饰符 .trim、 .number、 判断数据是否为空后 再添加、添加后清空文本框的数据

4.使用计算属性computed 计算总分和平均分的值

十一、watch侦听器（监视器）

1.作用：

​ 监视数据变化，执行一些业务逻辑或异步操作

2.语法：

1. watch同样声明在跟data同级的配置项中

2. 简单写法： 简单类型数据直接监视

3. 完整写法：添加额外配置项

   
   v-model ="words"
   或
   v-model ="obj.words"
   
   data: { 
     words: '苹果',
     或
     obj: {
       words: '苹果'
     }
   },
       M416
   watch: {
     // 该方法会在数据变化时，触发执行
     /* 数据属性名要与data里的名字同名，一旦上面变化下面也会 根据数据的变化 调用方法 */
     /* 不是对象写法 ，老值oldValue 根据需要写，一般不写*/
     数据属性名 (newValue, oldValue) {
       一些业务逻辑 或 异步操作。 
     },
     或
     /* 对象写法 */
     '对象.属性名' (newValue, oldValue) {
       一些业务逻辑 或 异步操作。 
     }
   }
   

3.侦听器代码准备

 <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-size: 18px;
      }
      #app {
        padding: 10px 20px;
      }
      .query {
        margin: 10px 0;
      }
      .box {
        display: flex;
      }
      textarea {
        width: 300px;
        height: 160px;
        font-size: 18px;
        border: 1px solid #dedede;
        outline: none;
        resize: none;
        padding: 10px;
      }
      textarea:hover {
        border: 1px solid #1589f5;
      }
      .transbox {
        width: 300px;
        height: 160px;
        background-color: #f0f0f0;
        padding: 10px;
        border: none;
      }
      .tip-box {
        width: 300px;
        height: 25px;
        line-height: 25px;
        display: flex;
      }
      .tip-box span {
        flex: 1;
        text-align: center;
      }
      .query span {
        font-size: 18px;
      }

      .input-wrap {
        position: relative;
      }
      .input-wrap span {
        position: absolute;
        right: 15px;
        bottom: 15px;
        font-size: 12px;
      }
      .input-wrap i {
        font-size: 20px;
        font-style: normal;
      }
    </style>

 <div id="app">
      <!-- 条件选择框 -->
      <div class="query">
        <span>翻译成的语言：</span>
        <select>
          <option value="italy">意大利</option>
          <option value="english">英语</option>
          <option value="german">德语</option>
        </select>
      </div>

      <!-- 翻译框 -->
      <div class="box">
        <div class="input-wrap">
          <textarea v-model="words"></textarea><!-- v-model="obj.words" -->
          <span><i>⌨️</i>文档翻译</span>
        </div>
        <div class="output-wrap">
          <div class="transbox">mela</div>
        </div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
      // 接口地址：https://applet-base-api-t.itheima.net/api/translate
      // 请求方式：get
      // 请求参数：
      // （1）words：需要被翻译的文本（必传）
      // （2）lang： 需要被翻译成的语言（可选）默认值-意大利
      // -----------------------------------------------
      
      const app = new Vue({
        el: '#app',
        data: {
          words: ''
        },
        // 具体讲解：(1) watch语法 (2) 具体业务实现
        watch:{
          /* 第一种 */
          words (newValue){
            word变，执行这行的代码
          } 
          /* 第二种 */
          'obj.words' (newValue){
            obj.words变，执行这行代码
          }
        }
      })
    </script>

SCART

十二、翻译案例-代码实现

  <script>
      // 接口地址：https://applet-base-api-t.itheima.net/api/translate
      // 请求方式：get
      // 请求参数：
      // （1）words：需要被翻译的文本（必传）
      // （2）lang： 需要被翻译成的语言（可选）默认值-意大利
      // -----------------------------------------------
      
      const app = new Vue({
        el: '#app',
        data: {
           //words: ''
           obj: {
            words: '',
            lang:'italy'
          },
          result: '', // 翻译结果
          // timer: null // 延时器id
        },
        // 具体讲解：(1) watch语法 (2) 具体业务实现
        watch: {
          // 该方法会在数据变化时调用执行
          // newValue新值, oldValue老值（一般不用）
          // words (newValue) {
          //   console.log('变化了', newValue)
          // }
         
          'obj.words' (newValue) {
            // console.log('变化了', newValue)
            // 防抖: 延迟执行 → 干啥事先等一等，延迟一会，一段时间内没有再次触发，才执行
            clearTimeout(this.timer)  /*解决bug: 一段时间内频繁输入，虽然延迟但是最终都执行了n多次 */
            this.timer = setTimeout(async () => {
              const res = await axios({
                url: 'https://applet-base-api-t.itheima.net/api/translate',
                params: {      /* get请求参数的名字 */
                  words: newValue
                }
              })
              this.result = res.data.data   
              console.log(res.data.data)  /* res是接口回复的内容 */
            }, 300)
          },
          AK47



       {/* 
           'obj.italy' (newValue){
            clearTimeout( this.timer )
            setTimeout( async () =>{
              const res = await axios({
              url:"https://applet-base-api-t.itheima.net/api/translate",
              method:'get',
              params:{
                lang:newValue
              }
            }),
            console.log( res.data.data )
            this.result = res.data.data
               },300) */}
            
          }

        }
      })
    </script>

十三、watch侦听器

1.语法

完整写法 —>添加额外的配置项

1. deep:true 对复杂类型进行深度监听
2. immdiate:true 初始化 立刻执行一次

data: {
  
  obj: {
    words: '苹果',
    lang: 'italy'
  },
},

watch: {// watch完整写法
  对象: {                       /* 不一定是对象，数组 包 对象也行 */
    deep: true, // 深度监视
    immediate:true,//立即执行handler函数  
    handler (newValue) {
      console.log(newValue) 
    }
  }
}

2.需求

• 当文本框输入的时候 右侧翻译内容要时时变化
• 当下拉框中的语言发生变化的时候 右侧翻译的内容依然要时时变化
• 如果文本框中有默认值的话要立即翻译

3.代码实现

 <script> 
      const app = new Vue({
        el: '#app',
        data: {
          obj: {
            words: '小黑',
            lang: 'italy'
          },
          result: '', // 翻译结果
        },
        watch: {
          obj: {
            deep: true, // 深度监视
            immediate: true, // 立刻执行，一进入页面handler就立刻执行一次
            handler (newValue) {
              clearTimeout(this.timer)
              this.timer = setTimeout(async () => {
                const res = await axios({
                  url: 'https://applet-base-api-t.itheima.net/api/translate',
                  params: newValue
                })
                this.result = res.data.data
                console.log(res.data.data)
              }, 300)
            }
          } 
        }
      })
    </script>

4.总结

watch侦听器的写法有几种？

1.简单写法

watch: {
  数据属性名 (newValue, oldValue) {
    一些业务逻辑 或 异步操作。 
  },
  '对象.属性名' (newValue, oldValue) {
    一些业务逻辑 或 异步操作。 
  }
}

2.侦听器完整写法

watch: {// watch 完整写法
  数据属性名: {     // 例如obj，对象名，数组名
    deep: true, // 深度监视(针对复杂类型) 可以把对象里的所有属性都监视到
    immediate: true, // 是否立刻执行一次handler  例如默认翻译
    handler (newValue) {
      console.log(newValue)
    }
  }
}

十四、综合案例水果购物车 渲染 删除 修改个数 +1-1 全选反选 持久化到本地

购物车案例

需求说明：

1. 渲染功能
   有俩块，有商品显示上面的商品块，无商品时出现空空如也，用到v-if v-else

选中状态 v-model=“item.isCheck”

可以直接在渲染处算小计 item.num *item.price

选中时才变暗 用到v-bind:class=“{ active : item.isCheck }”

list:[{}]
v-for=“(item,index) in list”:key=“item.id”

2. 删除功能
   @click=“del(item.id)”
   del(id){
   this.list = this.list.filter( item => item.id !== id )
   }

3. 修改个数 +1 -1
   @click = add(item.id)
   @click = sub(item.id)

add(id){
const fruit = this.list.find(item => item.id ===id )
fruit.num++
}

有bug: -1…
解决：减号按钮加禁用 :disabled =" item.num <= 1 "

4. 全选反选 注意用computed完整写法 获取get + 设置set
   首先,确保渲染时双向绑定了 数组里的isChecked属性 （标签里有checked记得删除）
   v-model=“item.isChecked”

v-model=“isAll” 全选位置

computed:{

isAll:{
get(){
let allChoice = this.list.every( item => item.isCheck === true )
return allChoice
},
set(value){
let notAll = this.list.forEach( item => item.isCheck =value )
return notAll
}
}

}

5. 统计 选中的 总价 和 总数量
   {{ totalNum }}
   {{ totalPrice }}

computed:{

totalNum(){
    let num = this.list.reduce((sum,item) =>sum + item.num,0)
    return num
}
totalPrice(){
    let price - this.list.reduce((sum,item) => sum+item.num * item.price,0)
}

}

6. 持久化到本地 AK47
   存储本地 localStorage.setItem( 键,值 )

读取JSON语法： localStorage.getItem( )

键自定义，值如果是 对象就转成字符串JSON.stringifly(newValue)

字符串转成对象： JSON.parse( ‘fruitList’ )

watch:{
list:{
deep:true,
handler(newValue){
localStorage.setItem(‘fruitList’,Json.stringifly(newValue))

  }
}

}

const initData = [初始化的数据]

data:{
list:JSON.parse(localStorage.getItem(‘fruitList’)) || defaultArr

}

实现思路：

1.基本渲染： v-for遍历、:class动态绑定样式

2.删除功能 ： v-on 绑定事件，获取当前行的id

3.修改个数 ： v-on绑定事件，获取当前行的id，进行筛选出对应的项然后增加或减少

4.全选反选

1. 必须所有的小选框都选中，全选按钮才选中 → every
2. 如果全选按钮选中，则所有小选框都选中
3. 如果全选取消，则所有小选框都取消选中

声明计算属性，判断数组中的每一个checked属性的值，看是否需要全部选

5.统计 选中的 总价 和 总数量 ：通过计算属性来计算选中的总价和总数量

6.持久化到本地： 在数据变化时都要更新下本地存储 watch

day03

一、今日目标

1.生命周期

1. 生命周期介绍
   vue生命周期：一个Vue实例从 创建 到 销毁 的过程
   new Vue( )

2. 生命周期的四个阶段
   创建阶段
   挂载阶段
   更新阶段
   销毁阶段

3. 生命周期钩子

4. 声明周期案例

2.综合案例-小黑记账清单

1. 列表渲染
2. 添加/删除
3. 饼图渲染

3.工程化开发入门 之前是引入官方链接 这里开始是建项目

1. 工程化开发和脚手架
2. 项目运行流程
3. 组件化
4. 组件注册

4.综合案例-小兔仙首页

1. 拆分模块-局部注册
2. 结构样式完善
3. 拆分组件 – 全局注册

二、Vue生命周期

思考：什么时候可以发送初始化渲染请求？（越早越好）什么时候可以开始操作dom？（至少dom得渲染出来）

Vue生命周期：就是一个Vue实例从创建 到 销毁 的整个过程。

生命周期四个阶段：① 创建 ② 挂载 ③ 更新 ④ 销毁

1.创建阶段：创建响应式数据
data:{
title:‘数据’，
msg:‘数据1’
}

           1后 发送初始化渲染请求 （created钩子）

2.挂载阶段：渲染模板
{{ title }}
{{ msg }}

          2后 操作dom 渲染之后才可以  （ mounted钩子）

3.更新阶段：修改数据，更新视图(用户一般也是使用这个阶段) 会执行多次
例如计时器：

• 100 +

4.销毁阶段：销毁Vue实例
例如 关闭浏览器

三、Vue生命周期钩子

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

<div id="app">
    <h3>{{ title }}</h3>
    <div>
      <button @click="count--">-</button>
      <span>{{ count }}</span>
      <button @click="count++">+</button>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        count: 100,
        title: '计数器'
      },
      // 1. 创建阶段（准备数据）
     beforeCreate(){
         console.log('beforeCreate 响应式数据准备好之前')
     },
           < 这个阶段创建响应式数据 >
     created(){
         console.log('beforeCreate 响应式数据准备好之前')
         发送初始化渲染请求 
     }
      // 2. 挂载阶段（渲染模板）
      beforeMount(){
        console.log('beforeMount 模版渲染之前')
      },
      < 这个时候数据已经渲染完成 >
     mounted(){
        console.log('mounted 模版渲染之后')
        操作dom  渲染之后才可以（操作dom:修改数据或者方法...）
     }
      // 3. 更新阶段(修改数据 → 更新视图)
      beforeUpdate(){
         console.log('beforeUpdate 数据修改了，试图还没更新')
      },

      updated(){
         console.log('updated 数据修改了，试图已经更新')
      }
      // 4. 卸载阶段
     beforeDestroy(){
             console.log('beforeDestroy 卸载前')
               清除掉一些Vue以外的资源占用，定时器，延时器......(结合组件)
     },
     
     destroyed(){
         console.log('destroyed 卸载后')
     }

    })
  </script>

四、生命周期钩子小案例

1.在created中发送数据 发送请求获取数据渲染列表 created(){}

 <style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .news {
      display: flex;
      height: 120px;
      width: 600px;
      margin: 0 auto;
      padding: 20px 0;
      cursor: pointer;
    }
    .news .left {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding-right: 10px;
    }
    .news .left .title {
      font-size: 20px;
    }
    .news .left .info {
      color: #999999;
    }
    .news .left .info span {
      margin-right: 20px;
    }
    .news .right {
      width: 160px;
      height: 120px;
    }
    .news .right img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  </style>

 <div id="app">
    <ul>
      <li class="news" v-for="(item,index) in list":key="item.id">
        <div class="left">
          <div class="title">{{item.title}}</div>
          <div class="info">
            <span>{{ source }}</span>
            <span>{{ item.time }}</span>
          </div>
        </div>
        <div class="right">
          <img v-bind:src="item.img" alt="">
        </div>
      </li>
    </ul>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    // 接口地址：http://hmajax.itheima.net/api/news
    // 请求方式：get
    const app = new Vue({
      el: '#app',
      data: {
        list: []
      },
      async  created(){
      /*  发请求 axios    async const res=awiat */
      const res = await axios.get('http://hmajax.itheima.net/api/news')
      console.log(res)
      /* 得到数据，更新到 data 中的 list */
      this.list = res.data.data
      },
      mounted(){
       /* （操作dom:修改数据或者方法...） */
      }
    })
  </script>

2.在mounted中获取焦点 一进页面立即获取焦点 mounted(){}

 <style>
    html,
    body {
      height: 100%;
    }
    .search-container {
      position: absolute;
      top: 30%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
    }
    .search-container .search-box {
      display: flex;
    }
    .search-container img {
      margin-bottom: 30px;
    }
    .search-container .search-box input {
      width: 512px;
      height: 16px;
      padding: 12px 16px;
      font-size: 16px;
      margin: 0;
      vertical-align: top;
      outline: 0;
      box-shadow: none;
      border-radius: 10px 0 0 10px;
      border: 2px solid #c4c7ce;
      background: #fff;
      color: #222;
      overflow: hidden;
      box-sizing: content-box;
      -webkit-tap-highlight-color: transparent;
    }
    .search-container .search-box button {
      cursor: pointer;
      width: 112px;
      height: 44px;
      line-height: 41px;
      line-height: 42px;
      background-color: #ad2a27;
      border-radius: 0 10px 10px 0;
      font-size: 17px;
      box-shadow: none;
      font-weight: 400;
      border: 0;
      outline: 0;
      letter-spacing: normal;
      color: white;
    }
    body {
      background: no-repeat center /cover;
      background-color: #edf0f5;
    }
  </style>

<div class="container" id="app">
  <div class="search-container">
    <img src="https://www.itheima.com/images/logo.png" alt="">
    <div class="search-box">
      <input type="text" v-model="words" id="inp">
      <button>搜索一下</button>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      words: ''
    },
    /* 想要操作dom，就得等dom渲染完成之后mounted(){} */
    mounted(){
      /* 获取输入框id，再加上一个focus()方法即可 */
      document.querySelector('#inp').focus()
    }
  })
</script>

五、案例-小黑记账清单

vue组件中使用echarts
导入echarts
npm install echarts -S

main.js中引入
import echarts from ‘echarts’
Vue.prototype.$echarts = echarts

组件中引入
import * as echarts from “echarts”;

Vue组件导入axios:
npm install vue-axios --save

main.js引用
import Vue from ‘vue’
import axios from ‘axios’

Vue.prototype.$axios = axios  
Vue.prototype.qs = qs

1.引包大全：

echarts vue axios

2.需求分析

1.基本渲染 基本渲染 created(){} 价格保留两位小数 超过xx价格变红 算总价格

准备响应式数据 数组list:[] 准备接收数据！！

发请求获取数据get
axios{
url:‘地址’,
method:‘GET’,

params:{
creator:‘小黑’ 文档里那个creator:string不要直接复制，string表示自己取的名字
}
}
封装请求 async const res = await

得到回复res console.log(res)

将得到的数据交给list this.list = res.data.data

v-for=“(item,index) in list”:key=“item.id”
{{ item… }}

{{ item.price.toFixed(2) }}

:class=“{red : item.price>xx }”

{{totalPrice.toFixed(2)}}

computed:{
totalPrice(){
let totalPr = this.list.reduce((sum,item) => sum + item.price ,0)
return totalPr
}
}

2.俩输入框输入内容实现添加功能 操作dom mounted(){}

comName=‘’,
comPrice=‘’

v-model.trim=“comName”
v-model.number=“comPrice”

@click=“add”

发送添加请求post
methods:{
async add(){

if(!this.comName){
alert(‘请输入商品名称’)
return
}

if(typeof this.comPrice !== ‘number’){
alert(‘请输入商品价格’)
return
}
const res = axios({
url:‘地址’,
method:‘POST’,

   data:{
      "creator": "小黑",
      "name": this.comName,
      "price": this.comPrice
   }
}),

console.log(res)

this.xuanRan()   

this.comName=''
this.comPrice=''

},

async xuanRan(){

const res = axios({
url:‘地址’,
method:‘GET’,
params:{
creator:‘小黑’
}
}),
console.log(res.data.data)
this.list = res.data.data
}

}

3.删除功能 发请求，传id

@click=“del(item.id)”

async del(id){

const res= await axios({

url:地址..${id},
method:‘DELECT’
})
console.log(res)

this.xuanRan()
}

4.饼图渲染

1.初始化渲染
引包上面有
准备div盒子配上id=“main”
入门132写在mounted里边

mounted(){

this.myChart = echarts.init(document.getElementById(‘main’));

this.myChart.setOption(
{
title: {

text: ‘小黑记账清单’,

subtext: ‘’,

left: ‘center’
},

tooltip: {

trigger: ‘item’
},
legend: {

orient: ‘vertical’,
left: ‘left’
},
series: [
{
name: ‘小黑记账清单’,
type: ‘pie’,

radius: ‘50%’,
data: [ ],

emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: ‘rgba(0, 0, 0, 0.5)’
}
}
}
]
}
);
}

2.动态数据图

created的let myChart 改成 this.myChart
myChart.setOption 改成 this.myChart.setOption

渲染数据的xuanRan方法下继续加 this.myChart.setOption({
series: [
{
data: this.list.map(item => ({value:item.price,name:item.name}) ),


}/* 将数组里的每一个对象都进行转换处理
data: this.list.map((item) => ({value: item.price ,name:item.name })) /
/ 返回的是对象会报错，系统判定对象是代码段，所以要加个括号 */
]
})

4.代码准备

 <!-- CSS only -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
    />
    <style>
      .red {
        color: red!important;
      }
      .search {
        width: 300px;
        margin: 20px 0;
      }
      .my-form {
        display: flex;
        margin: 20px 0;
      }
      .my-form input {
        flex: 1;
        margin-right: 20px;
      }
      .table > :not(:first-child) {
        border-top: none;
      }
      .contain {
        display: flex;
        padding: 10px;
      }
      .list-box {
        flex: 1;
        padding: 0 30px;
      }
      .list-box  a {
        text-decoration: none;
      }
      .echarts-box {
        width: 600px;
        height: 400px;
        padding: 30px;
        margin: 0 auto;
        border: 1px solid #ccc;
      }
      tfoot {
        font-weight: bold;
      }
      @media screen and (max-width: 1000px) {
        .contain {
          flex-wrap: wrap;
        }
        .list-box {
          width: 100%;
        }
        .echarts-box {
          margin-top: 30px;
        }
      }
    </style>


  <div id="app">
      <div class="contain">
        <!-- 左侧列表 -->
        <div class="list-box">

          <!-- 添加资产 -->
          <form class="my-form">
            <input type="text" class="form-control" placeholder="消费名称" />
            <input type="text" class="form-control" placeholder="消费价格" />
            <button type="button" class="btn btn-primary">添加账单</button>
          </form>

          <table class="table table-hover">
            <thead>
              <tr>
                <th>编号</th>
                <th>消费名称</th>
                <th>消费价格</th>
                <th>操作</th>
              </tr>
            </thead>

            <tbody>
              <tr>
                <td>1</td>
                <td>帽子</td>
                <td>99.00</td>
                <td><a href="javascript:;">删除</a></td>
              </tr>
              <tr>
                <td>2</td>
                <td>大衣</td>
                <td class="red">199.00</td>
                <td><a href="javascript:;">删除</a></td>
              </tr>
            </tbody>
            <tfoot>
              <tr>
                <td colspan="4">消费总计： 298.00</td>
              </tr>
            </tfoot>
          </table>
        </div>
        
        <!-- 右侧图表 -->
        <div class="echarts-box" id="main"></div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
      /**
       * 接口文档地址：
       * https://www.apifox.cn/apidoc/shared-24459455-ebb1-4fdc-8df8-0aff8dc317a8/api-53371058
       * 
       * 功能需求：
       * 1. 基本渲染
       * 2. 添加功能
       * 3. 删除功能
       * 4. 饼图渲染
       */
      const app = new Vue({
        el: '#app',
        data: {

        },
      })
    </script>

六、工程化开发和脚手架

1.开发Vue的两种方式

• 核心包传统开发模式：基于html / css / js 文件，直接引入核心包，开发 Vue。
• 工程化开发模式：基于构建工具（例如：webpack）的环境中开发Vue。
  比引包的好处是：把es6/TS less/sass 等语法转换成浏览器识别的语言js css…

工程化开发模式优点：

提高编码效率，比如使用JS新语法、Less/Sass、Typescript等通过webpack都可以编译成浏览器识别的ES3/ES5/CSS等

工程化开发模式问题：

• webpack配置不简单
• 雷同的基础配置
• 缺乏统一的标准

为了解决以上问题，所以我们需要一个工具，生成标准化的配置

2.脚手架Vue CLI

基本介绍：

Vue CLI 是Vue官方提供的一个全局命令工具

可以帮助我们快速创建一个开发Vue项目的标准化基础架子。【集成了webpack配置】
其实就是项目目录，而且这文件帮咱配置好webpack,开袋即食

好处：

1. 开箱即用，零配置
2. 内置babel等工具
3. 标准化的webpack配置

VueCli架子生成 使用步骤： 新电脑安装

PowerShell管理员身份打开

1. 全局安装（只需安装一次即可） yarn global add @vue/cli 或者 npm i @vue/cli -g

2. 查看vue/cli版本： vue --version

3. 创建项目架子：vue create 项目名 (项目名不能使用中文)最好 cd 桌面文件夹路径再创
   选vue2

4. 启动项目：yarn serve 或者 npm run serve
   (命令不固定，找package.json里的script 'serve’是哪个)
   浏览器搜索loalhost:8080 看到大V就是成功

七、项目目录介绍和运行流程

1.项目目录介绍 解释

项目名

• node_modules 第三包文件夹

public 放 html 文件的地方
-favicon.ico 网站图标
-index . html

src 源代码目录→以后写代码的文件夹
L - assets 静态资源目录→存放图片、字体等
L - components 组件目录→存放通用组件
L - App.vue <!-- App 根组件→项目运行看到的内容就在这里编写
L - main.js

• .gitignore git 忽视文件
• babel.config.js babel 配置文件
• jsconfig.json js 配置文件
• package.json 项目配置文件→包含项目名、版本号、 scripts 、依赖包等
• README.md 项目说明文档
• vue.config.js vue - cli 配置文件
• yarn.lock yarn 锁文件，由 yarn 自动生成的，锁定安装版本(如果是npm就没有)

虽然脚手架中的文件有很多，目前咱们只需人事三个文件即可

1. main.js 入口文件

import Vue from ‘vue’

import App from ‘./App.vue’

Vue.config.productionTip = false

new Vue({

render: h => h(App),

}).$mount(‘#app’)

2. App.vue App根组件

页面中呈现的内容

3. index.html 模板文件

里边有:
标签里是提示一些浏览器没有JS运行不了的提示内容

标签里有个id="app" 但是，以后从工程化 不再在html文件里编写模板语法了，而是往App.vue写

2.运行流程

main.js 中加载了App.vue，最终加载完成了index.html

八、组件化开发 一块一块写(普通小组件) 搭积木 包裹所有块就是根组件App.vue

​ 组件化：一个页面可以拆分成一个个组件，每个组件有着自己独立的结构、样式、行为。

​ 好处：便于维护，利于复用 → 提升开发效率。

​ 组件分类：普通组件、根组件。

九、根组件 App.vue

1.根组件介绍

整个应用最上层的组件，包裹所有普通小组件

2.组件是由三部分构成

• 语法高亮插件 Vetur 新电脑

• 三部分构成

  • template：结构 （有且只能一个根元素div）

  • script: js逻辑

export default {}

• style： 样式 (可支持less，需要装包)

• 让组件支持less 新电脑
  （1） style标签，lang=“less” 开启less功能

  （2） 装包: yarn add less less-loader -D 或者npm i less less-loader -D

十、普通组件的注册使用-局部注册 一般都用

1.特点：

只能在注册的组件内使用

2.步骤： 创建 局部注册 使用

搞清楚怎么分，分几块

1. 创建.vue文件（搭架子： 三个组成部分）

往components里面建
往这些组件里写样式功能

2. 在使用的组件内 先导入(import xx from ‘xxx’)

• 再注册( 组件名 )
• 最后使用 ( 组件名标签 )
  （ 比如三个块放在App.vue里边 ，就写在App.vue里边）

// 导入需要注册的组件
/* import 组件对象 from '.vue文件路径' */
import HmHeader from './components/HmHeader'

export default {  // 局部注册
  components: {
   /* '组件名': 组件对象, */
    HmHeader:HmHeaer,  /* 大驼峰命名法 大..大.. */

    /* HmHeader  */   /* 省略写法 */
  }
}

3.使用：

当成html标签使用即可 <组件名></组件名> ,在注册的组件里加
组件名 + Tab出不来：配置VSCODE ：左下角设置 搜索trigger on tab 启用 （ 新电脑 ）

4.注意：

组件名规范 —> 大驼峰命名法， 如 HmHeader

5.总结

• A组件内部注册的局部组件能在B组件使用吗
• 局部注册组件的步骤是什么
• 使用组件时 应该按照什么命名法 大驼峰

十一、普通组件的注册使用-全局注册 通用按钮 多个组件都要用

1.特点：

全局注册的组件，在项目的任何组件中都能使用

2.步骤 创建 全局注册 使用

1. 创建.vue组件（三个组成部分）
   components下创建
   编写样式

2. main.js中进行全局注册

// 导入需要全局注册的组件
import HmButton from './components/HmButton'  
/* Vue.component('组件名', 组件对象) */
Vue.component('HmButton', HmButton)    

3.使用
当成HTML标签直接使用

<组件名></组件名>
组件名 + Tab

3.练习

在以下3个局部组件中是展示一个通用按钮

<template>
  <button class="hm-button">通用按钮</button>
</template>

<script>
export default {

}
</script>

<style>
.hm-button {
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  background-color: #3bae56;
  border-radius: 5px;
  color: white;
  border: none;
  vertical-align: middle;   /* 对齐方式 */
  cursor: pointer;       /* 小手 */
}
</style>

十二、综合案例 小兔鲜 组件拆分（拆积木） 列表组件

1.小兔仙首页启动项目演示

src复制过来

控制台Ctrl + ` npm run serve运行项目

2.小兔仙组件拆分

看准备物料 组件名参考
分别实现局部注册：
步骤：1.components 下创建 各部分组件 三部分，样式在 App备份.vue 和 index备份.css

2.App.vue中 导入 + 注册
import 组件名 from ‘./路径’

export default{
components:{
组件名,
…
}
}

3.使用
<组件名> + Tab

细节拆分：列表拆分 列表图组件拆分 列表组件拆分

因为列表图可以多用，也可以拆分，
1.将其中一块封装成组件 ListImg 全局注册，以后直接复制<组件名>即可

将 ListImg组件 的div去掉，li标签给上一个class=“list-img”

li里边的样式搬过来,除了ul 有li的都搬过来，然后css中把li及之前的都换成list-img

2.main.js导入 + 注册

3.<组件名>使用即可，需要几个就复制几个即可，（或者v-for=“item in 5（次数）”:key=“item”）
将来发请求动态渲染 组件ListImg 即可

3.开发思路

1. 分析页面，按模块拆分组件，搭架子 (局部或全局注册)

2. 根据设计图，编写组件 html 结构 css 样式 (已准备好)

3. 拆分封装通用小组件 (局部或全局注册)

   将来 → 通过 js 动态渲染，实现功能

day04

一、学习目标

1.组件的三大组成部分（结构/样式/逻辑）

​ scoped解决样式冲突/data是一个函数

2.组件通信

1. 组件通信语法 两个组件进行数据交流
2. 父传子
3. 子传父
4. 非父子通信（扩展）

3.综合案例：小黑记事本（组件版）

1. 拆分组件
2. 列表渲染
3. 数据添加
4. 数据删除
5. 列表统计
6. 清空
7. 持久化

4.进阶语法

1. v-model原理
2. v-model应用于组件
3. sync修饰符
4. ref和$refs
5. $nextTick

二、scoped解决不同组件的样式冲突 一般必写

1.默认情况：

写在组件中的样式会 全局生效 → 因此很容易造成多个组件之间的样式冲突问题。

1. 全局样式: 默认组件中的样式会作用到全局，任何一个组件中都会受到此样式的影响

2. 局部样式: 可以给组件style加上scoped ,可以让样式只作用于当前组件

2.scoped原理

1. 当前组件内标签都被添加data-v-hash值 的属性 hash值类似于一个独立id
2. css选择器都被添加 [data-v-hash值] 的属性选择器

最终效果: 必须是当前组件的元素, 才会有这个自定义属性, 才会被这个样式作用到

4.总结

1. style的默认样式是作用到哪里的？ 全局 默认所有组件都能用某个样式
2. scoped的作用是什么？ 全局样式变成局部样式
3. style中推不推荐加scoped？ 推荐

三、data必须是一个函数 data完整写法

以前是个对象 在VueCLI中会报错
data:{
count:100
}

现在是函数,但是这样count是独立的,就算一个组件复制多次count也是独立的
data(){
return{
count:100
}
}

1、data为什么要写成函数

一个组件的 data 选项必须是一个函数。目的是为了：保证每个组件实例，维护独立的一份数据对象。

每次创建新的组件实例，都会新执行一次data 函数，得到一个新对象。

2.代码演示

BaseCount.vue

<template>
  <div class="base-count">
    <button @click="count--">-</button>
    <span>{{ count }}</span>
    <button @click="count++">+</button>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      count: 100,
    }
  },
}
</script>

<style>
.base-count {
  margin: 20px;
}
</style>

App.vue

<template>
  <div class="app">
    <BaseCount></BaseCount>
    <BaseCount></BaseCount>
    <BaseCount></BaseCount>
  </div>
</template>

<script>
import BaseCount from './components/BaseCount'
export default {
  components: {
    BaseCount,
  },
}
</script>

<style>
</style>

3.总结

data写成函数的目的是什么？
实现数据独立

四、组件通信 想拿到别的组件数据，因为data(){}把数据独立开了 父传子 子传父

1.什么是组件通信？

组件通信，就是指组件与组件之间的数据传递

• 组件的数据是独立的，无法直接访问其他组件的数据。（因为有data(){}函数写法使数据独立
• 想使用其他组件的数据，就需要组件通信

2.组件之间如何通信

思考：

1. 组件之间有哪些关系？
2. 对应的组件通信方案有哪几类？

3.组件关系分类 及 通信流程

1. 父子关系
   父子组件的意思：组件（父）的template里使用了某个组件（子）

父传子数据 进行渲染：

props

步骤：准备 上传 接收 渲染

a.父组件中data(){}准备数据
myTitle: ‘学前端，就来黑马程序员’,

b.在使用子组件的标签上传数据
<Son :title"myTitle"> title是自定义的

c.在子中export default{}接收数据
props:[ ‘title’ ] props数组里的数据是传来时自定义的

d.子可以渲染使用
{{ title }} 渲染也是传来的自定义的名字

子传父数据：子想修改父传过来的数据 定义的有点多别乱

**$emit\ast \ast 步骤：子准备事件子写方法传值this.$emit 父监听和准备方法 父修改值

a. 子准备个点击事件想修改父传的数据
@click=“changeClick” 1

b. 写方法，里边要KaTeX parse error: Expected '}', got 'EOF' at end of input: …. --> this.emit(‘changeTitle’,‘传智教育’) 2
}
}

c.父包子的标签 里边对子的数据进行监听 和 准备方法
@changeTitle = “changeFn” 2 3

d.父编写方法 实现子的请求
methods:{
changeFn(sonTitle){ 3
console.log( sonTitle )
this.myTitle = sonTitle
}
}

2. 非父子关系(暂时没学)

6.父向子通信代码示例 父传子 子传父

父组件通过props将数据传递给子组件

父组件App.vue

<template>
  <div class="app" style="border: 3px solid #000; margin: 10px">
    我是APP组件 
    <Son :title"myTitle" @shiKong="changeTitle"></Son>   父组件App.vue 的数据 myTitle 传给子组件Son.vue
  </div>
</template>

<script>
import Son from './components/Son.vue'
export default {
  name: 'App',
  data() {
    return {
      myTitle: '学前端，就来黑马程序员',   
      /* 父组件中的数据 */
    }
  },
  components: {
    Son,
  },
  methods:{
    changeTitle( sonValue ){/* sonValue是儿子给的值 */
      this.myTitle = sonValue
    }
  }
}
</script>

<style>
</style>

子组件Son.vue

<template>
  <div class="son" style="border:3px solid #000;margin:10px">
    我是Son组件{{title}}
    <button @click="change">修改</button>
  </div>
</template>

<script>
export default {
  name: 'Son-Child',
  props:['title'].
  methods:{
    change(){
      this.$emit('shiKong','学前端就来尚硅谷')
    }
  }
}
</script>

<style>

</style>

五、什么是props porops细节写法

传的是布尔值 渲染时可以写成{{ 布尔值 ? ‘是’ : ‘否’ }} 布尔值?真的输出这个:假的输这个

对象 {{ 对象名.属性名 }}

数组 {{ 数组.join(‘、’) }} 把数组中的元素分开，用 、 隔开 否则会输出数组的原始形态

1.Props 定义

组件上 注册的一些 自定义属性

2.Props 作用

向子组件传递数据

3.特点

1. 可以 传递 任意数量 的prop
2. 可以 传递 任意类型 的prop

4.代码演示

父组件App.vue

<template>
  <div class="app">
    <UserInfo
      :username="username"
      :age="age"
      :isSingle="isSingle"
      :car="car"
      :hobby="hobby"
    ></UserInfo>
  </div>
</template>

<script>
import UserInfo from './components/UserInfo.vue'
export default {
  data() {
    return {
      username: '小帅',
      age: 28,
      isSingle: true,
      car: {
        brand: '宝马',
      },
      hobby: ['篮球', '足球', '羽毛球'],
    }
  },
  components: {
    UserInfo,
  },
}
</script>

<style>
</style>

子组件UserInfo.vue

<template>
  <div class="userinfo">
    <h3>我是个人信息组件</h3>
    <div>姓名：{{username}}</div>
    <div>年龄：{{age}}</div>
    <div>是否单身：{{isSingle?'是':'否'}}</div>
    <div>座驾：{{car.brand}}</div>
    <div>兴趣爱好：{{ hobby.join('、') }}</div>
  </div>
</template>

<script>
export default {
  props:['username','age','isSingle','car','hobby']
}
</script>

<style>
.userinfo {
  width: 300px;
  border: 3px solid #000;
  padding: 20px;
}
.userinfo > div {
  margin: 20px 10px;
}
</style>

六、props校验 将props:[] 改成对象的写法

1.思考

组件的props可以乱传吗

2.作用

为组件的 prop 指定验证要求，不符合要求，控制台就会有错误提示 → 帮助开发者，快速发现错误

3.语法 将props:[] 改成对象的写法

• 类型校验(最常用)
  props:{
  值:Number
  }

• 非空校验

• 默认值

• 自定义校验
  写这三个要写完整写法

props: {
  校验的属性名: {  /* 也就是自定义 接收父给的数据 的名字，写在父里子 标签前面的 */
    type: 类型,  // Number String Boolean ...
    //required: true, // 是否必填
    default: 默认值, // 默认值给个0
    validator (value) {  /* value就是父传给子的值 */
      // 自定义校验逻辑
      if( ){
        return ture    /* 表示通过校验 */
      }else{
         console.error('传入的xxx 必须是...')
         return false
      }
    }
  }
},

default和required一般不同时写（因为当时必填项时，肯定是有值的）

4.代码演示 进度条 父传子props版

App.vue

<template>
  <div class="app">
    <BaseProgress :w="width"></BaseProgress>  父给子的数据
  </div>
</template>

<script>
import BaseProgress from './components/BaseProgress.vue'
export default {
  data() {
    return {
      width: 30,      /* 父准备数据 */
    }
  },
  components: {
    BaseProgress,
  },
}
</script>

<style>
</style>

BaseProgress.vue

<template>
  <div class="base-progress">
    <div class="inner" :style="{ width: w + '%' }">  子对数据渲染
      <span>{{ w }}%</span>
    </div>
  </div>
</template>

<script>
export default {
  /* props: ['w'], */
  props:{
    w:Number   /* 子收到数据，要求数据是Number数字类型 */
  }
}
</script>

<style scoped>
.base-progress {
  height: 26px;
  width: 400px;
  border-radius: 15px;
  background-color: #272425;
  border: 3px solid #272425;
  box-sizing: border-box;
  margin-bottom: 30px;
}
.inner {
  position: relative;
  background: #379bff;
  border-radius: 15px;
  height: 25px;
  box-sizing: border-box;
  left: -3px;
  top: -2px;
}
.inner span {
  position: absolute;
  right: 0;
  top: 26px;
}
</style>

七、props校验完整写法

1.语法

props: {
  校验的属性名: {
    type: 类型,  // Number String Boolean ...
    required: true, // 是否必填
    default: 默认值, // 默认值 0
    validator (value) {   /* value就是父传给子的值 */
      // 自定义校验逻辑
      return 是否通过校验
    }
  }
},

2.代码实例

<script>
export default {
  // 完整写法（类型、默认值、非空、自定义校验）
  props: {
    w: {
      type: Number,
      //required: true,
      default: 0,
      validator(value) {
        // console.log(val)
        if (value>=0 && value<=100 ) {  /*  */
          console.error('传入的范围必须是0-100之间')
          return false
        } else {
          return true
        }
      },
    },
  },
}
</script>

3.注意

1.default和required一般不同时写（因为当时必填项时，肯定是有值的）

2.default后面如果是简单类型的值，可以直接写默认。如果是复杂类型的值，则需要以函数的形式return一个默认值

八、props&data、单向数据流:父的改，子的改

1.共同点

都可以给组件提供数据

2.区别

• data 的数据是自己的 → 随便改
• prop 的数据是外部的 → 不能直接改，要遵循 单向数据流

3.单向数据流：

父级props 的数据更新，会向下流动，影响子组件。这个数据流动是单向的

4.代码演示

App.vue 父组件

<template>
  <div class="app">
    <BaseCount  :sonCount="count" @changeCount="dieChange" ></BaseCount>
    父传子数据    子传父请求       同一个数据+1 -1在那边一次请求，所以不用写两遍了
  </div>
</template>

<script>
import BaseCount from './components/BaseCount.vue'
export default {
  components:{
    BaseCount
  },
  data(){
    return{
       count:666
    }
  },
  methods:{
    /* 爹要帮你改 */
    dieChange( sonCount ){
         console.log(sonCount)   /* 看看有没有拿到子的数据 */
         this.count = sonCount
    }
  }
}
</script>

<style>

</style>

BaseCount.vue

<template>
  <div class="base-count">
    <button @click="sub">-</button>
    <span>{{ sonCount }}</span>
    <button @click="add">+</button>
  </div>
</template>

<script>
export default {
  // 1.自己的数据随便修改  （谁的数据 谁负责）
  /*  data () {
     return {
       count: 100,
     }
   }, */
  // 2.外部传过来的数据 不能随便修改
  props: {
    sonCount: {
      type: Number,
    }, 
  },
  methods:{
    sub(){/* 告诉爹想改,传一次即可 */
      this.$emit('changeCount', this.sonCount - 1)  
    },
    add(){
      this.$emit('changeCount',this.sonCount + 1)
    }
    /* 不能直接在这改爹数据！！！ */
      /* 不能在这 ++  因为++表示自身+1  而这个数据是父的不能直接改     */
      /* +1 代表在原来基础上的数加一个1  
      区别，++是自己变牛逼，+1是多了个老婆 一个是自身一个不是*/
      /* 再归结成一次请求 等会爹那边也不用再编写两次方法了，一次赋值即可 
         老爹：    this.count  = sonCount   */
  }
}
</script>

<style>
.base-count {
  margin: 20px;
}
</style>

5.口诀

谁的数据谁负责

九、综合案例-组件拆分版 小黑记事本 组件版

1.需求说明

- 拆分基础组件 拆积木

头部（TodoHeader）、
列表(TodoMain)、
底部(TodoFooter)

1.创组件写样式 main.js中导入css文件
import ‘./styles/index.css’ 导入了样式文件就不用再复制到组件里啦！！！

2.局部：App.vue中导入 + 注册 import 组件名 from ‘路径’ components:{组件名}

3.使用组件 < 组件名 >

- 渲染待办任务 数据 父传子 将来合计 列表都能用

1. 父 提供数据 list:[{ id:1,name:‘打球’ }]

2.父传子 给列表组件 :sonList=list

3.子接收 props:{ sonList:Array } 规定传过来的要是个数组

3.渲染

- 组件添加任务 子传父添加请求 unshift不用赋值原数组

1.子注册 点击 和 回车 添加事件 v-model双向绑定输入框
v-model=“plan” @keyup.enter = “add”

@click=“add”

plan=‘’

2.向父发请求 ,将任务名称传给父
this.$emit( ‘wantAdd’, this.plan )

3.父监听 父添加
@wantadd = “dieAdd”
this.plan = “”

methods:{ ’

dieAdd(plan){
this.list.unshift({
id:+new Date(),
name:plan
})
}
}

- 组件删除任务 子传父删除请求 filter要赋值给原数组

1.子注册点击事件传id
@click = Del(item.id)

2.子发请求传id
Del( id) {
this.$emit(‘wantDel’, id)
}

3.父监听
@wantDel = “dieDel”

4.父删除方法
dieDel(id){
this.list = this.list.filter(item => item.id !== id)
}

- 底部合计 和 清空功能 算不是修改，所以不是子传父，父传子即可 清空是修改

a.底部合计 父传子数组，.length即可
1.父传子数据
:sonList = list

2.子接收数据
props:{
sonList:Array
}

3.子渲染个数
{{ list.length }}

b.清空 修改数据 子传父
1.子点击清空事件
@click = empty

2.子发想清空请求
this.$emit(‘wantEmpty’,)

3.父监听
@wantEmpty = dieEmpty

4.父清空数组 methods
dieEmpty(){
this.list = []
}

- 持久化存储 组件本地存储 watch深度监视 watch完整写法 在父里写

AK47
存储本地 localStorage.setItem( 键,值 )
读取 get ( )

键自定义，值如果是 对象就转成字符串 JSON.stringifly(newValue)
字符转对象 .parse( ‘存储的字符串名’ )
watch:{
list:{
deep:true,
handler( newValue ){
localStorage.getItem( ‘localObj’, JSON.stringifly(newValue) )
}
}
}

data:{
return{
list: JSON.parse(localStoage.getItem(‘localList’)) ||[ 默认对象的数据 ]
}
}

十四、非父子通信-event bus 事件总线 utils 同级关系传值

1.作用

非父子组件之间，进行简易消息传递。(复杂场景→ Vuex)

2.步骤

1. 创建一个都能访问的事件总线 （空Vue实例） EventBus.js相当于中介
   往utils里创一个EventBus.js文件。直写：

   import Vue from 'vue'
   const Bus = new Vue()
   export default Bus
   

2. A组件（发送方），触发事件的方式传递的参数（发布消息）点击按钮就发给A

   注册 点击事件
   @click = clickSend
   
   导入event bus
   import Bus from '../util/EventBus'
   
   发消息
   clickSend(){
      Bus.$emit('sendMsg', '这是一个消息')   /* 子想要修改父的数据也是用 $emit */
   }
   
   

3. B组件（接受方）接收同级的请求消息，监听Bus的 $on事件 （ B可以有很多个 ）

   导入 event bus
   import Bus from '../util/EventBus'
   
   created 接收数据  
   created () {
     /*在A中 监听Bus事件（订阅消息） */
     Bus.$on('sendMsg', (msg) => {
    /* $on：监听 'sendMsg'：事件名,监听到消息后干啥 */
       console.log(msg)/* 查看有没有接收到消息 */
       this.msg = msg
     })
   }
   
   渲染
   data(){
       return{
       msg : ''
       /* 此时 msg = '这是一个消息'*/
       }
   }
   
   {{ msg }}
   
   

3.代码示例

EventBus.js 中介

import Vue from 'vue'
const Bus  =  new Vue()
export default Bus

BaseA.vue(发送方) 注册 导入 发消息

<template>
 <div class="base-b">
   <div>我是A组件（发布方）</div>  
   <button @click="clickSend" >发送消息</button>/* 注册事件 */
 </div>
</template>

<script>
import Bus from '../utils/EventBus'             /* 导入 */
export default {
    methods:{
        clickSend(){
          Bus.$emit('sendMsg', '这是一个消息')  /* 发消息 */
        }
    }
}
</script>

<style scoped>
.base-b {
 width: 200px;
 height: 200px;
 border: 3px solid #000;
 border-radius: 3px;
 margin: 10px;
}
</style>

BaseB.vue(接收方) 导入 接收 渲染

<template>
  <div class="base-a">
    我是B组件（接收方）
    <p>{{msg}}</p>                  /* 渲染 */
  </div>
</template>

<script>
import Bus from '../utils/EventBus' /* 导入 */

export default {
  data() {
    return {
      msg: '',                                  
    }
},
created () {    /* 接收数据 */
     /*在B中 监听Bus事件（订阅消息） */
     Bus.$on('sendMsg', (msg) => {
     /* $on：监听 'sendMsg'：事件名,监听到消息后干啥 */
       console.log(msg)/* 查看有没有接收到消息 */
       this.msg = msg
    })
}

  
}
</script>

<style scoped>
.base-a {
  width: 200px;
  height: 200px;
  border: 3px solid #000;
  border-radius: 3px;
  margin: 10px;
}
</style>

App.vue

<template>
  <div class="app">
    <BaseA></BaseA>
    <BaseB></BaseB> 
  </div>
</template>

<script>
import BaseA from './components/BaseA.vue'
import BaseB from './components/BaseB.vue' 
export default {
  components:{
    BaseA,
    BaseB
  }
}
</script>

<style>

</style>

4.总结

1.非父子组件传值借助什么？
EventBus.js
import Vue from ‘vue’
const Bus = new Vue()
export default Bus

2.什么是事件总线
相当于 中介，一方发送 一方接受

3.发送方应该调用事件总线的哪个方法
Bus.$emit(‘事件名’ ，传值)

4.接收方应该调用事件总线的哪个方法
Bus.$on(( msg) => {
console.log( msg )
})

5.一个组件发送数据，可不可以被多个组件接收
可以

十五、非父子通信-provide&inject 爷孙级传数据 爷子孙级

1.作用

跨层级共享数据

2.场景

大块 包 中块 包 小块

3.语法

1. 父组件 provide提供数据

export default {
  provide () {
    return {
       // 普通类型【非响应式】
       color: this.color, 
       // 复杂类型【响应式】  比如对象
       userInfo: this.userInfo, 
       obj:{ id:1, name:'牛木' }
    }
  }
}

2.子 、 孙组件 inject获取数据 在父子级中 inject 和 props 效果相同 ？ 不同， inject里的 简单数据 不是响应式的 而父传子的props是

export default {
  inject: ['color','userInfo','obj'],
  created () {
    console.log(this.color, this.userInfo)
  }
}

3.子 、 孙渲染数据
{{ color }}
{{ obj.id }}
{{ obj.name }}

4.注意

• provide提供的 ， 复杂类型 数据是响应式。（推荐提供复杂类型数据） 通常包成对象
• 子/孙组件通过inject获取的数据，不能在自身组件内修改

十六、v-model原理 在组件的用处

1.原理：

v-model本质上是一个语法糖。例如应用在输入框上，就是value属性 和 input事件 的合写

<template>
  <div id="app" >
    <input v-model="msg" type="text">
  =
    <input :value="msg" @input="msg = $event.target.value" type="text">
  </div>
</template>

<script>
export default{
  data(){
    return{
      meg : ''
    }
  }
} 
</script>

2.作用：

提供数据的双向绑定 v-model=‘绑定值’

• 数据变，输入框视图跟着变 :value=“绑定值”
• 输入框视图变，数据跟着变 @input="绑定值 = $event.target.value "

3.注意

$event 用于在模板中，获取事件的形参

4.代码示例

<template>
  <div class="app">
    <input type="text"  v-model="msg1"/>
    <br/> 
    <input type="text" :value="msg2"  @input="msg = $event.target.value" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg1: '',
      msg2: '',
    }
  },
}
</script> 
<style>
</style>

5.v-model使用在其他表单元素上的原理

不同的表单元素， v-model在底层的处理机制是不一样的。比如给checkbox使用v-model

底层处理的是 checked属性和change事件。

不过咱们只需要掌握应用在文本框上的原理即可

十七、表单类组件封装 下拉框与v-model原理

曾经写法
北京
上海
成都
南京

<select :value=“sonId” @change=“sonChange”> 如今写法
北京
上海
成都
南京

下拉框与v-model ： 先父传子 再子传父

1.父传默认值给子(表单) 父传子数据 :value渲染
父：
selectId:‘102’ 表单数据有父提供

:sonId =“selectId” 父里子标签加

子：
props:{ sonId:String } 子接收数据

将默认值写入表单

2.子修改值实现数据同步
change监听 拿最新值传给父 e e.target.value 父改值 “父数据 = $event”

子：
<select :value=“sonId” @change=“sonChange”> 子监听修改值 change

sonChange(e){ 拿到形参e
console.log(e.target.value) 拿到最新的值
this.$emit(‘wantChange’,e.target.value) 把最新的值传给父
}

父： @wantChange = "selectId = $event"有点特殊，此处是在组件标签处直接把父的selectId修改成当前值$event

1.需求目标

实现子组件和父组件数据的双向绑定 （实现App.vue中的selectId和子组件选中的数据进行双向绑定）

2.代码演示

App.vue

<template>
  <div class="app">
    <BaseSelect :sonId="selectId" @wantChange="selectId=$event"></BaseSelect>
  </div>   {/* 简化v-model写法：v-model="selected" */}
</template>

<script>
import BaseSelect from './components/BaseSelect.vue'
export default {
  data() {
    return {
      selectId: '102',
    }
  },
  components: {
    BaseSelect,
  },
}
</script>

<style>
</style>

BaseSelect.vue

<template>
  <div>  {/* 简化v-model写法： :value="value" ... */}
    <select :value="sonId" @change="sonChange">
      <option value="101">北京</option>
      <option value="102">上海</option>
      <option value="103">武汉</option>
      <option value="104">广州</option>
      <option value="105">深圳</option>
    </select>
  </div>
</template>

<script>
export default {
  porps:{
    sonId:String  {/* 简化v-model写法：value:String */}
  },
  sonChange(e){
    cosole.log(e.target.value)
    this.$emit('wantChange',e.target.value)
  } {/* 简化v-model写法：'input',... */}
}
</script>

<style>
</style>

十八、v-model简化代码 下拉框代码简化版

1.目标：

父组件通过v-model 简化代码，实现子组件和父组件数据 双向绑定

2.如何简化：

v-model其实就是 :value和@input事件的简写

• 子组件：props通过value接收数据，事件触发 input
• 父组件：v-model直接绑定数据

3.代码示例

父组件

<BaseSelect v-model="selectId"></BaseSelect>

子组件

<select :value="value" @change="sonChange"> ... </select>
props: {
  value: String
},
/* 拿到输入框实时的值 */
methods: {
  sonChange (e) {
    this.$emit('input', e.target.value)
                      /* e.target表示选中下拉菜单 再.value表示拿到value值 */
  }
}

十九、.sync修饰符 按钮弹框 确认取消visible 不想用value名字 但想简化代码

步骤：
1.父传子一个布尔值，子进行v-show渲染 术语visible
isShow : false 父的值 默认不展示

:visible = isShow 父传值

props:{
visible:Boolean 子规定传来的要是布尔值
}

v-show = “visible” 弹窗块里加

2.父的按钮点击控制开关
@click =“isShow = true”

3.弹窗的各种操作反响

子想修改父的值，且不想是value,是其他的属性，加.sync
父的子标签 :visible.sync = isShow

取消 和 x按钮 关闭弹窗
@click=“close”

close(){
this.$emit(‘updata:visible’, false )
}
:visible.sync => :visible + @update:visible

1.作用

可以实现 子组件 与 父组件数据 的 双向绑定，简化代码

简单理解：子组件可以修改父组件传过来的props值

2.场景

封装弹框类的基础组件， visible属性 true显示 false隐藏

3.本质

.sync修饰符 就是 :属性名 和 @update:属性名 合写

:visible.sync => :visible + @update:visible

4.语法

父组件

//.sync写法
<BaseDialog :visible.sync="isShow" />
--------------------------------------
//完整写法
<BaseDialog 
  :visible="isShow" 
  @update:visible="isShow = $event" 
/>

子组件

props: {
  visible: Boolean
},

this.$emit('update:visible', false)

5.代码示例

App.vue

<template>
  <div class="app">
    <button @click="isShow=true">退出按钮</button>
    <BaseDialog :visible.sync="isShow" ></BaseDialog>
  </div>
</template>

<script>
import BaseDialog from './components/BaseDialog.vue'
export default {
  data() {
    return {
      isShow: false,
    }
  },
 
}
</script>

<style>
</style>

BaseDialog.vue

<template>
  <div class="base-dialog-wrap" v-show="visible">
    <div class="base-dialog">
      <div class="title">
        <h3>温馨提示：</h3>
        <button class="close">x</button>
      </div>
      <div class="content">
        <p>你确认要退出本系统么？</p>
      </div>
      <div class="footer">
        <button>确认</button>
        <button class="close">取消</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    visible: Boolean,
  },
  method:{
    close(){
      this.$emit('update:visible',false)
      /* :visible.sync =>  :visible + @update:visible */

    }
  }
}
</script>

<style scoped>
.base-dialog-wrap {
  width: 300px;
  height: 200px;
  box-shadow: 2px 2px 2px 2px #ccc;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 0 10px;
}
.base-dialog .title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #000;
}
.base-dialog .content {
  margin-top: 38px;
}
.base-dialog .title .close {
  width: 20px;
  height: 20px;
  cursor: pointer;
  line-height: 10px;
}
.footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 26px;
}
.footer button {
  width: 80px;
  height: 40px;
}
.footer button:nth-child(1) {
  margin-right: 10px;
  cursor: pointer;
}
</style>

6.总结

1.父组件如果想让子组件修改传过去的值 必须加什么修饰符？

2.子组件要修改父组件的props值 必须使用什么语法？

二十、ref和$refs 与querySelector区别 按钮在父组件操作dom

querySelector 是全网页获取dom元素
ref 和 $refs 是 在当前组件内获取（更精确稳定, 解决选择器重名问题）

this.$refs.son <组件名 ref="sonMethod"> this.$refs.sonMethod.方法名()

具体应用例如
输入账号密码框是子组件 获取数据,重置数据按钮在父组件
思路：双向绑定 子写方法父调用（ref=''与$refs.） 获取要return,重置要清空

想要操作输入的内容：
子 双向绑定获取内容
v-model=“username” v-model=“password”
username=“”
password=“”

 子  里边直接写 获取 和 清空数据的方法，将来父通过按钮 操作组件实例 即可

methods:{…}
huoQu(){
return{
username:this.username
password:this.password
}
},
chongZhi(){
this.username=‘’
this.password=‘’
}

 父  想要获取子的这俩方法
    父的子标签加
    ref = "sonMethod"   
    
    父按钮处加上点击事件
    @click="obtain"   
    @click="reset"

methods:{…}
obtain(){
this.$refs.sonMethod.huoQu()<!--注：this.$refs.ref名.子方法 -->
},
reset(){
this.$refs.sonMethod.chongZhi()<!--注：this.$refs.ref名.子方法 -->
}

1.作用

利用ref 和 $refs可以用于获取dom元素或组件实例一个绑一个用ref="绑名"this.$refs.绑名

2.特点：

查找范围 → 当前组件内(更精确稳定)

3.语法

1.给要获取的盒子添加ref属性

<div ref="chartRef">我是渲染图表的容器</div>

2.获取时通过 $refs获取 this.$refs.chartRef 获取

mounted () {
  console.log(this.$refs.chartRef)
}

4.注意

之前只用document.querySelect(‘.box’) 获取的是整个页面中的盒子
如今直接取代所有 ref=“box” + this.$refs.box

5.代码示例

App.vue

<template>
  <div class="app">
    <BaseChart></BaseChart>
  </div>
</template>

<script>
import BaseChart from './components/BaseChart.vue'
export default {
  components:{
    BaseChart
  }
}
</script>

<style>
</style>

BaseChart.vue

<template>
  <div class="base-chart-box" ref="myBox">子组件</div>
</template>

<script>
// yarn add echarts 或者 npm i echarts 装Echarts包    

import * as echarts from 'echarts'

export default {
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.querySelect('.base-chart-box'))   曾经写法 

    let myChart = echarts.init(this.$refs.myBox)   如今写法 
    AK47 
    // 绘制图表
    myChart.setOption({
      title: {
        text: 'ECharts 入门示例',
      },
      tooltip: {},
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    })
  },
}
</script>

<style scoped>
.base-chart-box {
  width: 400px;
  height: 300px;
  border: 3px solid #000;
  border-radius: 6px;
}
</style>

二十一、异步更新& $nextTick(()=>{}) 点击编辑按钮，编辑框的input自动获取焦点 $nextTick：等dom更新完立即执行的函数体

Vue 是异步dom更新的

步骤：1.俩块 默认展示文本和编辑按钮
v-if=“show” (展示) v-else(编辑块隐藏) show默认值为false 点击后为true

  编辑按钮添加点击事件
  @click="showFocus"

 2. 隐藏的编辑块的 输入框绑定 ref  将来加方法获取焦点 
 ref="inp"  
 
 3.操作隐藏块的dom加方法   把展示的值变成true + 点开后获取焦点 focus()方法

       methods:{
         showFocus(){
  /* 把展示的值变成true  */
            show:true
          /* 点开后获取焦点 */
         this.$refs.inp.focus()
    /* 此时发现报错，因为vue是异步更新的，
         解决：通过vue独有的$nextTick，将上行代码改成 */ 
         this.$nextTick(()=>{
            this.$refs.inp.focus()
         })
         }
       }

1.需求

编辑标题, 编辑框自动聚焦

1. 点击编辑，显示编辑框
2. 让编辑框，立刻获取焦点

2.代码实现

<template>
  <div class="app">
    <div v-if="isShowEdit">
      <input type="text" v-model="editValue"  ref="inp" /> /* 帮 */
      <button>确认</button>
    </div>
    /* 这俩块不是同时出现的，点击编辑才会显示上面的块   */
    <div v-else>
      <span>{{ title }}</span>
      <button @click="editFn">编辑</button >
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '大标题',
      isShowEdit: false,
      editValue: '',
    }
  },
  methods: {
    editFn() {
        // 显示输入框
        this.isShowEdit = true      点击后展示编辑块
        // 获取焦点  
        this.$nextTick(()=> {   /* 因为vue是异步更新的  $nextTick：等dom更新完立即执行的函数体 */
             this.$refs.inp.focus() /* 用 focus()方法获取焦点 */
        })
    }  },
}
</script> 

3.问题

“显示之后”，立刻获取焦点是不能成功的！

原因：Vue 是异步更新DOM (提升性能)

4.解决方案

input标签后加 ref=“inp”
$nextTick：等 DOM更新后,才会触发执行此方法里的函数体

语法: this.$nextTick(函数体)

this.$nextTick(() => {
  this.$refs.inp.focus()
})

注意：$nextTick 内的函数体 一定是箭头函数，这样才能让函数内部的this指向Vue实例

day05

一、学习目标

1.自定义指令

• 基本语法（全局、局部注册）
• 指令的值
• v-loading的指令封装

2.插槽

• 默认插槽
• 具名插槽
• 作用域插槽

3.综合案例：商品列表

• MyTag组件封装
• MyTable组件封装

4.路由入门

• 单页应用程序
• 路由
• VueRouter的基本使用

二、自定义指令 自己的指令

v-focus自动获取焦点

v-loading控制加载效果

v-lazy图片加载

1.指令介绍

• 内置指令：v-html、v-if、v-bind、v-on… 这都是Vue给咱们内置的一些指令，可以直接使用

• 自定义指令：同时Vue也支持让开发者，自己注册一些指令。这些指令被称为自定义指令

  每个指令都有自己各自独立的功能

2.自定义指令

概念：自己定义的指令，可以封装一些DOM操作，扩展额外的功能

3.自定义指令语法

一进页面获取焦点 v-focus

自定义一个指令 将来都能用 1.全局注册main.js 2.局部注册在当前组件用

• 全局注册 也就是在main.js中注册

  //             指令名 我的 v-focus
  Vue.directive('指令名', {
    inserted (el) {  /*  el可以拿到元素比如输入框*/  
       /* inserted表示 当指令绑定的元素 被添加到页面当中的时候会 自动调用 */
      // 可以对 el 标签，扩展额外功能 ， 跟mounted类似
      el.focus()
    }
  })//自动获取焦点全局可用
  

• 局部注册

  //在Vue组件的配置项中
  directives: {
    "指令名": {
      inserted () {
        // 可以对 el 标签，扩展额外功能
        el.focus()
      }
    }
  }
  

• 使用指令

  注意：在使用指令的时候，一定要先注册，再使用，否则会报错
  使用指令语法： v-指令名。如：

  注册指令时不用加v-前缀，但使用时一定要加v-前缀

4.指令中的配置项介绍

inserted:被绑定元素插入父节点时调用的钩子函数

el：使用指令的那个DOM元素

5.代码示例

需求：当页面加载时，让元素获取焦点（autofocus在safari浏览器有兼容性）

App.vue

  <div>
    <h1>自定义指令</h1>
    <input v-focus ref="inp" type="text">
  </div>

6.总结

1.自定义指令的作用是什么？

2.使用自定义指令的步骤是哪两步？

三、自定义指令-指令的值 v-color=“颜色值” 输入颜色就改某个块的字体颜色

1.需求

实现一个 color 指令 - 传入不同的颜色, 给标签设置文字颜色

2.语法

1.在绑定指令时，可以通过“等号”的形式为指令 绑定 具体的参数值

<div v-color="color1">我是内容</div>

2.data里给颜色
data(){
return {
color1:‘red’
}
}

3.通过 binding.value 可以拿到指令值，指令值修改会 触发 update 函数

directive:{
        color:{/* 自定义指令名字 差v- */
        /* inserted 是元素加在页面中的效果，颜色初始化 */
           inserted (el,binding){
             /* blinding.value 就是指令的值，也就是颜色*/ 
             el.style.color = blinding.value 
           },
        /* update 是v-color的值 修改时触发，值变化后的效果，就是改颜色的意思 */
           update(el,binding){
               el.style.color = blinding.value 
           }
        }
      }

3.代码示例

App.vue

<template>
  <div>
     <!--显示红色--> 
    <h2 v-color="color1">指令的值1测试</h2>
     <!--显示蓝色--> 
    <h2 v-color="color2">指令的值2测试</h2>
     <button>
        改变第一个h1的颜色
    </button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      color1: 'red',
      color2: 'blue'
    }
  }
}
</script>

<style>
      directive:{
        color:{/* 自定义指令名字 差v- */
        /* inserted 是元素加在页面中的效果，颜色初始化 */
           inserted (el,binding){
             /* blinding.value 就是指令的值*/ 
             el.style.color = blinding.value 
           },
        /* update 是v-color的值 修改时触发，值变化后的效果，就是改颜色的意思 */
           update(el,binding){
               el.style.color = blinding.value 
           }
        }
      }
</style>

四、自定义指令-v-loading指令的封装（常用） 加载效果

1.场景

实际开发过程中，发送请求需要时间，在请求的数据未回来时，页面会处于空白状态 => 用户体验不好

2.需求

封装一个 v-loading 指令，实现加载中的效果

3.分析

1.本质 loading效果就是一个蒙层，盖在了盒子上

2.数据请求中，开启loading状态，添加蒙层

3.数据请求完毕，关闭loading状态，移除蒙层

4.实现

1.准备一个 loading类，通过伪元素定位，设置宽高，实现蒙层，将加载图片设为背景图
css
在块上class加上loading类即可

2.开启关闭 loading状态（添加移除蒙层），本质只需要添加 和 移除类即可
add 和 remove

3.结合自定义指令的语法进行封装复用 进入页面就加载，出现数据就渲染
v-loading=“isLoading” 在块标签加

data(){ return{ } }
isLoading:true

当数据请求完成移除 loading 类
this.list = res.data.data
this.isLoading = false

directives:{
loading:{
inserted(el,binding){
binding.value ? el.classList.add(‘loading’) : el.classList.remove(‘loading’)
},
update(el,binding){
binding.value ? el.classList.add(‘loading’) : el.classList.remove(‘loading’)
}
}
}

.loading:before {   /* before代表伪元素 */
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #fff url("./loading.gif") no-repeat center;
}
在块上加上loading类即可

5.准备代码

<template>
  <div class="main">
    <div class="box loading">
      <ul>
        <li v-for="item in list" :key="item.id" class="news">
          <div class="left">
            <div class="title">{{ item.title }}</div>
            <div class="info">
              <span>{{ item.source }}</span>
              <span>{{ item.time }}</span>
            </div>
          </div>
          <div class="right">
            <img :src="item.img" alt="">
          </div>
        </li>
      </ul>
    </div> 
  </div>
</template>

<script>
// 安装axios =>  yarn add axios || npm i axios
import axios from 'axios'

// 接口地址：http://hmajax.itheima.net/api/news
// 请求方式：get
export default {
  data () {
    return {
      list: [],
      isLoading: false,
      isLoading2: false
    }
  },
  async created () {
    // 1. 发送请求获取数据
    const res = await axios.get('http://hmajax.itheima.net/api/news')
    
    setTimeout(() => { /* 延时器 ，这里是模拟得到数据较慢的情况*/
      // 2. 更新到 list 中，用于页面渲染 v-for
      this.list = res.data.data
    }, 2000)
  }
}
</script>

<style>
.loading:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #fff url('./loading.gif') no-repeat center;
}

.box2 {
  width: 400px;
  height: 400px;
  border: 2px solid #000;
  position: relative;
}



.box {
  width: 800px;
  min-height: 500px;
  border: 3px solid orange;
  border-radius: 5px;
  position: relative;
}
.news {
  display: flex;
  height: 120px;
  width: 600px;
  margin: 0 auto;
  padding: 20px 0;
  cursor: pointer;
}
.news .left {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-right: 10px;
}
.news .left .title {
  font-size: 20px;
}
.news .left .info {
  color: #999999;
}
.news .left .info span {
  margin-right: 20px;
}
.news .right {
  width: 160px;
  height: 120px;
}
.news .right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>

五、弹窗插槽-默认插槽 弹窗内容自定义 slot MyDialog 只改变一个位置

1.作用

让组件内部的一些 结构 支持 自定义

2.需求

将需要多次显示的对话框,封装成一个组件

3.问题

组件的内容部分，不希望写死，希望能使用的时候自定义。怎么办

4.插槽的基本语法 站位 父内自定义

1. 组件内需要定制的结构部分，
   改用****占位

2. 使用组件时,固定组件名
   ****标签内部, 传入结构替换slot

3. 给插槽传入内容时，可以传入纯文本、html标签、组件

5.代码示例

MyDialog.vue 子组件

<template>
  <div class="dialog">
    <div class="dialog-header">
      <h3>友情提示</h3>
      <span class="close">✖️</span>
    </div>

    <div class="dialog-content">
     <slot></slot>  /* 内容自定义用slot站位，将来父内子标签名字必须是<MyDialog>,在该标签内写自定义内容， */
    </div>
    <div class="dialog-footer">
      <button>取消</button>
      <button>确认</button>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {

    }
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.dialog {
  width: 470px;
  height: 230px;
  padding: 0 25px;
  background-color: #ffffff;
  margin: 40px auto;
  border-radius: 5px;
}
.dialog-header {
  height: 70px;
  line-height: 70px;
  font-size: 20px;
  border-bottom: 1px solid #ccc;
  position: relative;
}
.dialog-header .close {
  position: absolute;
  right: 0px;
  top: 0px;
  cursor: pointer;
}
.dialog-content {
  height: 80px;
  font-size: 18px;
  padding: 15px 0;
}
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
.dialog-footer button {
  width: 65px;
  height: 35px;
  background-color: #ffffff;
  border: 1px solid #e1e3e9;
  cursor: pointer;
  outline: none;
  margin-left: 10px;
  border-radius: 3px;
}
.dialog-footer button:last-child {
  background-color: #007acc;
  color: #fff;
}
</style>

App.vue

<template>
  <div>
    <MyDialog>
        你确定要删除吗               /* 内容自定义，将来该弹窗组件可多次复用，所以<MyDialog>注册为全局注册 */
    </MyDialog>
  </div>
</template>

<script>
import MyDialog from './components/MyDialog.vue'
export default {
  data () {
    return {

    }
  },
  components: {
    MyDialog
  }
}
</script>

<style>
body {
  background-color: #b3b3b3;
}
</style>

6.总结

场景：组件内某一部分结构不确定，想要自定义怎么办
slot +

使用：插槽的步骤分为哪几步？
站位
内添加自定义内容

六、弹窗插槽-后备内容（默认值） slot内加弹窗默认内容，若自定义，则默认内容会被取代

1.问题

通过插槽完成了内容的定制，传什么显示什么, 但是如果不传，则是空白

能否给插槽设置 默认显示内容 呢？

2.插槽的后备内容

封装组件时，可以为预留的 <slot> 插槽提供后备内容（默认内容）。

3.语法

在 标签内，放置内容, 作为默认显示内容

4.效果

• 外部使用组件时，不传东西，则slot会显示后备内容

• 外部使用组件时，传东西了，则slot整体会被换掉

5.代码示例

App.vue

<template>
  <div>
    <MyDialog></MyDialog>
    <MyDialog>
      你确认要退出么
    </MyDialog>
  </div>
</template>

<script>
import MyDialog from './components/MyDialog.vue'
export default {
  data () {
    return {

    }
  },
  components: {
    MyDialog
  }
}
</script>

<style>
body {
  background-color: #b3b3b3;
}
</style>

七、弹窗插槽-具名插槽 弹窗标题，内容，按钮自定义 弹窗 搭配父的子弹窗组件 <template v-slot:名字1>自定义标题 v-slot:name 简写 #name

1.需求

一个组件内有多处结构，需要外部传入标签，进行定制

上面的弹框中有三处不同，但是默认插槽只能定制一个位置，这时候怎么办呢?

2.具名插槽语法

• 多个slot使用name属性区分名字

• template配合v-slot:名字来分发对应标签

3.v-slot的简写

v-slot写起来太长，vue给我们提供一个简单写法 v-slot —> #

4.总结

• 组件内 有多处不确定的结构 怎么办?
  弹窗 搭配

父的子弹窗组件 <template v-slot:名字1>

自定义标题

<template v-slot:名字2>

自定义内容

<template v-slot:名字3>
自定义标题

• v-slot:插槽名可以简化成什么?
  #插槽名

八、 作用域插槽 slot传值实现删除，查看功能 渲染了俩表格，但是需要定制某个位置，那个位置用slot站位，按钮在父组件时需要通过slot传值

删除和查看按钮写在父组件里，内容在表格子组件

1.插槽分类

• 默认插槽 只改内容

• 具名插槽 三个位置都可以改

  插槽只有两种，作用域 插槽不属于插槽的一种分类

2.作用

定义slot 同时, 是可以传值的。给 插槽 上可以 绑定数据，将来 使用组件时可以用

3.场景

封装表格组件

4.使用步骤

1. 给子表格的 slot 标签, 以 添加属性的方式传值 数组列表的就传整行给父

   <slot :row="item" msg="测试文本" name="default"></slot>
   

2. 所有添加的属性, 都会被收集到一个对象中 实际上面的传参就是个对象 name是接收数据需要的插槽名

   {
   row:{ id: 2, name:'孙大明',age:'19' },
   msg:'测试文本'
   }
   

3. 在template中, 通过 #插槽名= “obj” 接收，默认插槽名为 default obj就是上面 子发过来的对象

 <MyTable :sonList="list">
   <template v-slot:default="obj">    /* 接收！ obj 就是上面 子发过来的对象,obj是固定名*/
     <button @click="del(obj.row.id)">删除</button>   /* 之前学过filter过滤删除  发请求删除  组件时，子传父id this.$emit('wantDel',item.id) */
   </template>
 </MyTable>

 <MyTable :sonList="list2">
   <template v-slot:default="obj">    /* 接收！ obj 就是上面 子发过来的对象,obj是固定名*/
     <button @click="show(obj.row)">查看</button> /* 函数参数为对象的row整行数据 */   
   </template>
 </MyTable>

4.父收到id后进行删除和查看
del(id){
this.list = this.list.filter((item)=>item.id !== id)
},
show(row){
alert(姓名：${row.name} 年龄：${row.age})
}

5.代码示例

MyTable.vue

<template>
  <table class="my-table">
    <thead>
      <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>年纪</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
    /* 数据写死，牛魔，父传子数据渲染 */
      <tr v-for="(item.index) in sonList":key="item.id" >
        <td>{{index+1}}</td>
        <td>{{item.name}}</td>
        <td>{{item.age}}</td>
        <td>
        /* 想要实现删除， */
        /* 1. 给slot标签，添加 属性的方式*/

          <slot :row ="item"  name="default" > </slot> /* 把一整行的数据 传给父 */         /* 此时发过去的是一个对象  {
                                                                                                   row:{ id:2,name:'孙大明',age:19 } 
                                                                                                  } 此时父可以实现删除*/   
        
        /* 父的子标签里将来<MyDialog> 自定义按钮   <button>查看/删除</button> */
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  props: {
    sonList: Array
  }
}
</script>

<style scoped>
.my-table {
  width: 450px;
  text-align: center;
  border: 1px solid #ccc;
  font-size: 24px;
  margin: 30px auto;
}
.my-table thead {
  background-color: #1f74ff;
  color: #fff;
}
.my-table thead th {
  font-weight: normal;
}
.my-table thead tr {
  line-height: 40px;
}
.my-table th,
.my-table td {
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
}
.my-table td:last-child {
  border-right: none;
}
.my-table tr:last-child td {
  border-bottom: none;
}
.my-table button {
  width: 65px;
  height: 35px;
  font-size: 18px;
  border: 1px solid #ccc;
  outline: none;
  border-radius: 3px;
  cursor: pointer;
  background-color: #ffffff;
  margin-left: 5px;
}
</style>

App.vue

<template>
  <div>/* 为什么:sonList一样  因为将来复用表格时传不同数据 子那边接收时不需要改 props*/
    <MyTable :sonList="list">
          <template v-slot:default='obj'>
            <button @click="del(obj.row.id)">  /* 不能拿到子组件的id进行删除,需要子表格传过来id */
          	删除    
    	    </button>          
          </template>
    </MyTable >  /* 父传子数据 准备接受渲染 */
    
    <MyTable :sonList="list2">
        <template v-slot:default="obj">
           <button @click="show(obj.row)">   /* 整行传参 */
          	查看
    	  </button>
        </template>
    </MyTable> /* 渲染了俩表格，但是需要定制某个位置，那个位置用slot站位 */
  
  </div >
</template>

<script>
  import MyTable from './components/MyTable.vue'
  export default {
    data () {
      return {
     	list: [
            { id: 1, name: '张小花', age: 18 },
            { id: 2, name: '孙大明', age: 19 },
            { id: 3, name: '刘德忠', age: 17 },
          ],
          list2: [
            { id: 1, name: '赵小云', age: 18 },
            { id: 2, name: '刘蓓蓓', age: 19 },
            { id: 3, name: '姜肖泰', age: 17 },
          ]
      }
    },
    components: {
      MyTable
    },
    methods:{
        del(id){
           this.list = this.list.filter((item)=> item.id !==id )
        },
        show(obj.row){
            alert(` 姓名：${obj.row.name}  年龄${obj.row.age} `)
        }
    }
  }
</script>

6.总结

1.作用域插槽的作用是什么？
同个组件想多次复用但是某个位置不同

2.作用域插槽的使用步骤是什么？

九、综合案例 - 商品列表-MyTag组件抽离 茶壶

1.需求说明

1. my-tag 标签组件封装

​ (1) 双击显示输入框，输入框获取焦点

一个显示一个隐藏 双击标签频繁切换 切换之后立即获取焦点v-focus
isEdit=false

v-if="isEdit"   加在隐藏编辑块
v-else       

@dblclick=“fixTag” 双击把false变为true

methods:{
fixTag(){
this.isEdit = true
}
}

main.js中对v-focus进行全局注册

Vue.directive(‘v-focus’, {
inserted (el) {
el.focus()
}
})

在输入框处v-focus即可

​ (2) 失去焦点，隐藏输入框
失去焦点事件叫@blur 隐藏输入框即控制v-if=“false”
@blur=“hide”

methods:{
hide(){
this.isEdit = false

}

}

茶具

​ (3) 回显标签信息 （回车显示修改的数据） (初始数据由 父传子数据渲染标签)

编辑时：回车时修改信息，子传父输入框内容 进行修改请求，

1.父传子数据渲染
msg:‘紫砂壶’
:sonMsg = “msg”

子接受
props:{
sonMsg:String
}

子渲染在标签处
{{ sonMsg }}

2.子根据输入框内容进行请求修改
输入框先双向绑定一个空字符串
v-model=“sonFix”

sonFix=“”

回车时想修改父里的数据 不能直接改 需要通过$emit发请求
输入框处 @keyup.enter=“textFix”

   textFix(){
       this.$emit('wantFix',this.sonFix)
   }

3.父改数据
父的子标签处 @wantfix=“dieFix”

dieFix(sonFix){
this.msg = sonFix
}

2. my-table 表格组件封装

​ (1) 动态传递表格数据渲染

​ (2) 表头支持用户自定义

​ (3) 主体支持用户自定义

2.代码准备

<template>
  <div class="table-case">
    <table class="my-table">
      <thead>
        <tr>
          <th>编号</th>
          <th>名称</th>
          <th>图片</th>
          <th width="100px">标签</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>梨皮朱泥三绝清代小品壶经典款紫砂壶</td>
          <td>
            <img src="https://yanxuan-item.nosdn.127.net/f8c37ffa41ab1eb84bff499e1f6acfc7.jpg" />
          </td>
          <td> /* 此处封装成组件 */
            <MyTag></MyTag>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: 'TableCase',
  components: {},
  data() {
    return {
      goods: [
        {
          id: 101,
          picture:
            'https://yanxuan-item.nosdn.127.net/f8c37ffa41ab1eb84bff499e1f6acfc7.jpg',
          name: '梨皮朱泥三绝清代小品壶经典款紫砂壶',
          tag: '茶具',
        },
        {
          id: 102,
          picture:
            'https://yanxuan-item.nosdn.127.net/221317c85274a188174352474b859d7b.jpg',
          name: '全防水HABU旋钮牛皮户外徒步鞋山宁泰抗菌',
          tag: '男鞋',
        },
        {
          id: 103,
          picture:
            'https://yanxuan-item.nosdn.127.net/cd4b840751ef4f7505c85004f0bebcb5.png',
          name: '毛茸茸小熊出没，儿童羊羔绒背心73-90cm',
          tag: '儿童服饰',
        },
        {
          id: 104,
          picture:
            'https://yanxuan-item.nosdn.127.net/56eb25a38d7a630e76a608a9360eec6b.jpg',
          name: '基础百搭，儿童套头针织毛衣1-9岁',
          tag: '儿童服饰',
        },
      ],
    }
  },
}
</script>

<style lang="less" scoped>
.table-case {
  width: 1000px;
  margin: 50px auto;
  img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    vertical-align: middle;
  }

  .my-table {
    width: 100%;
    border-spacing: 0;
    img {
      width: 100px;
      height: 100px;
      object-fit: contain;
      vertical-align: middle;
    }
    th {
      background: #f5f5f5;
      border-bottom: 2px solid #069;
    }
    td {
      border-bottom: 1px dashed #ccc;
    }
    td,
    th {
      text-align: center;
      padding: 10px;
      transition: all 0.5s;
      &.red {
        color: red;
      }
    }
    .none {
      height: 100px;
      line-height: 100px;
      color: #999;
    }
  }
  .my-tag {
    cursor: pointer;
    .input {
      appearance: none;
      outline: none;
      border: 1px solid #ccc;
      width: 100px;
      height: 40px;
      box-sizing: border-box;
      padding: 10px;
      color: #666;
      &::placeholder {
        color: #666;
      }
    }
  }
}
</style>

MyTag.vue

<template>
  <div class="my-tag">
  <input
      class="input"
      type="text"
      placeholder="输入标签" 
      v-if="isEdit"
    /> 
    <div
      v-else
      class="text"  >
       茶具
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
          isEdit:true
        }
    },
    methods:{
      
    }
}
</script>

<style lang="less" scoped>
.my-tag {
  cursor: pointer;
  .input {
    appearance: none;
    outline: none;
    border: 1px solid #ccc;
    width: 100px;
    height: 40px;
    box-sizing: border-box;
    padding: 10px;
    color: #666;
    &::placeholder {
      color: #666;
    }
  }
}
</style>

App.vue

<template>
  ...
 <tbody>
       <tr>
          ....
          <td>
            <MyTag></MyTag>
          </td>
       </tr>
 </tbody>
 ...
</template>
<script>
import MyTag from './components/MyTag.vue'
export default {
  name: 'TableCase',
  components: {
    MyTag,
  },
 ....
 </script>

3.my-tag组件封装-创建组件 标签组件需求：双击显示输入框

十、综合案例-MyTag组件控制显示隐藏

MyTag.vue

<template>
  <div class="my-tag">
    <input
      v-if="isEdit"
      v-focus
      ref="inp"
      class="input"
      type="text"
      placeholder="输入标签" 
      @blur="isEdit = false"   /* 失去焦点不显示输入框 */
    />
    <div 
      v-else
      @dblclick="handleClick"
      class="text">
       茶具
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isEdit: false
    }
  },
  methods: {
    handleClick () {
      this.isEdit = true
    }
  }
}
</script> 

main.js

// 封装全局指令v-focus   自动获取焦点全局注册
Vue.directive('focus', {
  // 指令所在的dom元素，被插入到页面中时触发
  inserted (el) {
    el.focus()
  }
})

十一、综合案例-MyTag组件进行v-model绑定

App.vue

<MyTag v-model="tempText"></MyTag>
<script>
    export default {
        data(){
            tempText:'水杯'
        }
    }
</script>

MyTag.vue

<template>
  <div class="my-tag">
    <input
      v-if="isEdit"
      v-focus
      ref="inp"
      class="input"
      type="text"
      placeholder="输入标签"
      :value="value"
      @blur="isEdit = false"
      @keyup.enter="handleEnter"
    />
    <div 
      v-else
      @dblclick="handleClick"
      class="text">
      {{ value }}  
      /* 渲染输入框的 @input="value=$event.target.value" */
    </div>
  </div>
</template>

<script>
export default {
  props: {
    value: String
  },
  data () {
    return {
      isEdit: false
    }
  },
  methods: {
    handleClick () {
      this.isEdit = true
    },
    handleEnter (e) {
      // 非空处理
      if (e.target.value.trim() === '') return alert('标签内容不能为空')
      this.$emit('input', e.target.value)
      // 提交完成，关闭输入状态
      this.isEdit = false
    }
  }
}
</script> 

十二、综合案例-封装MyTable组件-动态渲染数据

App.vue

<template>
  <div class="table-case">
    <MyTable :data="goods"></MyTable>
  </div>
</template>

<script>
import MyTable from './components/MyTable.vue'
export default {
  name: 'TableCase',
  components: { 
    MyTable
  },
  data(){
    return {
        ....
    }
  },
}
</script> 

MyTable.vue

<template>
  <table class="my-table">
    <thead>
      <tr>
        <th>编号</th>
        <th>名称</th>
        <th>图片</th>
        <th width="100px">标签</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in data" :key="item.id">
       <td>{{ index + 1 }}</td>
        <td>{{ item.name }}</td>
        <td>
          <img
            :src="item.picture"
          />
        </td>
        <td>
          标签内容
         <!-- <MyTag v-model="item.tag"></MyTag> -->
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      required: true
    }
  }
};
</script>

<style lang="less" scoped>

.my-table {
  width: 100%;
  border-spacing: 0;
  img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    vertical-align: middle;
  }
  th {
    background: #f5f5f5;
    border-bottom: 2px solid #069;
  }
  td {
    border-bottom: 1px dashed #ccc;
  }
  td,
  th {
    text-align: center;
    padding: 10px;
    transition: all .5s;
    &.red {
      color: red;
    }
  }
  .none {
    height: 100px;
    line-height: 100px;
    color: #999;
  }
}

</style>

十三、综合案例-封装MyTable组件-自定义结构

App.vue

<template>
  <div class="table-case">
    <MyTable :data="goods">
      <template #head>
        <th>编号</th>
        <th>名称</th>
        <th>图片</th>
        <th width="100px">标签</th>
      </template>

      <template #body="{ item, index }">
        <td>{{ index + 1 }}</td>
        <td>{{ item.name }}</td>
        <td>
          <img
            :src="item.picture"
          />
        </td>
        <td>
          <MyTag v-model="item.tag"></MyTag>
        </td>
      </template>
    </MyTable>
  </div>
</template>

<script>
import MyTag from './components/MyTag.vue'
import MyTable from './components/MyTable.vue'
export default {
  name: 'TableCase',
  components: {
    MyTag,
    MyTable
  },
  data () {
    return {
      ....
  }
}
</script>
 

MyTable.vue

<template>
  <table class="my-table">
    <thead>
      <tr>
        <slot name="head"></slot>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in data" :key="item.id">
        <slot name="body" :item="item" :index="index" ></slot>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      required: true
    }
  }
};
</script>

十四、单页应用程序介绍 SPA

1.概念

单页应用程序：SPA【Single Page Application】是指所有的功能都在一个html页面上实现

2.具体示例

单页应用网站： 网易云音乐 https://music.163.com/ 导航部分是固定的 点击导航下边切换

多页应用网站：京东 https://jd.com/ 每点一次跳转到新的页面

3.单页应用 VS 多页面应用

单页应用类网站：系统类网站 / 内部网站 / 文档类网站 / 移动端站点

多页应用类网站：公司官网 / 电商类网站

4.总结

1.什么是单页面应用程序?
所有的功能都在一个html页面上实现

2.单页面应用优缺点?
按需更新性能高 ，开发效率高 ，用户体验好

3.单页应用场景？

十五、路由介绍 VueRouter

1.思考

单页面应用程序，之所以开发效率高，性能好，用户体验好

最大的原因就是：页面按需更新

比如当点击【发现音乐】和【关注】时，只是更新下面部分内容，对于头部是不更新的

要按需更新，首先就需要明确：访问路径和 组件的对应关系！

访问路径 和 组件的对应关系如何确定呢？ 路由

2.路由的介绍

生活中的路由：设备和ip的映射关系

Vue中的路由：路径和组件的映射关系

3.总结

• 什么是路由
• Vue中的路由是什么

十六、路由的基本使用 点击切换导航栏 并在下面显示对应内容

1.目标

认识插件 VueRouter，掌握 VueRouter 的基本使用步骤

2.作用

修改地址栏路径时，切换显示匹配的组件

3.说明

Vue 官方的一个路由插件，是一个第三方包

4.官网

https://v3.router.vuejs.org/zh/

5.VueRouter的使用（5+2） 新电脑

固定5个固定的步骤（不用死背，熟能生巧,一个项目就一次，检查有就行）

1. 下载 VueRouter 模块到当前工程，版本3.6.5 Vue2 VueRouter3 Vuex3 344

   yarn add vue-router@3.6.5  或 npm i vue-router@3.6.5
   

2. main.js中引入VueRouter

   import VueRouter from 'vue-router'
   

3. 安装注册 插件初始化 main.js

   Vue.use(VueRouter)
   

4. 创建路由对象 main.js
   将来在这个位置配置路由，
   ({ routes:[{path:‘/访问路径’,component:路由名（以前叫组件名）}] })

   const router = new VueRouter()
   

   /* 到这一步router报错，因为vueRouter未与下面的vue实例进行关联 */

5. 注入，将路由对象注入到new Vue实例中，建立关联

   new Vue({
     render: h => h(App),
     router:router    进行关联
   }).$mount('#app')
   
   

当我们配置完以上5步之后 就可以看到浏览器地址栏中的路由 变成了 /#/的形式。表示项目的路由已经被Vue-Router管理了

6.代码示例 main.js中进行

// 路由的使用步骤 5 + 2
// 5个基础步骤
// 1. 下载 v3.6.5
// yarn add vue-router@3.6.5
// npm install vue-router@3.6.5
// 2. 引入
// 3. 安装注册 Vue.use(Vue插件)
// 4. 创建路由对象
// 5. 注入到new Vue中，建立关联

// 2. 引入
import VueRouter from 'vue-router'

// 3. 安装注册 Vue.use(Vue插件)
Vue.use(VueRouter) // VueRouter插件初始化

// 4. 创建路由对象
const router = new VueRouter()

// 5. 注入到new Vue中，建立关联
new Vue({
  render: h => h(App),
  router
}).$mount('#app')

7.两个核心步骤 main.js

1. 创建需要的组件 (views目录)，配置路由规则
   三个组件名叫Find,My,Friends

//后加的
import 组件名 from 左边组件所在位置

const router = new VueRouter({
 //routes 路由规则们
 //route 一条路由规则 {path：'',component:组件名}
 routes: [
   { path: '/find', component:Find},
   { path: '/my', component:My},
   { path: '/myfriend', component:Friends},
   /* 这里的路径设置后还需要设置 a标签跳转 和 router-view展示区  */
 ]
})

2. 配置导航，配置路由出口(路径匹配的组件显示的位置)

App.vue

<div class="footer_wrap">
  <a href="#/find">发现音乐</a>  点a标签跳转到对应路径的组件
  <a href="#/my">我的音乐</a>
  <a href="#/friend">朋友</a>
</div>
<div class="top">
  <router-view></router-view>  组建的内容显示在这里
</div>

8.总结

1. 如何实现 路径改变，对应组件 切换,应该使用哪个插件?
   VueRouter

2. Vue-Router的使用步骤是什么(5+2)?

十七、组件的存放目录问题 components组件 views路由组件

注意： .vue文件 本质无区别

1.组件分类

.vue文件分为2类，都是 .vue文件（本质无区别）

• 页面组件 （配置路由规则时使用的组件）
• 复用组件（多个组件中都使用到的组件）

2.存放目录

分类开来的目的就是为了 更易维护

1. src/views文件夹

   页面组件 - 页面展示 - 配合路由用 点击某些导航列表进行切换展示不同区域的块

2. src/components文件夹

   复用组件 - 展示数据 - 常用于复用 列表渲染这些

3.总结

• 组件分类有哪两类？分类的目的？
• 不同分类的组件应该放在什么文件夹？作用分别是什么？

十八、路由的封装抽离 入门时路由全塞main.js router文件夹下创index.js

步骤：router文件夹下创index.js （5的前四步 + 2的第一步 + 导入vue + 导出router + main.js中导入）

 里边写vuerouter 的 5+2 

1.安装（安装一次即可）
yarn add vue-router@3.6.5
npm install vue-router@3.6.5

2. 引入
   import VueRouter from ‘vue-router’

import 组件名 from ‘左边路由组件所在位置’
…

3. 安装注册 Vue.use(Vue插件)
   Vue.use(VueRouter) （此时还需要导入一下vue才行）

import Vue from ‘vue’

4. 创建路由对象
   const router = new VueRouter({

routes: [
{ path: '/find', component:Find},
{ path: '/my', component:My},
{ path: '/myfriend', component:Friends},
/* 这里的路径设置后还需要设置 a标签跳转 和 router-view展示区  */

]
})

export default router

main.js中导入router
import router from ‘./router/index.js’

目标：将路由模块抽离出来。 好处：拆分模块，利于维护

路径简写：

脚手架环境下 @指代src目录，可以用于快速引入组件

绝对路径@可以直接从src开始往下找文件

总结：

• 路由模块的封装抽离的好处是什么？
• 以后如何快速引入组件？
  ‘@…’ @可以直接从src文件开始找

day06

一、声明式导航-导航链接 导航高亮 router-link标签实现 代替a使用以实现高亮

1.需求

实现导航高亮效果

如果使用a标签进行跳转的话，需要给当前跳转的导航加样式，同时要移除上一个a标签的样式，太麻烦！！！

2.解决方案

vue-router 提供了一个全局组件 router-link (取代 a 标签)

• 能跳转，配置 to 属性指定路径(必须) 。本质还是 a 标签 ，to 无需 #
• 能高亮，默认就会提供高亮类名，可以直接设置高亮样式

语法：
曾经写法
发现音乐

如今写法(偷个懒少写个 # )
发现音乐
区别：默认点击就跳转，写样式即可高亮，不需要写js代码

  <div>
    <div class="footer_wrap">
      <router-link to="/find">发现音乐</router-link>
      <router-link to="/my">我的音乐</router-link>
      <router-link to="/friend">朋友</router-link>
    </div>
    <div class="top">
      <!-- 路由出口 → 匹配的组件所展示的位置 -->
      <router-view></router-view>
    </div>
  </div>

3.通过router-link自带的两个样式进行高亮

使用router-link跳转后，我们发现。当前点击的链接默认加了两个class的值 router-link-exact-active和router-link-active 审查元素可以看到

我们可以给任意一个class属性添加高亮样式即可实现功能
a.router-link-active{ 用的多
bdc:‘pink’ 设计样式
}

4.总结

• router-link是什么？
  VueRouter提供的全局组件，用于代替a标签

• router-link怎么用？
  
  必须传入 to 属性，指定路由路径值

router-link-active{
bdc:‘pink’ 设计样式
}

• router-link的好处是什么？
  能跳转 能高亮 能代替a标签使用（自带激活时的类名）

二、声明式导航-两个类名 两个高亮类名用短的 router-link-active

当我们使用跳转时，自动给当前导航加了两个类名

1.router-link-active

模糊匹配（用的多）

to=“/my” 可以匹配 /my /my/a /my/b …

只要是以/my开头的路径 都可以和 to="/my"匹配到

2.router-link-exact-active

精确匹配

to=“/my” 仅可以匹配 /my

3.在地址栏中输入二级路由查看类名的添加

4.总结

• router-link 会自动给当前导航添加两个类名，有什么区别呢？
  短的模糊（最为常用）
  长的精确

三、声明式导航-自定义类名（了解）不想用router-link-active这个名字

1.问题

router-link的两个高亮类名 太长了，我们希望能定制怎么办

2.解决方案

/router/index.js中
我们可以在创建路由对象时，额外配置两个配置项即可。 linkActiveClass和linkExactActiveClass

const router = new VueRouter({
  routes: [...],
  linkActiveClass: "类名1",
  linkExactActiveClass: "类名2"
})

3.代码演示

// 创建了一个路由对象
const router = new VueRouter({
  routes: [
    ...
  ], 
  linkActiveClass: 'active', // 配置模糊匹配的类名
  linkExactActiveClass: 'exact-active' // 配置精确匹配的类名
})

4.总结

如何自定义router-link的两个高亮类名

四、声明式导航（router-link导航链接） -跳转同时传数据 查询参数传参

1.目标

在跳转路由时，进行传参

比如：现在我们在搜索页点击了热门搜索链接，跳转到详情页，需要把点击的内容带到详情页，改怎么办呢？

2.跳转传参 跳转内容一步到位

我们可以通过两种方式，在跳转的时候把所需要的参数传到其他页面中

- 查询参数传参(多个参数传参) 两步 a标签传参

点击链接跳转处：
好啊
+
接收参数的路由处：
{{ $route.query.参数名 }}

接收方mounted(){}想通过参数发请求
前面多加this.

- 动态路由传参 三步

router文件夹下index.js配路由的同时定义参数
const router = new VueRouter({
routes: [
{ path: ‘/find/:参数名?’, component:Find} /* 在:参数名后面加个?，即使不传参也显示内容 /
/ 这里的路径设置后还需要设置 a标签跳转 和 router-view展示区 */
]
})
+
点击链接跳转处路径后加/参数
好啊
+
跳到处接收参数
{{ $route.params.参数名}}

重定向 默认页面

配路由处多配一项
{path:‘/’,redirect:‘/默认页面的路径’}

404 用户搜索不存在的路径 找不到网页

配路由处最后面！！
配路由 导入 + 注册
import NotFind from ‘@/view/NotFind’

{path:‘*’,component:NotFind }
+
创组件路由，views下创建一个NotFind组件路由
加内容
Page Not Find 404

去#号

hash模式带# history不带#（常用） 记得提醒后台
配路由处
const router = new VueRouter({
mode:‘history’,
routes:[{path:‘’,component:},…]
})

点击跳转 两种

1. path路径跳转
   步骤：注册点击事件 + 方法跳转
   @click=" tiaoZhuan"

tiaoZhuan(){
两种写法： 简写 、 完整
this.$router.push{(}^{\prime }/路由路{径}^{\prime })注意，传参的是$route,跳转是$router或this.$router.push({ 传参的时候会用到
path:‘/路由路径’
})
}
2. name命名路由进行跳转（给路由起名字进行跳转，路径较长时可以通过该方法简化代码）
步骤：
路由命名
{ name:‘自定义名字’ , path:‘/自定义路径’,component:路由组件名}
+

注册点击事件
@click=“tiaoZ”

方法内通过名字name跳转
methods:{
tiaoZ(){
this.$router.push({
name:‘上面的自定义名字’
})
}
}

点击按钮事件并且传参传参 path和name都可分别支持两种传参方法

可支持查询参数传参
简写：2步： “/路径?参数名=参数&…” + 获取$route.query.参数名完整对象写法：2步：path{:}^{\prime }路{径}^{\prime },query:参数名1:参数1,参数名2:参数2+获取$router.query.参数名

和 动态路由传参
3步：定于路由时定义参数:参数名 + 事件处 /路径/参数名 + 获取$router.params.参数名

点击按钮方法内push通过path和name传参

怎么选择path 还是 name? 看路径长不长 path短 name长变短

1. path 查询参数传参 + 动态路由传参

a.path 搭配 查询参数传参 query 多个参数
注册点击事件
@click=“chuanC”
+
方法内push方法通过path传参
chuanC(){
this.$router.push(‘/路径?参数名=参数&…’)
}
或完整(多个参数推荐使用)
chuanC(){
this.$router.push({
path：‘/路径’,
query:{
参数名1:参数1,
参数名2:参数2
}
})
}
+获取
$route.query.参数名(js加this)注意：获取时$route,push传参时$router

b.path 搭配 动态路由传参 4步 params 单个参数
配路由时定义参数名 path:‘/路径/:参数名?’
+
注册点击事件
@click=“chuanC”
+
方法内写
chuanC(){
this.$router.push(‘/路径/参数’)
}
+
接收参数
$route.params.参数

2.name 查询参数传参 + 动态路由传参

a.name 搭配 查询参数传参query 4步
配路由时name:‘路由名字’
+
注册点击事件
@click=“chuanC”
+
chuanC(){
this.$router.push({
name：‘名字’,
query:{
参数名1:参数1,
参数名2:参数2
}
})
}
+获取
$route.query.参数名 (js加this)

b.name 搭配 动态路由传参 pamams
路由取名{name:‘/自定义路由名/:自定义参数名?’,path:‘’,component:}
+
点击事件
@click=“chuanC”
+
方法传参
chuanC(){
name:‘路由自定义名’,
parmas:{
参数名1:参数1,
}
}
+
接收参数
$route.params.参数名

4.代码演示

App.vue 高亮导航栏

<template>
  <div id="app">
    <div class="link">
      <router-link to="/home">首页</router-link>
      <router-link to="/search">搜索页</router-link>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.link {
  height: 50px;
  line-height: 50px;
  background-color: #495150;
  display: flex;
  margin: -8px -8px 0 -8px;
  margin-bottom: 50px;
}
.link a {
  display: block;
  text-decoration: none;
  background-color: #ad2a26;
  width: 100px;
  text-align: center;
  margin-right: 5px;
  color: #fff;
  border-radius: 5px;
}
</style>

Home.vue 首页

<template>
  <div class="home">
    <div class="logo-box"></div>
    <div class="search-box">
      <input type="text">
      <button>搜索一下</button>
    </div>
    <div class="hot-link">
热门搜索：

    查询参数传参（两步） 
    点击跳转处 to="/路径?参数名=参数"
    跳转到的路由组件处接收 $route.query.参数名    mounted中加this

      <router-link to="/search?words=黑马程序员">黑马程序员</router-link>
      <router-link to="/search?words=前端培训">前端培训</router-link>
      <router-link to="/search?words=如何成为前端大牛">如何成为前端大牛</router-link>
    三个链接点击后全都是去搜索页

    动态路由传参（三步）
       配置路由处 routes:[{path:'/路由取名指定路径/:参数名?',component:路由名}]   /* 加个问号防止空白 */
       点击跳转处 to="/路径/参数"
       跳转到的路由组件处接收参数 $route.params.参数名 mounted中加this
    </div>
  </div>
</template>

<script>
export default {
  name: 'FindMusi`c'```````````````````````1f`
}
</script>

<style>
.logo-box {
  height: 150px;
  background: url('@/assets/logo.jpeg') no-repeat center;
}
.search-box {
  display: flex;
  justify-content: center;
}
.search-box input {
  width: 400px;
  height: 30px;
  line-height: 30px;
  border: 2px solid #c4c7ce;
  border-radius: 4px 0 0 4px;
  outline: none;
}
.search-box input:focus {
  border: 2px solid #ad2a26;
}
.search-box button {
  width: 100px;
  height: 36px;
  border: none;
  background-color: #ad2a26;
  color: #fff;
  position: relative;
  left: -2px;
  border-radius: 0 4px 4px 0;
}
.hot-link {
  width: 508px;
  height: 60px;
  line-height: 60px;
  margin: 0 auto;
}
.hot-link a {
  margin: 0 5px;
}
</style>

Search.vue 搜索后跳转页面

<template>
  <div class="search">

    <p>搜索关键字: {{ $route.query.words }}</p>
    <p>搜索结果: </p>
    <ul>
      <li>.............</li>
      <li>.............</li>
      <li>.............</li>
      <li>.............</li>
    </ul>
  </div>
</template>

<script>
export default { 
  name: 'MyFriend',
  created () {
    // 在created中，获取路由参数
    /* 获取语法：  $route.query.参数名  */
    /* js中要多加一个this. */
console.log(this.$route.query.words)
  }
}
</script>

<style>
.search {
  width: 400px;
  height: 240px;
  padding: 0 20px;
  margin: 0 auto;
  border: 2px solid #c4c7ce;
  border-radius: 5px;
}
</style>

router/index.js

import Home from '@/views/Home'
import Search from '@/views/Search'
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) // VueRouter插件初始化

// 创建了一个路由对象
const router = new VueRouter({
  routes: [
    {path:'/',redirect:'/home'}    /* 默认页面 */
    { path: '/home', component: Home },
    { path: '/search', component: Search }
  ]
})

export default router

main.js

...
import router from './router/index'
...
new Vue({
  render: h => h(App),
  router
}).$mount('#app')

五、声明式导航-动态路由传参

1.动态路由传参方式

• 配置动态路由

  动态路由后面的参数可以随便起名，但要有语义

  const router = new VueRouter({
    routes: [
      ...,
      { 
        path: '/search/:words?',   /* 在:参数名后面加个?，即使不传参也显示内容 */       
        component: Search 
      }
    ]
  })
  

  配置动态路由：path: “/path/:参数名”

• 配置导航链接

  to=“/path/参数值”

• 对应页面组件接受参数

  $route.params.参数名

  params后面的参数名要和动态路由配置的参数保持一致

2.查询参数传参 VS 动态路由传参

1. 查询参数传参 (比较适合传多个参数)

2. 跳转：to=“/path?参数名=值&参数名2=值”

3. 获取：$route.query.参数名

4. 动态路由传参 (优雅简洁，传单个参数比较方便)

   1. 配置动态路由：path: “/path/:参数名”
      /search/:words 表示，必须要传参数。如果不传参数，也希望匹配，可以加个可选符"？"

   2. 跳转：to=“/path/参数值”

   3. 获取：$route.params.参数名
      （path即地址路径）

   注意：动态路由也可以传多个参数，但一般只传一个

3.总结

声明式导航跳转时, 有几种方式传值给路由页面？

• 查询参数传参（多个参数）
• 动态路由传参（一个参数，优雅简洁）

六、动态路由参数的可选符(了解) 解决动态路由配置时，不传参会空白 路由路径加?

1.问题

配了路由 path:“/search/:words” 为什么按下面步骤操作，会未匹配到组件，显示空白？

2.原因

/search/:words 表示，必须要传参数。如果不传参数，也希望匹配，可以加个可选符"？"

const router = new VueRouter({
  routes: [
 	...
    { path: '/search/:words?', component: Search }
  ]
})

七、Vue路由-重定向 初始页面

搜索关键词：默认显示页面 默认页面 初始页面

1.问题

网页打开时， url 默认是 /#/ 路径，未匹配到组件时，会出现空白

2.解决方案

重定向 → 匹配 / 后, 强制跳转 /home 路径

3.语法

{ path: 匹配路径, redirect: 重定向到的路径 },
比如：
{ path:'/' ,redirect:'/home' } 默认跳转到home路径

4.代码演示

const router = new VueRouter({
  routes: [
    { path: '/', redirect: '/home'},
 	 ...
  ]
})

八、Vue路由-404

1.作用

当路径找不到匹配时，给个提示页面

2.位置

404的路由，虽然配置在任何一个位置都可以，但一般都配置在其他路由规则的最后面

3.语法

path: “*” (任意路径) – 前面不匹配就命中最后这个

import NotFind from '@/views/NotFind'

const router = new VueRouter({
  routes: [
    ...
    { path: '*', component: NotFind } //最后一个
  ]
})

4.代码示例

NotFound.vue

<template>
  <div>
    <h1>404 Not Found</h1>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

router/index.js

...
import NotFound from '@/views/NotFound'
...

// 创建了一个路由对象
const router = new VueRouter({
  routes: [
     ...
    { path: '*', component: NotFound }
  ]
})

export default router

九、Vue路由-模式设置

1.问题

路由的路径看起来不自然, 有#，能否切成真正路径形式?

• hash路由(默认) 例如: http://localhost:8080/#/home
• history路由(常用) 例如: http://localhost:8080/home (以后上线需要服务器端支持，开发环境webpack给规避掉了history模式的问题)

2.语法

const router = new VueRouter({
    mode:'histroy', //默认是hash
    routes:[]
})

十、编程式导航-两种路由跳转方式

1.问题

点击按钮跳转如何实现？

2.方案

编程式导航：用JS代码来进行跳转

3.语法

两种语法：

• path 路径跳转 （简易方便）
• name 命名路由跳转 (适合 path 路径长的场景)

4.path路径跳转语法

特点：简易方便

//简单写法
this.$router.push('路由路径')

//完整写法
this.$router.push({
  path: '路由路径'
})

5.代码演示 path跳转方式

6.name命名路由跳转

特点：适合 path 路径长的场景

语法：

• 路由规则，必须配置name配置项

  { name: '路由名', path: '/path/xxx', component: XXX },
  

• 通过name来进行跳转

  this.$router.push({
    name: '路由名'
  })
  

7.代码演示通过name命名路由跳转

8.总结

程式导航编程式导航有几种跳转方式？
1.path路径
this.$router.push(‘路径’)

2.name名字
{name:‘路由名’，path:‘/path/xxx’,}
长路径用

this.$router.push({‘路径’})

十一、编程式导航-path路径跳转传参

1.问题

点击搜索按钮，跳转需要把文本框中输入的内容传到下一个页面如何实现？

2.两种传参方式

1.查询参数

2.动态路由传参

3.传参

两种跳转方式，对于两种传参方式都支持：

① path 路径跳转传参

② name 命名路由跳转传参

4.path路径跳转传参（query传参）

//简单写法
this.$router.push('/路径?参数名1=参数值1&参数2=参数值2')

//完整写法(常用)
this.$router.push({
  path: '/路径',
  query: {
    参数名1: '参数值1',
    参数名2: '参数值2'
  }
})

//其他组件想使用参数 {{ $router.query.key }}
//例如：配合输入框传参 v-model="myMalue'
//                    data(){return{  }}中：  myValue :''
//

接受参数的方式依然是：$route.query.参数名

5.path路径跳转传参（动态路you传参）

//简单写法
this.$router.push('/路径/参数值')

//完整写法
this.$router.push({
  path: '/路径/参数值'
})

接受参数的方式依然是：$route.params.参数值

**注意：**path不能配合params使用

十二、编程式导航-name命名路由传参

1.name 命名路由跳转传参 (query传参)

this.$router.push({
  name: '路由名字',
  query: {
    参数名1: '参数值1',
    参数名2: '参数值2'
  }
})

2.name 命名路由跳转传参 (动态路由传参)

this.$router.push({
  name: '路由名字',
  params: {
    参数名: '参数值',
  }
})

3.总结

编程式导航，如何跳转传参？

1.path 路径跳转（路径简单）

• query传参（多个参数）

  
  this.$router.push({
    path: '/路径',
    query: {
      参数名1: '参数值1',
      参数名2: '参数值2'
    }
  })
  //其他组件想使用参数 {{ $router.query.参数名 }}
  
  

• 动态路由传参（单个参数）

  this.$router.push('/路径/参数值')
  this.$router.push({
    path: '/路径/参数值'
  })
  //接受参数的方式是：$route.params.参数值
  
  

2.name 命名路由跳转（路径长）

• query传参（多个参数）

  this.$router.push({
    name: '路由名字',
    query: {
      参数名1: '参数值1',
      参数名2: '参数值2'
    }
  })
    //其他组件想使用参数 {{ $router.query.参数名 }}
  

• 动态路由传参 (需要配动态路由)（单个参数）

  this.$router.push({
    name: '路由名字',
    params: {
      参数名: '参数值',
      //跟js路由 ：后面的名字对应
      //如words:'黑户' {{$route.params.参数值}} 
    }
  })
  

十三、面经基础版-案例效果分析

AK47

1.面经效果演示

2.功能分析

• 通过演示效果发现，主要的功能页面有两个，一个是列表页，一个是详情页，并且在列表页点击时可以跳转到详情页
• 底部导航可以来回切换，并且切换时，只有上面的主题内容在动态渲染

3.实现思路分析：配置路由+功能实现

1.配置路由

• 首页和面经详情页，两个一级路由：第一眼看到的页面就是一级路由，类似进微信的第一页的大页面下的导航栏 和 “微信”信息窗口
  配路由 配出口

• 首页内嵌套4个可切换的页面（嵌套二级路由）
  二级路由加在一级里边 + 配出口
  chidren:[{path:‘’,component:}] chidren和routes一样也是数组包对象格式

2.实现功能

- 首页请求渲染 Article组件中 4步

安装axios
yarn add axios npm i axios
+
确认接口文档

请求地址: https://mock.boxuegu.com/mock/3083/articles
请求方式: get

• created中发送请求，获取数据，存储到“面经页”路由组件Article的data中
  Article路由组件中:
  导入axios
  import axios from ‘axios’

  准备空数组准备接收数据
  data(){
  return{ list:[] }}

  async created:{
  const res = await axios({
  url:‘https://mock.boxuegu.com/mock/3083/articles’,
  method:‘get’
  })
  console.log(res) 控制台看有啥
  this.list = res.data.result.rows 列表在这里边
  }

• v-for渲染到页面中
  v-for写在第二个div中，第一个是窗口
  v-for=“(item.index) in list”:key=“item.id”
  {{item.xxx}}

b- 点击 跳转传参 到 详情页 传id

两种点击跳转均可传id值，将来在接受方根据id发请求渲染数据
第一种：查询参数传参 3步 (建议多个参数时)
点击事件
+
方法里传id this.$router.push(‘/articledetail?id=${item.id}) 或另一种写法 this.$route.push({ <!-- 后经过检验，不支持这种写法，因为methods中不能item,所以只能在点击事件直接传id --> path:'/articledetail', query:{ id = ${item.id}`
}
})
+
created接收数据this.route.query.id

第二种：动态路由传参 4步 (建议单个参数时)
改路由 /路径/id? 给接收方加 /:参数? 哦
+
点击块就传参
@click=$router.push(/articledetail/KaTeX parse error: Expected '}', got 'EOF' at end of input: …ed(){ this.route.params.id
}

返回上一页：@click=“$router.back()”

c-详情页动态渲染

看接口文档
+
准备个空数组准备接收数据
detailList=[] {}后经过检测，发现得到的res.data.result是一个对象里包着所有数据，所以改成{}
+
发请求
async created(){
const res = await axios({
url:..../${this.$route.params.id}, 模板字符串传id时不用加冒号！！
method:‘get’
})
this.detailList = res.data.result
}
+
渲染（注意：不是列表渲染，这里是一次渲染一份数据）
{{ detailList.xxx}}

解决bug:点击，数据请求过程中白屏卡bug
等请求的 id 传到对象内 之后再渲染（也可以不是id，id比较实用）
v-if=“detailList.id”

jd- 组件缓存，性能优化 保存浏览痕迹

解决bug:返回上一页时停留在原先位置
解决原理，给组件添加俩生命周期钩子：
actived 激活时，组建被看到时触发
deactived 失活时，离开页面组建看不见触发

每个.vue 文件最初vue组件结构创建时都自动起了个名字，此处需要
使用标签包住App.vue的理由出口，并配上属性，
有仨属性： include(最常用) exclude max
使用
给你需要下载的加，不是给窗口加，是给导航在的组件加

二十二、VueCli 自定义创建项目 新电脑 配这个就不要配vuecli的2版本

1.安装脚手架 (已安装)

npm i @vue/cli -g  

2.cd到新文件 创建项目

vue create hm-exp-mobile

• 选项 选择自定义

Vue CLI v5.0.8
? Please pick a preset:
  Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
> Manually select features     选自定义

• 手动选择功能
  Bable / Router / CSS / Linter
  语法降级/ 自动搭Router环境 / CSS的less或scss / 代码规范ESLint

• 选择vue的版本

  3.x
> 2.x

AK47

• 是否使用history模式
  否，将来想去#号 再在配置路由处 router下的index.js 改成
  const router = new VueRouter({
  mode:‘history’,
  routes:[{path:‘’,component:},…]
  })

• 选择css预处理
  Less

• 选择eslint的风格 （eslint 代码规范的检验工具，检验代码是否符合规范）
  ESLint + Standar config

• 选择校验的时机 （直接回车）
  Lint on save

• 选择配置文件的生成方式 （直接回车）
  Indedicated config files

• 是否保存预设，下次直接使用？
  => 不保存，输入 N

• 等待安装，项目初始化完成

• 启动项目

npm run serve

将来不用配置router

二十三、ESlint代码规范及手动修复

代码规范：一套写代码的约定规则。例如：赋值符号的左右是否需要空格？一句结束是否是要加;？…

没有规矩不成方圆

ESLint:是一个代码检查工具，用来检查你的代码是否符合指定的规则(你和你的团队可以自行约定一套规则)。在创建项目时，我们使用的是 JavaScript Standard Style 代码风格的规则。

1.JavaScript Standard Style 规范说明

建议把：https://standardjs.com/rules-zhcn.html 看一遍，然后在写的时候, 遇到错误就查询解决。

2.代码规范错误

如果你的代码不符合standard的要求，eslint会跳出来刀子嘴，豆腐心地提示你。

下面我们在main.js中随意做一些改动：添加一些空行，空格。

import Vue from 'vue'
import App from './App.vue'

import './styles/index.less'
import router from './router'
Vue.config.productionTip = false;

new Vue ( {
  render: h => h(App),
  router
}).$mount('#app')

按下保存代码之后：

你将会看在控制台中输出如下错误：
false多加了分号

eslint 是来帮助你的。心态要好，有错，就改。

3.手动修正

根据错误提示来一项一项手动修正。
报错信息：eslint + 哪个文件 + 哪个行数：哪个字符 + 最后面是规则说明

如果你不认识命令行中的语法报错是什么意思，你可以根据错误代码（func-call-spacing, space-in-parens,…）去 ESLint 规则列表中查找其具体含义。

打开 ESLint 规则表，使用页面搜索（Ctrl + F）这个代码，查找对该规则的一个释义。

二十四、通过eslint插件来实现自动修正 新电脑

1. eslint会自动高亮错误显示
2. 通过配置，eslint会自动帮助我们修复错误

• 如何安装
  拓展插件搜索 ESLint
  安装

此时不规范会报错

• 如何配置 左下角设置 + 右上角打开设置（分屏旁边） ，往对象里加以下代码

// 当保存的时候，eslint自动帮我们修复错误ctrl+S
"editor.codeActionsOnSave": {
    "source.fixAll": true
},
// 保存代码，不自动格式化
"editor.formatOnSave": false

• 注意：eslint的配置文件必须在根目录下，这个插件才能才能生效。打开项目必须以根目录打开，一次打开一个项目
• 注意：使用了eslint校验之后，把vscode带的那些格式化工具全禁用了 Beatify

settings.json 参考

{
    "window.zoomLevel": 2,
    "workbench.iconTheme": "vscode-icons",
    "editor.tabSize": 2,
    "emmet.triggerExpansionOnTab": true,
    // 当保存的时候，eslint自动帮我们修复错误
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    },
    // 保存代码，不自动格式化  如果存在同样代码：true 那行就去掉
    "editor.formatOnSave": false
}

一、Vuex 概述

目标：明确Vuex是什么，应用场景以及优势

1.是什么

Vuex 是一个 Vue 的 状态管理工具， 工具就是插件，状态就是数据。

大白话：Vuex 是一个插件，可以帮我们管理 Vue 通用的数据 (多组件共享的数据)。
例如：购物车数据 个人信息数

2.使用场景

• 某个状态 在 很多个组件 来使用 (个人信息)

• 多个组件 共同维护 一份数据 (购物车)
  都想改，渲染某个数据

3.优势 代替子传父…

• 共同维护一份数据，数据集中化管理
• 响应式变化
• 操作简洁 (vuex提供了一些辅助函数),
  提供了一些函数，这些函数帮助我们操作里边的数据

二、需求: 多组件共享数据

目标：基于脚手架创建项目，构建 vuex 多组件数据共享环境

效果是三个组件共享一份数据:

• 任意一个组件都可以修改数据
• 三个组件的数据是同步的

1.创建项目

vue create vuex-demo

2.创建三个组件, 目录如下

|-components
|--Son1.vue
|--Son2.vue
|-App.vue

3.源代码如下

App.vue在入口组件中引入 Son1 和 Son2 这两个子组件

<template>
  <div id="app">
    <h1>根组件</h1>
    <input type="text">
    <Son1></Son1>
    <hr>
    <Son2></Son2>
  </div>
</template>

<script>
import Son1 from './components/Son1.vue'
import Son2 from './components/Son2.vue'

export default {
  name: 'app',
  data: function () {
    return {

    }
  },
  components: {
    Son1,
    Son2
  }
}
</script>

<style>
#app {
  width: 600px;
  margin: 20px auto;
  border: 3px solid #ccc;
  border-radius: 3px;
  padding: 10px;
}
</style>

main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

Son1.vue
未写js代码逻辑，只是个父里两个子

<template>
  <div class="box">
    <h2>Son1 子组件</h2>
    从vuex中获取的值: <label></label>
    <br>
    <button>值 + 1</button>
  </div>
</template>

<script>
export default {
  name: 'Son1Com'
}
</script>

<style lang="css" scoped>
.box{
  border: 3px solid #ccc;
  width: 400px;
  padding: 10px;
  margin: 20px;
}
h2 {
  margin-top: 10px;
}
</style>

Son2.vue

<template>
  <div class="box">
    <h2>Son2 子组件</h2>
    从vuex中获取的值:<label></label>
    <br />
    <button>值 - 1</button>
  </div>
</template>

<script>
export default {
  name: 'Son2Com'
}
</script>

<style lang="css" scoped>
.box {
  border: 3px solid #ccc;
  width: 400px;
  padding: 10px;
  margin: 20px;
}
h2 {
  margin-top: 10px;
}
</style>

三、vuex 的使用 - 创建仓库store/index 里边是通用的东西

1.安装 vuex 新电脑

安装vuex与vue-router类似，vuex是一个独立存在的插件，如果脚手架初始化没有选 vuex，就需要额外安装。

yarn add vuex@3 或者 npm i vuex@3     如果是vue3就是vuex@4 

2.src下 新建 store/index.js 专门存放 vuex

​ 为了维护项目目录的整洁，在src目录下新建一个store目录其下放置一个index.js文件。 (和 router/index.js 类似)

3.创建仓库 store/index.js

这里边存放的就是 vuex 相关的核心代码

// 导入 vue
import Vue from 'vue'
// 导入 vuex
import Vuex from 'vuex'
// vuex也是vue的插件, 需要use一下, 进行插件的安装初始化
Vue.use(Vuex)

// 创建仓库 store
const store = new Vuex.Store()

// 导出仓库给main.js使用
export default store

4 在 main.js 中导入挂载到 Vue 实例上

import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  store
}).$mount('#app')

此刻起, 就成功创建了一个 空仓库!! 一旦构建完成后所有组件都可以访问！！！！

5.测试打印Vuex

App.vue

created(){
  console.log(this.$store) 控制台存在即可
}

四、store/imdex.js仓库 核心概念1 - state 状态 访问仓库数据

1.目标

明确如何给仓库 提供 数据，如何 使用 仓库的数据

2.提供数据

State提供唯一的公共数据源，所有共享的数据都要统一放到Store中的State中存储。
类似data(){},但这个state所有组件接可访问

打开项目中的store.js文件，在state对象中可以添加我们要共享的数据。

// 创建仓库 store
const store = new Vuex.Store({
  // state 状态, 即数据, 类似于vue组件中的data,
  // 区别：
  // 1.data 是组件自己的数据, 
  // 2.state 中的数据整个v到ue项目的组件都能访问
  state: {
    count: 101
  }
})

3.访问Vuex中的数据

问题: 如何在别的组件中获取使用count?
1.找仓库store
2.找state
3.找数据
script中加this.

1. 通过$store直接访问 —> {{ $store.state.count }}
2. 通过辅助函数mapState 映射计算属性 —> {{ count }}

4.通过$store访问的语法 从各个组件中访问store/index.js

获取 store：
 1.Vue模板中获取 this.$store
 2.js文件中获取 import 导入 store

模板中（<template标签中）：     {{ $store.state.xxx }}   state里的数据xxx
组件逻辑中（组件script标签中）：  this.$store.state.xxx   多加个this.
JS模块中（.js文件中，较为麻烦）：   store.state.xxx      

5.代码实现

5.1模板中使用

组件中可以使用 $store 获取到vuex中的store对象实例，可通过state属性属性获取count， 如下

<h1>state的数据 - {{ $store.state.count }}</h1>

5.2组件逻辑中使用

将state属性定义在计算属性中 https://vuex.vuejs.org/zh/guide/state.html

<h1>state的数据 - {{ count }}</h1>

// 把state中数据，封装定义在组件内的计算属性中
/* 本质就是mapState辅助函数封装的方法 */
  computed: {
    count () {
      return this.$store.state.count 
    }
  }

5.3 js文件中使用

//main.js

import store from "@/store"

console.log(store.state.count)

每次都像这样一个个的提供计算属性, 太麻烦了,我们有没有简单的语法帮我们获取state中的值呢？
mapState

五、通过辅助函数 - mapState获取 state中的数据(数据整个vue项目的组件都能访问到) 3步 导入 + 映射…mapState([‘’,‘’]) +渲染

mapState是辅助函数，帮助我们把store中的数据映射到 组件的计算属性中, 它属于一种方便的用法

用法 ：

// 创建仓库 store
const store = new Vuex.Store({
  // state 状态, 即数据, 类似于vue组件中的data,
  // 区别：
  // 1.data 是组件自己的数据, 
  // 2.state 中的数据整个vue项目的组件都能访问到
  state: {
    count: 101
  }
})

1.第一步：想要用仓库里数据的组件内导入mapState (mapState是vuex中的一个函数)

import { mapState } from 'vuex'

2.第二步：采用数组形式引入state属性//不需要此步骤

mapState(['count']) 

上面代码的最终得到的是 类似于

count () {
    return this.$store.state.count
}

等价于以下代码

2.第二步：利用展开运算符将导出的状态映射给计算属性

  computed: {
    ...mapState(['count'])
  }

3.第三步：渲染即可

 <div> state的数据：{{ count }}</div>

六、开启严格模式及Vuex的单项数据流（修改共享数据，不能直接改,也是跟子想修改父发请求一个意思）

1.目标

明确 vuex 同样遵循单向数据流，组件中不能直接修改仓库的数据

2.直接在组件中修改Vuex中state的值

Son1.vue

button @click="handleAdd">值 + 1</button>

methods:{
	 handleAdd (n) {
      // 错误代码(vue默认不会监测，监测需要成本)
       this.$store.state.count++
      // console.log(this.$store.state.count) 
    }
}

3.vuex开启严格模式 新电脑

(index.js)
通过 strict: true 可以开启严格模式,开启严格模式后，直接修改state中的值会报错,正式提交时不需要开

// 创建仓库 store
const store = new Vuex.Store({
   // 开启严格模式
  strict: true,
  // state 状态, 即数据, 类似于vue组件中的data,
  // 区别：
  // 1.data 是组件自己的数据, 
  // 2.state 中的数据整个vue项目的组件都能访问到
  state: {
    count: 101
  }
})

state数据的修改只能通过mutations，并且mutations必须是同步的

七、核心概念2-mutations(修改state数据) 步骤： store库里提供方法 + 别的组件内提交调用方法this.$store.commit(‘库里方法名’)

1.定义mutations

const store  = new Vuex.Store({
  //1.提供共享数据
  state: {
    count: 0
  },
  //2.修改数据
  // 定义mutations
  mutations: {
     
  }
})

2.格式说明

mutations是一个对象，对象中存放修改state的方法，之后别的组件直接调用这个方法

mutations: {
    // 方法里参数 第一个参数是当前store的state属性
    // payload 载荷 运输参数 调用mutaiions的时候 可以传递参数 传递载荷
    addCount (state) {
      //第一个都是state
      state.count += 1
    }
  },

3.组件中提交 mutations

addOne(){
this.$store.commit('addCount')//注意：addCount是index.js中的名字
}
//若需要+1，渲染addOne即可

4.练习

1.在mutations中定义个点击按钮进行 +5 的方法

2.在mutations中定义个点击按钮进行 改变title 的方法

3.在组件中调用mutations修改state中的值

5.总结

通过mutations修改state的步骤

1.定义 mutations 对象，对象中存放修改 state 的方法

2.组件中提交调用 mutations(通过$store.commit(‘mutations的方法名’))

八、带参数的 mutations (例如 加的值不同 修改值，共享传参方法)

1.目标：

掌握 mutations 传参语法

2.语法

看下面这个案例，每次点击不同的按钮，加的值都不同，每次都要定义不同的mutations处理吗？

提交 mutation 是可以传递参数的 this.$store.commit('xxx', 参数)

2.1 提供mutation函数（带参数）

mutations: {
  ...
  addCount (state, n) {//n为传递的参数
    state.count += n
  },
  titleChange (state, titlenext) {
    state.title = titlenext
  }

},

2.2 提交mutation

handle ( ) {
  this.$store.commit('addCount', n)
},
//想改加的值就在标签内引用 @click="handle( 数字 )""
titleFn(){
  this.store.commit('titleChange','黑马程序员')
}
//想改标题则 @click="titleFn"

小tips: 提交的参数只能是一个, 如果有多个参数要传, 可以传递一个对象

修改案例

handle ( ) {
  this.$store.commit('addCount',{
  count: 10,
  msg："好好"
})
}

mutations: {
  ...
  addCount (state, obj.count) {//n为传递的参数
    state.count += obj.count
  }


},

九、练习-mutations的减法功能

1.步骤

2.代码实现

Son2.vue

    <button @click="subCount(1)">值 - 1</button>
    <button @click="subCount(5)">值 - 5</button>
    <button @click="subCount(10)">值 - 10</button>

    export default {
        methods:{
             subCount (n) { 
                this.$store.commit('addCount', n)
        },
        }
    }

store/index.js

mutations:{
    subCount (state, n) {
      state.count -= n
    },
}

十、练习-Vuex中的值和组件中的input双向绑定

1.目标

根据输入框输入的数字
实时输入，实时更新，巩固 mutations 传参语法

2.实现步骤

//v-model=:value + @input
1.输入框
内容渲染
:value

2.监听输入
获取内容
@input

3.封装mutation
处理函数
mutation传参

4.调用传参
commit调用

3.代码实现

App.vue

<input :value="count" @input="handleInput" type="text">

export default {
  methods: {
    handleInput (e) {
      // 1. 实时获取输入框的值 （e.target：拿到输入框）
      const num = +e.target.value
      // 2. 提交mutation，调用mutation函数
      this.$store.commit('changeCount', num)
    }
  }
}

mutations: { 
   changeCount (state, newCount) {
      state.count = newCount
   }
},

十一、辅助函数- map Mutations

mapMutations和mapState（把state状态映射给组件，给组件提供计算属性）很像，它把位于mutations中的方法提取了出来，我们可以将它导入

import  { mapMutations } from 'vuex'
methods: {
    ...mapMutations(['addCount'])
}

上面代码的含义是将mutations的方法导入了methods中，等价于

methods: {
      // commit(方法名, 载荷参数)
      addCount () {
          this.$store.commit('addCount')
      }
 }

此时，就可以直接通过this.addCount调用了

<button @click="addCount">值+1</button>

但是请注意： Vuex中mutations中要求不能写异步代码，
如果有异步的ajax请求，应该放置在actions中

十二、核心概念3 - actions（几秒后，修改数据,请求接口数据时

state是存放数据的，mutations是同步更新数据 (便于监测数据的变化, 更新视图等, 方便于调试工具查看变化)，

actions则负责进行异步操作
//注意：不能直接操作state,想操作state,还是需要commit mutation
//context上下文（此处未分模块，可以当作store仓库）
//context.commit(‘mutation名字’, 额外参数)

说明：mutations必须是同步的

需求: 一秒钟之后, 要给一个数 去修改state

1.定义actions

mutations: {
  changeCount (state, newCount) {
    state.count = newCount
  },

//渲染数据//n为传递的参数
datatFirst(state,data){
  state.count=data
}
}


actions: {
  //context上下文（此处未分模块，可以当作store仓库）
  setAsyncCount (context, num) {//context固定:上下文（仓库）
    // 一秒后, 给一个数, 去修改 num

    setTimeout(() => {
     
      context.commit('changeCount', num)
    }, 1000)

    //请求文件代码
    async getList(context){
      const res = awaut.axios.请求方式('接口地址')
      context.commit(datatFirst,res.data)
    }
  }
},

2.组件中通过dispatch调用

setAsyncCount () {
  this.$store.dispatch('setAsyncCount', 666)
}

十三、辅助函数 -mapActions

1.目标：掌握辅助函数 mapActions，映射方法

mapActions 是把位于 actions中的方法提取了出来，映射到组件methods中

Son2.vue

import { mapActions } from 'vuex'
methods: {
   ...mapActions(['changeCountAction'])
}

//mapActions映射的代码 本质上是以下代码的写法
//methods: {
//  changeCountAction (n) {
//    this.$store.dispatch('changeCountAction', n)
//  },
//}

直接通过 this.方法 就可以调用

<button @click="changeCountAction(200)">+异步</button>

十四、核心概念4- getters （筛选出符合条件的一些数据）

除了state之外，有时我们还需要从state中筛选出符合条件的一些数据，这些数据是依赖state的，此时会用到getters
购物车算总数和总价格

例如，state中定义了list，为1-10的数组，

state: {
    list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
}

组件中，需要显示所有大于5的数据，正常的方式，是需要list在组件中进行再一步的处理，但是getters可以帮助我们实现它

1.定义getters

  getters: {
    // getters函数的第一个参数是 state
    // 必须要有返回值
     filterList:  state =>  state.list.filter(item => item > 5)
  }

2.使用getters

2.1原始方式-$store

<div>{{ $store.getters.filterList }}</div>

2.2辅助函数 - mapGetters

computed: {
    ...mapGetters(['filterList'])
}

 <div>{{ filterList }}</div>

十五、使用小结

十六、核心概念5 - module

1.目标

掌握核心概念 module 模块的创建

2.问题

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

这句话的意思是，如果把所有的状态都放在state中，当项目变得越来越大的时候，Vuex会变得越来越难以维护

由此，又有了Vuex的模块化

3.模块定义 - 准备 state

定义两个模块 user 和 setting

user中管理用户的信息状态 userInfo modules/user.js

const state = {
  userInfo: {
    name: 'zs',
    age: 18
  }
}

const mutations = {}

const actions = {}

const getters = {}

export default {
  state,
  mutations,
  actions,
  getters
}

setting中管理项目应用的 主题色 theme，描述 desc， modules/setting.js

const state = {
  theme: 'dark'
  desc: '描述真呀真不错'
}

const mutations = {}

const actions = {}

const getters = {}

export default {
  state,
  mutations,
  actions,
  getters
}

在store/index.js文件中的modules配置项中，注册这两个模块

import user from './modules/user'
import setting from './modules/setting'

const store = new Vuex.Store({
    modules:{
        user,
        setting
    }
})

使用模块中的数据, 可以直接通过模块名访问 $store.state.模块名.xxx => $store.state.setting.desc

也可以通过 mapState 映射

十七、获取模块内的state数据

1.目标：

掌握模块中 state 的访问语法

尽管已经分模块了，但其实子模块的状态，还是会挂到根级别的 state 中，属性名就是模块名

2.使用模块中的数据

1. 直接通过模块名访问 $store.state.js模块名.xxx
2. 通过 mapState 映射：
3. 默认根级别的映射 mapState([ ‘xxx’ ])
4. 子模块的映射 ：mapState(‘模块名’, [‘xxx’]) - 需要开启命名空间(模块中加) namespaced:true

modules/user.js

const state = {
  userInfo: {
    name: 'zs',
    age: 18
  },
  myMsg: '我的数据'
}

const mutations = {
  updateMsg (state, msg) {
    state.myMsg = msg
  }
}

const actions = {}

const getters = {}

export default {
  namespaced: true,
  state,
  mutations,
  actions,
  getters
}

3.代码示例

$store直接访问

$store.state.user.userInfo.name

mapState辅助函数访问

...mapState('user', ['userInfo']),
...mapState('setting', ['theme', 'desc']),

十八、获取模块内的getters数据

1.目标：

掌握模块中 getters 的访问语

2.语法：

使用模块中 getters 中的数据：

1. 直接通过模块名访问 $store.getters['模块名/xxx ']
2. 通过 mapGetters 映射
   1. 默认根级别的映射 mapGetters([ 'getters名' ])
   2. 子模块的映射 mapGetters('模块名', ['xxx']) - 需要开启命名空间

3.代码演示

modules/user.js

const getters = {
  // 分模块后，state指代子模块的state
  UpperCaseName (state) {
    return state.userInfo.name.toUpperCase()
  }
}

Son1.vue 直接访问getters

<!-- 测试访问模块中的getters - 原生 -->
<div>{{ $store.getters['user/UpperCaseName'] }}</div>

Son2.vue 通过命名空间访问

computed:{
  ...mapGetters('user', ['UpperCaseName'])
}

十九、获取模块内的mutations方法

1.目标：

掌握模块中 mutation 的调用语法

2.注意：

默认模块中的 mutation 和 actions 会被挂载到全局，需要开启命名空间，才会挂载到子模块。

3.调用方式：

1. 直接通过 store 调用 $store.commit('模块名/xxx ', 额外参数)
2. 通过 mapMutations 映射
   1. 默认根级别的映射 mapMutations([ ‘xxx’ ])
   2. 子模块的映射 mapMutations(‘模块名’, [‘xxx’]) - 需要开启命名空间

4.代码实现

modules/user.js

const mutations = {
  setUser (state, newUserInfo) {
    state.userInfo = newUserInfo
  }
}

modules/setting.js

const mutations = {
  setTheme (state, newTheme) {
    state.theme = newTheme
  }
}

Son1.vue

<button @click="updateUser">更新个人信息</button> 
<button @click="updateTheme">更新主题色</button>


export default {
  methods: {
    updateUser () {
      // $store.commit('模块名/mutation名', 额外传参)
      this.$store.commit('user/setUser', {
        name: 'xiaowang',
        age: 25
      })
    }, 
    updateTheme () {
      this.$store.commit('setting/setTheme', 'pink')
    }
  }
}

Son2.vue

<button @click="setUser({ name: 'xiaoli', age: 80 })">更新个人信息</button>
<button @click="setTheme('skyblue')">更新主题</button>

methods:{
// 分模块的映射
...mapMutations('setting', ['setTheme']),
...mapMutations('user', ['setUser']),
}

二十、获取模块内的actions方法

1.目标：

掌握模块中 action 的调用语法 (同理 - 直接类比 mutation 即可)

2.注意：

默认模块中的 mutation 和 actions 会被挂载到全局，需要开启命名空间，才会挂载到子模块。

3.调用语法：调用action格式

1. 直接通过 store 调用 $store.dispatch('模块名/xxx ', 额外参数)
2. 通过 mapActions 映射
   1. 默认根级别的映射 mapActions([ ‘xxx’ ])
   2. 子模块的映射 mapActions(‘模块名’, [‘xxx’]) - 需要开启命名空间

4.代码实现

需求：

modules/user.js

const actions = {
  setUserSecond (context, newUserInfo) {
    // 将异步在action中进行封装
    setTimeout(() => {
      // 调用mutation   context上下文，默认提交的就是自己模块的action和mutation
      context.commit('setUser', newUserInfo)
    }, 1000)
  }
}

Son1.vue 直接通过store调用

<button @click="updateUser2">一秒后更新信息</button>

methods:{
    updateUser2 () {
      // 调用action dispatch
      this.$store.dispatch('user/setUserSecond', {
        name: 'xiaohong',
        age: 28
      })
    },
}

Son2.vue mapActions映射

<button @click="setUserSecond({ name: 'xiaoli', age: 80 })">一秒后更新信息</button>

methods:{
  ...mapActions('user', ['setUserSecond'])
}

二十一、Vuex模块化的使用小结

1.直接使用

1. state --> $store.state.模块名.数据项名
2. getters --> $store.getters[‘模块名/属性名’]
3. mutations > $–store.commit(‘模块名/方法名’, 其他参数)
4. actions --> $store.dispatch(‘模块名/方法名’, 其他参数)

2.借助辅助方法使用

1.import { mapXxxx, mapXxx } from ‘vuex’

computed、methods: {

​ // …mapState、…mapGetters放computed中；
​ // …mapMutations、…mapActions放methods中；
​ …mapXxxx(‘模块名’, [‘数据项|方法’]),

​ …mapXxxx(‘模块名’, { 新的名字: 原来的名字 }),

}

2.组件中直接使用 属性 {{ age }} 或 方法 @click="updateAge(2)"

二十二、综合案例 - 创建项目

1. 脚手架新建项目 (注意：勾选vuex)

   版本说明：

   vue2 vue-router3 vuex3

   vue3 vue-router4 vuex4/pinia

vue create vue-cart-demo

2. 将原本src内容清空，替换成教学资料的《vuex-cart-准备代码》

需求：

1. 发请求动态渲染购物车，数据存vuex （存cart模块， 将来还会有user模块，article模块…）
2. 数字框可以修改数据
3. 动态计算总价和总数量

二十三、综合案例-构建vuex-cart模块

1. 新建 store/modules/cart.js

export default {
  namespaced: true,
  state () {
    return {
      list: []
    }
  },
}

2. 挂载到 vuex 仓库上 store/cart.js
   import cart from ‘./modules/cart’

modules:{
cart
}

// 挂载语法格式：
// import xxx（模块xxx.js写xxx） from 'xxx.js所在的路径./'
// js模块挂载在modules
  modules: {
    cart//xxx
  }


import Vuex from 'vuex'
import Vue from 'vue'

import cart from './modules/cart'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    cart
  }
})

export default store

二十四、综合案例-准备后端接口服务环境(了解)

1. 安装全局工具 json-server （全局工具仅需要安装一次）

yarn global add json-server 
或 npm i json-server  -g

2. 代码根目录新建一个 db 目录
3. 将资料 index.json 移入 db 目录
4. 进入 db 目录，执行命令，启动后端接口服务 (使用–watch 参数 可以实时监听 json 文件的修改)

json-server  --watch  index.json

二十五、综合案例-请求动态渲染数据

1.目标

请求获取数据存入 vuex, 映射渲染

1. 安装 axios

yarn add axios   npm i axios
npm i axios -S --legacy-peer-deps -

import axios from ‘axios’
2. 准备actions 和 mutations

export defualt{
state:{
return{
list:[]
}
},
mutation:{
fixList(state,daTa){

    state.list =daTa
 }

},
action:{
async giveList(context){
const res = await axios.get(‘网址’)
App.vue: created:{
//$store.dispatch{(}^{\prime }\ast \ast 模块名\ast \ast /方法{名}^{\prime },其他参数)this.$store.commit('cart/fixList)
}
context.commit(‘fixList’,res.data)//提交到mutation
}
},
getter:{

}

}

方法名(state,参数){
state.上面state里边的值 = 参数名
}

import axios from 'axios'

export default {
  namespaced: true,
  state () {
    return {
      list: []
    }
  },



  mutations: {
    updateList (state, payload) {
      state.list = payload
    }
  },





  actions: {
    async getList (context) {
      const res = await axios.get('http://localhost:3000/cart')
      context.commit('updateList', res.data)
    }
 


  }
}

3. App.vue页面中调用 action, 获取数据
   import { mapState } from ‘vuex’

computed:{
//…mapXxxx(‘模块名’, [‘数据项|方法’])
…mapState(‘cart’,[‘list’])
}

//引入cart.js模块处理好的state
import { mapState } from 'vuex'

export default {
  name: 'App',
  components: {
    CartHeader,
    CartFooter,
    CartItem
  },
  created () {
    //调用action
    this.$store.dispatch('cart/getList')
  },
  /
  //与import...对应
  //  ...mapXxxx(**'模块名'**, ['数据项|方法'])
  computed: {
    ...mapState('cart', ['list'])
  }
}

4. 动态渲染

<!-- 商品 Item 项组件 -->
<cart-item v-for="item in list" :key="item.id" :item="item"></cart-item>

cart-item.vue

<template>
  <div class="goods-container">
    <!-- 左侧图片区域 -->
    <div class="left">
      <img :src="item.thumb" class="avatar" alt="">
    </div>
    <!-- 右侧商品区域 -->
    <div class="right">
      <!-- 标题 -->
      <div class="title">{{item.name}}</div>
      <div class="info">
        <!-- 单价 -->
        <span class="price">￥{{item.price}}</span>
        <div class="btns">
          <!-- 按钮区域 -->
          <button class="btn btn-light">-</button>
          <span class="count">{{item.count}}</span>
          <button class="btn btn-light">+</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CartItem',
  props: {
    item: Object
  },
  methods: {

  }
}
</script>

二十六、综合案例-修改数量

代码逻辑白话：
我一点击，原有的count ± 1，
@click=“addCount(-1)”
@click=“addCount(1)”

methods:{
addCount(step){
const newCount=this.item.count + step
const id = this.item.id

  this.$store.dispath('cart/sendRequest'{
    //   接口obj属性   :  前端obj属性
    id:this.item.id
    count : newCount
  })

}
}

actions:{
async sendRequest(context,obj){//传来的是个对象，故参数是obj,以下数的处理均由obj提供数据
await axios.patch(http://localhost:3000/cart/${obj.id}),
const count = obj.newCount
},
context.commit(‘mutation名字’,{//context.commit(‘mutation名字’, 额外参数)
id:this.item.id
newCount:newCount
})
}
mutations:{
//前端页面修改count：根据id 找到对应的对象，更新count属性
countChange(state,obj){
const goods = state.list.find(item => item.id === obj.id)//find：找item.id === obj.id 的id
goods.count = obj.newCount
}
}

控制点击事件的方法名通过 dispath(‘模块名/方法名’{id:this.item.id,count:±1的变量名}) 向模块发送 action 里的方法请求，
action1.对后台发送更新请求，2. 通过 context.commit 提交到mutation修改前端数据
mutation提供更新count的方法

1. 注册点击事件
   练习区域
   @click=“countChange(-1)”
   @click=“countChange(1)”

<!-- 按钮区域 -->
<button class="btn btn-light" @click="onBtnClick(-1)">-</button>
<span class="count">{{item.count}}</span>
<button class="btn btn-light" @click="onBtnClick(1)">+</button>

2. 页面中dispatch action

//给上面的点击事件提供 +-1，step代表onBtnClick(-1)中的-1
onBtnClick (step) {
           //为什么要加item：不是本文件的，是cart模块的
  const id= this.item.id
                  //接口的count数据 +- 1
  const newCount = this.item.count + step
  

if(newCount < 1) return//防止点击后负数

  // .Vue组件向cart模块 action 发送修改数量 count 的请求，根据id找到count
  this.$store.dispatch('cart/updateCount', {
    id: this.item.id,
    count: newCount//数量 newCount上面定义的
  })
}

3. 提供action函数

//发了个请求，告诉后台数据要更新
async updateCount (ctx, obj) {//这里的obj指向后台接口里的属性
  await axios.patch(`http://localhost:3000/cart/${obj.id}`{
    count: obj.newCount
  })
  //提交个mutation,提示本地也要更新
  context.commit('updateCount', {//这里的obj指向onBtnClick dispath发送过来的属性
    id : obj.id,
    newCount : obj.newCount
  })
}

4. 提供mutation处理函数

//本地数据更新
mutations: {
//obj:{ id:xxx , newCount:xxxxx }
  updateCount (state, obj) {
    //根据id找到对象，更新count属性即可
    const goods= state.list.find(item=>item.id === obj.id)//find：找item.id === obj.id 的id
    goods.count =obj.newCount
  }
},

二十七、综合案例-底部总价展示

1. 提供getters
   getters:{//依赖state
   total(){//商品总数
   return state.list.reduce((sum,item)=>sum + item.count,0)//对state里的list进行计算
   },
   totalPrice(){//总价格
   return state.list.reduce((sum,item)=>sum + item.count * item.price ,0)
   }
   }
2. 动态渲染
   import { mapGetters } from ‘vuex’

computed:{
//…mapXxxx(‘模块名’, [‘数据项|方法’]),
…mapGetters(‘cart’,[‘total’,‘totalPrice’])
}

{{total}}
{{totalPrice}}

1. 提供getters

getters: {
  total(state) {//总数量
    return state.list.reduce((sum,item ) => sum + item.count., 0);
  },
  totalPrice (state) {
    return state.list.reduce((sum, item) => sum + item.count * item.price, 0);
  },
},

2. 动态渲染

<template>
  <div class="footer-container">
    <!-- 中间的合计 -->
    <div>
      <span>共 {{total}} 件商品，合计：</span>
      <span class="price">￥{{totalPrice}}</span>
    </div>
    <!-- 右侧结算按钮 -->
    <button class="btn btn-success btn-settle">结算</button>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'CartFooter',
  computed: {
    ...mapGetters('cart', ['total', 'totalPrice'])
  }
}
</script>

智慧商城 - 授课大纲

接口文档：https://apifox.com/apidoc/shared-12ab6b18-adc2-444c-ad11-0e60f5693f66/doc-2221080

演示地址：http://cba.itlike.com/public/mweb/#/

01. 项目功能演示

1.明确功能模块

启动准备好的代码，演示移动端面经内容，明确功能模块

2.项目收获

02. 项目创建目录初始化

vue-cli 建项目

1.安装脚手架 (已安装)

npm i @vue/cli -g

2.创建项目

vue create hm-shopping

• 选项

Vue CLI v5.0.8
? Please pick a preset:
  Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
> Manually select features     选自定义

• 手动选择功能 Babel Router Vuex CSS… Linter…

• 选择vue的版本

  3.x
> 2.x

• 是否使用history模式 not

• 选择css预处理 Less

• 选择eslint的风格 （eslint 代码规范的检验工具，检验代码是否符合规范）

• 比如：const age = 18; => 报错！多加了分号！后面有工具，一保存，全部格式化成最规范的样子

• 选择校验的时机 （直接回车）

• 选择配置文件的生成方式 （直接回车）

• 是否保存预设，下次直接使用？ => 不保存，输入 N

• 等待安装，项目初始化完成

• 启动项目

npm run serve

03. 调整初始化目录结构

强烈建议大家严格按照老师的步骤进行调整，为了符合企业规范

为了更好的实现后面的操作，我们把整体的目录结构做一些调整。

目标:

1. 删除初始化的一些默认文件
2. 修改没删除的文件
3. 新增我们需要的目录结构

1.删除文件

• src/assets/logo.png
• src/components/HelloWorld.vue
• src/views/AboutView.vue
• src/views/HomeView.vue

2.修改文件

main.js 不需要修改

router/index.js

删除默认的路由配置

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
]

const router = new VueRouter({
  routes
})

export default router

App.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

3.新增目录

• src/api 目录
  • 存储接口模块 (发送ajax请求接口的模块)
• src/utils 目录
  • 存储一些工具模块 (自己封装的方法)

目录效果如下:

04. vant组件库及Vue周边的其他组件库

组件库：第三方封装好了很多很多的组件，整合到一起就是一个组件库。

https://vant-contrib.gitee.io/vant/v2/#/zh-CN/

比如日历组件、键盘组件、打分组件、下拉筛选组件等

组件库并不是唯一的，常用的组件库还有以下几种：

pc: element-ui element-plus iview ant-design

移动：vant-ui Mint UI (饿了么) Cube UI (滴滴)

05. 全部导入和按需导入的区别

目标：明确 全部导入 和 按需导入 的区别

区别：

1.全部导入会引起项目打包后的体积变大，进而影响用户访问网站的性能

2.按需导入只会导入你使用的组件，进而节约了资源

06. 全部导入

• 安装vant-ui

yarn add vant@latest-v2  

• 在main.js中

import Vant from 'vant';
import 'vant/lib/index.css';
// 把vant中所有的组件都导入了
Vue.use(Vant)

• 即可使用

<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>

vant-ui提供了很多的组件，全部导入，会导致项目打包变得很大。

07. 按需导入

• 安装vant-ui

yarn add vant@latest-v2

• 安装一个插件

yarn add babel-plugin-import -D

• 在babel.config.js中配置

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
}

• 按需加载，在main.js

import { Button, Icon } from 'vant'

Vue.use(Button)
Vue.use(Icon)

• app.vue中进行测试

<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="default">默认按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>

• 把引入组件的步骤抽离到单独的js文件中比如 utils/vant-ui.js

import { Button, Icon } from 'vant'

Vue.use(Button)
Vue.use(Icon)

main.js中进行导入

// 导入按需导入的配置文件
import '@/utils/vant-ui'

08. 项目中的vw适配

官方说明：https://vant-contrib.gitee.io/vant/v2/#/zh-CN/advanced-usage

yarn add postcss-px-to-viewport@1.1.1 -D
或npm install postcss-px-to-viewport@1.1.1 -D         依赖冲突：   --legacy-peer-deps -

• 项目根目录， 新建postcss的配置文件postcss.config.js

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: 375,
    },
  },
};

viewportWidth:设计稿的视口宽度

1. vant-ui中的组件就是按照375的视口宽度设计的
2. 恰好面经项目中的设计稿也是按照375的视口宽度设计的，所以此时 我们只需要配置375就可以了
3. 如果设计稿不是按照375而是按照750的宽度设计，那此时这个值该怎么填呢？

09. 路由配置 - 一级路由

但凡是单个页面，独立展示的，都是一级路由

路由设计：

• 登录页
• 首页架子
  • 首页 - 二级
  • 分类页 - 二级
  • 购物车 - 二级
  • 我的 - 二级
• 搜索页
• 搜索列表页
• 商品详情页
• 结算支付页
• 我的订单页

@/views下新建以及每个路由文件（文件名全小写），
且在每个路由文件下再创建一个主核心文件index.vue（export default里加name,名字如LayoutIndex）

router/index.js 配置一级路由，新建对应的页面文件

import Vue from 'vue'
import VueRouter from 'vue-router'      //vueRouter组件

//import (可现命名)组件名 from '@/views/.vue文件所在文件，可以省略.vue文件不写'
//{path:'设置地址栏路径',component:上面import的组件名}
import Layout from '@/views/layout'         //首页架子  以下组件名都是直接现命名到路径上
import Search from '@/views/search'         //搜索列表 
import SearchList from '@/views/search/list'//搜索列表页
import ProDetail from '@/views/prodetail'   //商品详情
import  Login from '@/views/login'          //登录
import Pay from '@/views/pay'               //支付
import MyOrder from '@/views/myorder'       //订单管理

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    {
      path: '/login',
      component: Login
    },
    {
      path: '/',
      component: Layout
    },
    {
      path: '/search',
      component: Search
    },
    {
      path: '/searchlist',
      component: SearchList
    },
    {
      path: '/prodetail/:id',
      component: ProDetail
    },
    {
      path: '/pay',
      component: Pay
    },
    {
      path: '/myorder',
      component: MyOrder
    }
  ]
})

export default router

10. 路由配置-tabbar标签页

https://vant-contrib.gitee.io/vant/v2/#/zh-CN/tabbar

vant-ui.js 引入组件

import { Tabbar, TabbarItem } from 'vant'
Vue.use(Tabbar)
Vue.use(TabbarItem)

layout.vue

1. 复制官方代码
2. 修改显示文本及显示的图标
3. 配置高亮颜色

<template>
  <div>
    <!-- 二级路由出口 -->
    <van-tabbar active-color="#ee0a24" inactive-color="#000">
      <van-tabbar-item icon="wap-home-o">首页</van-tabbar-item>
      <van-tabbar-item icon="apps-o">分类页</van-tabbar-item>
      <van-tabbar-item icon="shopping-cart-o">购物车</van-tabbar-item>
      <van-tabbar-item icon="user-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

11. 路由配置 - 二级路由

1. router/index.js配置二级路由

import Vue from 'vue'
import VueRouter from 'vue-router'
import Layout from '@/views/layout'
import Search from '@/views/search'
import SearchList from '@/views/search/list'
import ProDetail from '@/views/prodetail'
import Login from '@/views/login'
import Pay from '@/views/pay'
import MyOrder from '@/views/myorder'

import Home from '@/views/layout/home'
import Category from '@/views/layout/category'
import Cart from '@/views/layout/cart'
import User from '@/views/layout/user'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    {
      path: '/login',
      component: Login
    },
    {
      path: '/',
      component: Layout,
      redirect: '/home',
      children: [
        {
          path: 'home',
          component: Home
        },
        {
          path: 'category',
          component: Category
        },
        {
          path: 'cart',
          component: Cart
        },
        {
          path: 'user',
          component: User
        }
      ]
    },
    {
      path: '/search',
      component: Search
    },
    {
      path: '/searchlist',
      component: SearchList
    },
    {
      path: '/prodetail/:id',
      component: ProDetail
    },
    {
      path: '/pay',
      component: Pay
    },
    {
      path: '/myorder',
      component: MyOrder
    }
  ]
})

export default router

2. 准备对应的组件文件

   • layout/home.vue
   • layout/category.vue
   • layout/cart.vue
   • layout/user.vue

3. layout.vue 配置路由出口, 配置 tabbar

//改图标：icon:"官方文档的图表明"
<template>
  <div>
    <router-view></router-view>
    <van-tabbar route active-color="#ee0a24" inactive-color="#000">
      <van-tabbar-item to="/home" icon="wap-home-o">首页</van-tabbar-item>
      <van-tabbar-item to="/category" icon="apps-o">分类页</van-tabbar-item>
      <van-tabbar-item to="/cart" icon="shopping-cart-o">购物车</van-tabbar-item>
      <van-tabbar-item to="/user" icon="user-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

12. 登录页静态布局

(1) 准备工作

1. 新建 styles/common.less 重置默认样式

// 重置默认样式
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

// 文字溢出省略号
.text-ellipsis-2 {
  overflow: hidden;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}


//添加导航箭头的通用样式
.van-var-bar{
   .van-var-bar arrow{
       color: #333
   } 
}

2. main.js 中导入应用

import '@/styles/common.less'

3. 将准备好的一些图片素材拷贝到 assets 目录【备用】

(2) 登录静态布局

使用组件

• van-nav-bar

vant-ui.js 注册

import { NavBar } from 'vant'
Vue.use(NavBar)

Login.vue 使用

<template>
  <div class="login">                       //返回上一页
    <van-nav-bar title="会员登录" left-arrow @click-left="$router.go(-1)" />
    
    <div class="container">//该部分CV即可
      <div class="title">
        <h3>手机号登录</h3>
        <p>未注册的手机号登录后将自动注册</p>
      </div>
      <div class="form">
        <div class="form-item">
          <input class="inp" maxlength="11" placeholder="请输入手机号码" type="text">  
        </div>
        <div class="form-item">
          <input class="inp" maxlength="5" placeholder="请输入图形验证码" type="text">  //涉及到axios请求
          <img src="@/assets/code.png" alt="">
        </div>
        <div class="form-item">
          <input class="inp" placeholder="请输入短信验证码" type="text">               //涉及到axios请求
          <button>获取验证码</button>
        </div>
      </div>

      <div class="login-btn">登录</div>                                              //涉及到axios请求
    </div>
  </div>
</template>

<script>
export default {
  name: 'LoginIndex'
}
</script>

<style lang="less" scoped>
.container {
  padding: 49px 29px;

  .title {
    margin-bottom: 20px;
    h3 {
      font-size: 26px;
      font-weight: normal;
    }
    p {
      line-height: 40px;
      font-size: 14px;
      color: #b8b8b8;
    }
  }

  .form-item {
    border-bottom: 1px solid #f3f1f2;
    padding: 8px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    .inp {
      display: block;
      border: none;
      outline: none;
      height: 32px;
      font-size: 14px;
      flex: 1;
    }
    img {
      width: 94px;
      height: 31px;
    }
    button {
      height: 31px;
      border: none;
      font-size: 13px;
      color: #cea26a;
      background-color: transparent;
      padding-right: 9px;
    }
  }

  .login-btn {
    width: 100%;
    height: 42px;
    margin-top: 39px;
    background: linear-gradient(90deg,#ecb53c,#ff9211);
    color: #fff;
    border-radius: 39px;
    box-shadow: 0 10px 20px 0 rgba(0,0,0,.1);
    letter-spacing: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>

添加通用样式

styles/common.less 设置导航条，返回箭头颜色

// 设置导航条 返回箭头 颜色
.van-nav-bar {
  .van-icon-arrow-left {
    color: #333;
  }
}

13. request模块 - axios封装

接口文档：https://apifox.com/apidoc/shared-12ab6b18-adc2-444c-ad11-0e60f5693f66/doc-2221080

演示地址：http://cba.itlike.com/public/mweb/#/

基地址：http://cba.itlike.com/public/index.php?s=/api/

我们会使用 axios 来请求后端接口, 一般都会对 axios 进行一些配置 (比如: 配置基础地址,请求响应拦截器等等)

一般项目开发中, 都会对 axios 进行基本的二次封装, 单独封装到一个模块中, 便于使用

目标：将 axios 请求方法，封装到 request 模块

1. 安装 axios

npm i axios --legacy-peer-deps -

2. 新建 utils/request.js 封装 axios 模块
   utils:工具模块
   利用 axios.create 创建一个自定义的 axios 来使用
   axios中文文档地址：https://www.tkcnn.com/axios/zh/instance.html

   import axios from 'axios'
// 创建一个axios实例，将来对创建出来的实例，进行自定义配置
// 好处：不会污染原始的axios实例
   const instance = axios.create({
  baseURL: 'http://cba.itlike.com/public/index.php?s=/api/',   //基地址
  timeout: 5000,    //超时时间
})
//自定义配置 -请求 / 响应 拦截器
// 添加请求拦截器
interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么(默认axios会多包装一层data，需要响应拦截器处理一下)
    return response.data
  }, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  });

//导出配置好的实例
export default instance

3. 获取图形验证码，请求测试

import request from '@/utils/request'
export default {
  name: 'LoginPage',
  async created () {
    const res = await request.get('/captcha/image')
    console.log(res)
  }
}

14. 图形验证码功能完成

图片验证码

1. 准备数据，获取图形验证码后存储图片路径，存储图片唯一标识

//变量三个，俩用来存图片验证码接口的 图片 和 唯一标识，一个用来接受客户输入的验证码
import request from '@/utils/request'
export default {
  name: 'LoginIndex',

  data () {
    return {
      pickCode: '', // 客户输入的验证码
      pickKey: '', // 验证码的唯一标识
      pickUrl: ''// 验证码的图片
    }
  },

  created () {//渲染视图
    this.pickMethods() // 此处为渲染验证码的图片
  },
  mounted () {

  },

  methods: {
    // 验证码刷新时为多次使用故放在methods里方便调用
    async pickMethods () {
      const { data: { base64, key } } = await request.get('/captcha/image')
      this.pickUrl = base64
      this.pickKey = key
    }
  }
}

2. 动态渲染图形验证码，并且点击时要重新刷新验证码

<img v-if="picUrl" :src="picUrl" @click="getPicCode">

15. 封装api接口 - 图片验证码接口

**1.目标：**将请求封装成方法，统一存放到 api 模块，与页面分离

2.原因：以前的模式

• 页面中充斥着请求代码

• 可阅读性不高

• 相同的请求没有复用请求没有统一管理

3.期望：

• 请求与页面逻辑分离
• 相同的请求可以直接复用请求
• 进行了统一管理

4.具体实现

新建 api/login.js 提供获取图形验证码 Api 函数
api模块.js取名规范：跟views下文件名相同

import request from '@/utils/request'

// 获取图形验证码
export const pickMethods = () => {
  return request.get('/captcha/image')
}

login/index.vue页面中调用测试

import { pickMethods } from '@/api/login'

async getPicCode () {
  const { data: { base64, key } } = await pickMethods()
  this.picUrl = base64
  this.picKey = key
},

16. toast 轻提示

https://vant-contrib.gitee.io/vant/v2/#/zh-CN/toast

按需导入组件

两种使用方式

1. 导入调用 ( 组件内 或 非组件中均可 )

Vue.use(Toast);

import { Toast } from 'vant';
Toast('提示内容');

2. 通过this直接调用 ( **组件内 **)

main.js 注册绑定到原型

import { Toast } from 'vant';
Vue.use(Toast)

this.$toast('提示内容')

17. 短信验证倒计时功能

(1) 倒计时基础效果

1. 准备 data 数据

data () {
  return {
    totalTime: 60, // 总秒数
    shengTime: 60, // 倒计时剩余时间
    id: null // 定时器 id
  }
},

2. 给按钮注册点击事件

<button @click="countDown()">
  {{ totalTime === shengTime ?`获取验证码`:`${shengTime}秒后重新发送` }}
  </button>

3. 开启倒计时

 countDown () {
  //如果（id不为空且倒计时=总时间），则
  if (!this.id && this.shengTime === this.totalTime) {
    // 开启倒计时 setInterval()定时器函数
    this.id = setInterval(() => {
      this.shengTime--// 每隔一秒钟让倒计时剩余时间second-1

      if (this.shengTime < 1) {
        // 如果剩余时间 < 1  clearInterval 清除定时器,然后 ，剩余时间变回总时间60，  
        clearInterval(this.id)
        this.id = null
        this.shengTime = this.totalTime
      }
    }, 1000)


  }
}

4. 离开页面销毁定时器

destroyed () {
  clearInterval(this.id)
}

(2) 验证码请求校验处理

1. 输入框 v-model 绑定变量

data () {
  return {
    mobile: '', // 手机号
    picCode: '' // 图形验证码
  }
},
    
<input v-model="mobile" class="inp" maxlength="11" placeholder="请输入手机号码" type="text">
<input v-model="picCode" class="inp" maxlength="5" placeholder="请输入图形验证码" type="text">

2. methods中封装校验方法

// 校验输入框内容
validFn () {
  if (!/^1[3-9]\d{9}$/.test(this.mobile)) {
    this.$toast('请输入正确的手机号')
    return false
  }
  if (!/^\w{4}$/.test(this.picCode)) {
    this.$toast('请输入正确的图形验证码')
    return false
  }
  return true
},

3. 请求倒计时前进行校验

// 获取短信验证码
async getCode () {
  if (!this.validFn()) {
    return
  }
  ...
}

(3) 封装接口，请求获取验证码

1. 封装接口 api/login.js

// 获取短信验证码
export const getMsgCode = (captchaCode, captchaKey, mobile) => {
  return request.post('/captcha/sendSmsCaptcha', {
    form: {
      captchaCode,
      captchaKey,
      mobile
    }
  })
}

2. 调用接口，添加提示

// 获取短信验证码
async getCode () {
  if (!this.validFn()) {
    return
  }

  if (!this.timer && this.second === this.totalSecond) {
    // 发送请求，获取验证码
    await getMsgCode(this.picCode, this.picKey, this.mobile)
    this.$toast('发送成功，请注意查收')
    
    // 开启倒计时
    ...
  }
}

18. 封装api接口 - 登录功能

api/login.js 提供登录 Api 函数

// 验证码登录
export const codeLogin = (mobile, smsCode) => {
  return request.post('/passport/login', {
    form: {
      isParty: false,
      mobile,
      partyData: {},
      smsCode
    }
  })
}

login/index.vue 登录功能

<input class="inp" v-model="msgCode" maxlength="6" placeholder="请输入短信验证码" type="text">
<div class="login-btn" @click="login">登录</div>

data () {
  return {
    msgCode: '',
  }
},
methods: {
  async login () {
    if (!this.validFn()) {
      return
    }
    if (!/^\d{6}$/.test(this.msgCode)) {
      this.$toast('请输入正确的手机验证码')
      return
    }
    await codeLogin(this.mobile, this.msgCode)
    this.$router.push('/')
    this.$toast('登录成功')
  }
}

19. 响应拦截器统一处理错误提示

响应拦截器是咱们拿到数据的 第一个 “数据流转站”，可以在里面统一处理错误，只要不是 200 默认给提示，抛出错误

utils/request.js

import { Toast } from 'vant'

...

// 添加响应拦截器
request.interceptors.response.use(function (response) {
  const res = response.data
  if (res.status !== 200) {
    Toast(res.message)
    return Promise.reject(res.message)
  }
  // 对响应数据做点什么
  return res
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error)
})

20. 将登录权证信息存入 vuex

1. 新建 vuex user 模块 store/modules/user.js

export default {
  namespaced: true,
  state () {
    return {
      userInfo: {
        token: '',
        userId: ''
      },
    }
  },
  mutations: {},
  actions: {}
}

2. 挂载到 vuex 上

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    user,
  }
})

3. 提供 mutations

mutations: {
  setUserInfo (state, obj) {
    state.userInfo = obj
  },
},

4. 页面中 commit 调用

// 登录按钮（校验 & 提交）
async login () {
  if (!this.validFn()) {
    return
  }
  ...
  const res = await codeLogin(this.mobile, this.msgCode)
  this.$store.commit('user/setUserInfo', res.data)
  this.$router.push('/')
  this.$toast('登录成功')
}

21. vuex持久化处理

1. 新建 utils/storage.js 封装方法

const INFO_KEY = 'hm_shopping_info'

// 获取个人信息
export const getInfo = () => {
  const result = localStorage.getItem(INFO_KEY)
  return result ? JSON.parse(result) : {
    token: '',
    userId: ''
  }
}

// 设置个人信息
export const setInfo = (info) => {
  localStorage.setItem(INFO_KEY, JSON.stringify(info))
}

// 移除个人信息
export const removeInfo = () => {
  localStorage.removeItem(INFO_KEY)
}

2. vuex user 模块持久化处理

import { getInfo, setInfo } from '@/utils/storage'
export default {
  namespaced: true,
  state () {
    return {
      userInfo: getInfo()
    }
  },
  mutations: {
    setUserInfo (state, obj) {
      state.userInfo = obj
      setInfo(obj)
    }
  },
  actions: {}
}

22. 优化：添加请求 loading 效果

1. 请求时，打开 loading

// 添加请求拦截器
request.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  Toast.loading({
    message: '请求中...',
    forbidClick: true,
    loadingType: 'spinner',
    duration: 0
  })
  return config
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error)
})

2. 响应时，关闭 loading

// 添加响应拦截器
request.interceptors.response.use(function (response) {
  const res = response.data
  if (res.status !== 200) {
    Toast(res.message)
    return Promise.reject(res.message)
  } else {
    // 清除 loading 中的效果
    Toast.clear()
  }
  // 对响应数据做点什么
  return res
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error)
})

23. 登录访问拦截 - 路由前置守卫

目标：基于全局前置守卫，进行页面访问拦截处理

说明：智慧商城项目，大部分页面，游客都可以直接访问, 如遇到需要登录才能进行的操作，提示并跳转到登录

但是：对于支付页，订单页等，必须是登录的用户才能访问的，游客不能进入该页面，需要做拦截处理

路由导航守卫 - 全局前置守卫

1.所有的路由一旦被匹配到，都会先经过全局前置守卫

2.只有全局前置守卫放行，才会真正解析渲染组件，才能看到页面内容

router.beforeEach((to, from, next) => {
  // 1. to   往哪里去， 到哪去的路由信息对象  
  // 2. from 从哪里来， 从哪来的路由信息对象
  // 3. next() 是否放行
  //    如果next()调用，就是放行
  //    next(路径) 拦截到某个路径页面
})

const authUrl = ['/pay', '/myorder']
router.beforeEach((to, from, next) => {
  const token = store.getters.token
  if (!authUrl.includes(to.path)) {
    next()
    return
  }

  if (token) {
    next()
  } else {
    next('/login')
  }
})

24. 首页 - 静态结构准备

1. 静态结构和样式 layout/home.vue

<template>
  <div class="home">
    <!-- 导航条 -->
    <van-nav-bar title="智慧商城" fixed />

    <!-- 搜索框 -->
    <van-search
      readonly
      shape="round"
      background="#f1f1f2"
      placeholder="请在此输入搜索关键词"
      @click="$router.push('/search')"
    />

    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>
        <img src="@/assets/banner1.jpg" alt="">
      </van-swipe-item>
      <van-swipe-item>
        <img src="@/assets/banner2.jpg" alt="">
      </van-swipe-item>
      <van-swipe-item>
        <img src="@/assets/banner3.jpg" alt="">
      </van-swipe-item>
    </van-swipe>

    <!-- 导航 -->
    <van-grid column-num="5" icon-size="40">
      <van-grid-item
        v-for="item in 10" :key="item"
        icon="http://cba.itlike.com/public/uploads/10001/20230320/58a7c1f62df4cb1eb47fe83ff0e566e6.png"
        text="新品首发"
        @click="$router.push('/category')"
      />
    </van-grid>

    <!-- 主会场 -->
    <div class="main">
      <img src="@/assets/main.png" alt="">
    </div>

    <!-- 猜你喜欢 -->
    <div class="guess">
      <p class="guess-title">—— 猜你喜欢 ——</p>

      <div class="goods-list">
        <GoodsItem v-for="item in 10" :key="item"></GoodsItem>
      </div>
    </div>
  </div>
</template>

<script>
import GoodsItem from '@/components/GoodsItem.vue'
export default {
  name: 'HomePage',
  components: {
    GoodsItem
  }
}
</script>

<style lang="less" scoped>
// 主题 padding
.home {
  padding-top: 100px;
  padding-bottom: 50px;
}

// 导航条样式定制
.van-nav-bar {
  z-index: 999;
  background-color: #c21401;
  ::v-deep .van-nav-bar__title {
    color: #fff;
  }
}

// 搜索框样式定制
.van-search {
  position: fixed;
  width: 100%;
  top: 46px;
  z-index: 999;
}

// 分类导航部分
.my-swipe .van-swipe-item {
  height: 185px;
  color: #fff;
  font-size: 20px;
  text-align: center;
  background-color: #39a9ed;
}
.my-swipe .van-swipe-item img {
  width: 100%;
  height: 185px;
}

// 主会场
.main img {
  display: block;
  width: 100%;
}

// 猜你喜欢
.guess .guess-title {
  height: 40px;
  line-height: 40px;
  text-align: center;
}

// 商品样式
.goods-list {
  background-color: #f6f6f6;
}
</style>

2. 新建components/GoodsItem.vue

<template>
  <div class="goods-item" @click="$router.push('/prodetail')">
    <div class="left">
      <img src="@/assets/product.jpg" alt="" />
    </div>
    <div class="right">
      <p class="tit text-ellipsis-2">
        三星手机 SAMSUNG Galaxy S23 8GB+256GB 超视觉夜拍系统 超清夜景 悠雾紫
        5G手机 游戏拍照旗舰机s23
      </p>
      <p class="count">已售104件</p>
      <p class="price">
        <span class="new">¥3999.00</span>
        <span class="old">¥6699.00</span>
      </p>
    </div>
  </div>
</template>

<script>
export default {}
</script>

<style lang="less" scoped>
.goods-item {
  height: 148px;
  margin-bottom: 6px;
  padding: 10px;
  background-color: #fff;
  display: flex;
  .left {
    width: 127px;
    img {
      display: block;
      width: 100%;
    }
  }
  .right {
    flex: 1;
    font-size: 14px;
    line-height: 1.3;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;

    .count {
      color: #999;
      font-size: 12px;
    }
    .price {
      color: #999;
      font-size: 16px;
      .new {
        color: #f03c3c;
        margin-right: 10px;
      }
      .old {
        text-decoration: line-through;
        font-size: 12px;
      }
    }
  }
}
</style>

3. 组件按需引入

import { Search, Swipe, SwipeItem, Grid, GridItem } from 'vant'

Vue.use(GridItem)
Vue.use(Search)
Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(Grid)

25. 首页 - 动态渲染

1. 封装准备接口 api/home.js

import request from '@/utils/request'

// 获取首页数据
export const getHomeData = () => {
  return request.get('/page/detail', {
    params: {
      pageId: 0
    }
  })
}

2. 页面中请求调用

import GoodsItem from '@/components/GoodsItem.vue'
import { getHomeData } from '@/api/home'
export default {
  name: 'HomePage',
  components: {
    GoodsItem
  },
  data () {
    return {
      bannerList: [],
      navList: [],
      proList: []
    }
  },
  async created () {
    const { data: { pageData } } = await getHomeData()
    this.bannerList = pageData.items[1].data
    this.navList = pageData.items[3].data
    this.proList = pageData.items[6].data
  }
}

3. 轮播图、导航、猜你喜欢渲染

<!-- 轮播图 -->
<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
  <van-swipe-item v-for="item in bannerList" :key="item.imgUrl">
    <img :src="item.imgUrl" alt="">
  </van-swipe-item>
</van-swipe>

<!-- 导航 -->
<van-grid column-num="5" icon-size="40">
  <van-grid-item
    v-for="item in navList" :key="item.imgUrl"
    :icon="item.imgUrl"
    :text="item.text"
    @click="$router.push('/category')"
  />
</van-grid>
    
<!-- 猜你喜欢 -->
<div class="guess">
  <p class="guess-title">—— 猜你喜欢 ——</p>

  <div class="goods-list">
    <GoodsItem v-for="item in proList"  :item="item" :key="item.goods_id"></GoodsItem>
  </div>
</div>

4. 商品组件内，动态渲染

<template>
  <div v-if="item.goods_name" class="goods-item" @click="$router.push(`/prodetail/${item.goods_id}`)">
    <div class="left">
      <img :src="item.goods_image" alt="" />
    </div>
    <div class="right">
      <p class="tit text-ellipsis-2">
        {{ item.goods_name }}
      </p>
      <p class="count">已售 {{ item.goods_sales }}件</p>
      <p class="price">
        <span class="new">¥{{ item.goods_price_min }}</span>
        <span class="old">¥{{ item.goods_price_max }}</span>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default: () => {
        return {}
      }
    }
  }
}
</script>

26. 搜索 - 静态布局准备

1. 静态结构和代码

<template>
  <div class="search">
    <van-nav-bar title="商品搜索" left-arrow @click-left="$router.go(-1)" />

    <van-search show-action placeholder="请输入搜索关键词" clearable>
      <template #action>
        <div>搜索</div>
      </template>
    </van-search>

    <!-- 搜索历史 -->
    <div class="search-history">
      <div class="title">
        <span>最近搜索</span>
        <van-icon name="delete-o" size="16" />
      </div>
      <div class="list">
        <div class="list-item" @click="$router.push('/searchlist')">炒锅</div>
        <div class="list-item" @click="$router.push('/searchlist')">电视</div>
        <div class="list-item" @click="$router.push('/searchlist')">冰箱</div>
        <div class="list-item" @click="$router.push('/searchlist')">手机</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SearchIndex'
}
</script>

<style lang="less" scoped>
.search {
  .searchBtn {
    background-color: #fa2209;
    color: #fff;
  }
  ::v-deep .van-search__action {
    background-color: #c21401;
    color: #fff;
    padding: 0 20px;
    border-radius: 0 5px 5px 0;
    margin-right: 10px;
  }
  ::v-deep .van-icon-arrow-left {
    color: #333;
  }
  .title {
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
  }
  .list {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 0 10px;
    gap: 5%;
  }
  .list-item {
    width: 30%;
    text-align: center;
    padding: 7px;
    line-height: 15px;
    border-radius: 50px;
    background: #fff;
    font-size: 13px;
    border: 1px solid #efefef;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-bottom: 10px;
  }
}
</style>

2. 组件按需导入

import { Icon } from 'vant'
Vue.use(Icon)

27. 搜索 - 历史记录 - 基本管理

1. data 中提供数据，和搜索框双向绑定 (实时获取用户内容)

data () {
  return {
    search: ''
  }
}

<van-search v-model="search" show-action placeholder="请输入搜索关键词" clearable>
  <template #action>
    <div>搜索</div>
  </template>
</van-search>

2. 准备假数据，进行基本的历史纪录渲染

data () {
  return {
    ...
    history: ['手机', '空调', '白酒', '电视']
  }
},
    
<div class="search-history" v-if="history.length > 0">
  ...
  <div class="list">
    <div v-for="item in history" :key="item" @click="goSearch(item)" class="list-item">
      {{ item }}
    </div>
  </div>
</div>

3. 点击搜索，或者下面搜索历史按钮，都要进行搜索历史记录更新 (去重，新搜索的内容置顶)

<div @click="goSearch(search)">搜索</div>

<div class="list">
  <div v-for="item in history" :key="item" @click="goSearch(item)" class="list-item">
    {{ item }}
  </div>
</div>

goSearch (key) {
  const index = this.history.indexOf(key)
  if (index !== -1) {
    this.history.splice(index, 1)
  }
  this.history.unshift(key)
  this.$router.push(`/searchlist?search=${key}`)
}

4. 清空历史

<van-icon @click="clear" name="delete-o" size="16" />

clear () {
  this.history = []
}

28. 搜索 - 历史记录 - 持久化

1. 持久化到本地 - 封装方法

const HISTORY_KEY = 'hm_history_list'

// 获取搜索历史
export const getHistoryList = () => {
  const result = localStorage.getItem(HISTORY_KEY)
  return result ? JSON.parse(result) : []
}

// 设置搜索历史
export const setHistoryList = (arr) => {
  localStorage.setItem(HISTORY_KEY, JSON.stringify(arr))
}

2. 页面中调用 - 实现持久化

data () {
  return {
    search: '',
    history: getHistoryList()
  }
},
methods: {
  goSearch (key) {
    ...
    setHistoryList(this.history)
    this.$router.push(`/searchlist?search=${key}`)
  },
  clear () {
    this.history = []
    setHistoryList([])
    this.$toast.success('清空历史成功')
  }
}

29. 搜索列表 - 静态布局

<template>
  <div class="search">
    <van-nav-bar fixed title="商品列表" left-arrow @click-left="$router.go(-1)" />

    <van-search
      readonly
      shape="round"
      background="#ffffff"
      value="手机"
      show-action
      @click="$router.push('/search')"
    >
      <template #action>
        <van-icon class="tool" name="apps-o" />
      </template>
    </van-search>

    <!-- 排序选项按钮 -->
    <div class="sort-btns">
      <div class="sort-item">综合</div>
      <div class="sort-item">销量</div>
      <div class="sort-item">价格 </div>
    </div>

    <div class="goods-list">
      <GoodsItem v-for="item in 10" :key="item"></GoodsItem>
    </div>
  </div>
</template>

<script>
import GoodsItem from '@/components/GoodsItem.vue'
export default {
  name: 'SearchIndex',
  components: {
    GoodsItem
  }
}
</script>

<style lang="less" scoped>
.search {
  padding-top: 46px;
  ::v-deep .van-icon-arrow-left {
    color: #333;
  }
  .tool {
    font-size: 24px;
    height: 40px;
    line-height: 40px;
  }

  .sort-btns {
    display: flex;
    height: 36px;
    line-height: 36px;
    .sort-item {
      text-align: center;
      flex: 1;
      font-size: 16px;
    }
  }
}

// 商品样式
.goods-list {
  background-color: #f6f6f6;
}
</style>

30. 搜索列表 - 动态渲染

(1) 搜索关键字搜索

1. 计算属性，基于query 解析路由参数

computed: {
  querySearch () {
    return this.$route.query.search
  }
}

2. 根据不同的情况，设置输入框的值

<van-search
  ...
  :value="querySearch || '搜索商品'"
></van-search>

3. api/product.js 封装接口，获取搜索商品

import request from '@/utils/request'

// 获取搜索商品列表数据
export const getProList = (paramsObj) => {
  const { categoryId, goodsName, page } = paramsObj
  return request.get('/goods/list', {
    params: {
      categoryId,
      goodsName,
      page
    }
  })
}

4. 页面中基于 goodsName 发送请求，动态渲染

data () {
  return {
    page: 1,
    proList: []
  }
},
async created () {
  const { data: { list } } = await getProList({
    goodsName: this.querySearch,
    page: this.page
  })
  this.proList = list.data
}

<div class="goods-list">
  <GoodsItem v-for="item in proList" :key="item.goods_id" :item="item"></GoodsItem>
</div>

(2) 分类id搜索

1 封装接口 api/category.js

import request from '@/utils/request'

// 获取分类数据
export const getCategoryData = () => {
  return request.get('/category/list')
}

2 分类页静态结构

<template>
  <div class="category">
    <!-- 分类 -->
    <van-nav-bar title="全部分类" fixed />

    <!-- 搜索框 -->
    <van-search
      readonly
      shape="round"
      background="#f1f1f2"
      placeholder="请输入搜索关键词"
      @click="$router.push('/search')"
    />

    <!-- 分类列表 -->
    <div class="list-box">
      <div class="left">
        <ul>
          <li v-for="(item, index) in list" :key="item.category_id">
            <a :class="{ active: index === activeIndex }" @click="activeIndex = index" href="javascript:;">{{ item.name }}</a>
          </li>
        </ul>
      </div>
      <div class="right">
        <div @click="$router.push(`/searchlist?categoryId=${item.category_id}`)" v-for="item in list[activeIndex]?.children" :key="item.category_id" class="cate-goods">
          <img :src="item.image?.external_url" alt="">
          <p>{{ item.name }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getCategoryData } from '@/api/category'
export default {
  name: 'CategoryPage',
  created () {
    this.getCategoryList()
  },
  data () {
    return {
      list: [],
      activeIndex: 0
    }
  },
  methods: {
    async getCategoryList () {
      const { data: { list } } = await getCategoryData()
      this.list = list
    }
  }
}
</script>

<style lang="less" scoped>
// 主题 padding
.category {
  padding-top: 100px;
  padding-bottom: 50px;
  height: 100vh;
  .list-box {
    height: 100%;
    display: flex;
    .left {
      width: 85px;
      height: 100%;
      background-color: #f3f3f3;
      overflow: auto;
      a {
        display: block;
        height: 45px;
        line-height: 45px;
        text-align: center;
        color: #444444;
        font-size: 12px;
        &.active {
          color: #fb442f;
          background-color: #fff;
        }
      }
    }
    .right {
      flex: 1;
      height: 100%;
      background-color: #ffffff;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-content: flex-start;
      padding: 10px 0;
      overflow: auto;

      .cate-goods {
        width: 33.3%;
        margin-bottom: 10px;
        img {
          width: 70px;
          height: 70px;
          display: block;
          margin: 5px auto;
        }
        p {
          text-align: center;
          font-size: 12px;
        }
      }
    }
  }
}

// 导航条样式定制
.van-nav-bar {
  z-index: 999;
}

// 搜索框样式定制
.van-search {
  position: fixed;
  width: 100%;
  top: 46px;
  z-index: 999;
}
</style>

3 搜索页，基于分类 ID 请求

async created () {
  const { data: { list } } = await getProList({
    categoryId: this.$route.query.categoryId,
    goodsName: this.querySearch,
    page: this.page
  })
  this.proList = list.data
}

31. 商品详情 - 静态布局

静态结构 和 样式

<template>
  <div class="prodetail">
    <van-nav-bar fixed title="商品详情页" left-arrow @click-left="$router.go(-1)" />

    <van-swipe :autoplay="3000" @change="onChange">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img :src="image" />
      </van-swipe-item>

      <template #indicator>
        <div class="custom-indicator">{{ current + 1 }} / {{ images.length }}</div>
      </template>
    </van-swipe>

    <!-- 商品说明 -->
    <div class="info">
      <div class="title">
        <div class="price">
          <span class="now">￥0.01</span>
          <span class="oldprice">￥6699.00</span>
        </div>
        <div class="sellcount">已售1001件</div>
      </div>
      <div class="msg text-ellipsis-2">
        三星手机 SAMSUNG Galaxy S23 8GB+256GB 超视觉夜拍系统 超清夜景 悠雾紫 5G手机 游戏拍照旗舰机s23
      </div>

      <div class="service">
        <div class="left-words">
          <span><van-icon name="passed" />七天无理由退货</span>
          <span><van-icon name="passed" />48小时发货</span>
        </div>
        <div class="right-icon">
          <van-icon name="arrow" />
        </div>
      </div>
    </div>

    <!-- 商品评价 -->
    <div class="comment">
      <div class="comment-title">
        <div class="left">商品评价 (5条)</div>
        <div class="right">查看更多 <van-icon name="arrow" /> </div>
      </div>
      <div class="comment-list">
        <div class="comment-item" v-for="item in 3" :key="item">
          <div class="top">
            <img src="http://cba.itlike.com/public/uploads/10001/20230321/a0db9adb2e666a65bc8dd133fbed7834.png" alt="">
            <div class="name">神雕大侠</div>
            <van-rate :size="16" :value="5" color="#ffd21e" void-icon="star" void-color="#eee"/>
          </div>
          <div class="content">
            质量很不错 挺喜欢的
          </div>
          <div class="time">
            2023-03-21 15:01:35
          </div>
        </div>
      </div>
    </div>

    <!-- 商品描述 -->
    <div class="desc">
      <img src="https://uimgproxy.suning.cn/uimg1/sop/commodity/kHgx21fZMWwqirkMhawkAw.jpg" alt="">
      <img src="https://uimgproxy.suning.cn/uimg1/sop/commodity/0rRMmncfF0kGjuK5cvLolg.jpg" alt="">
      <img src="https://uimgproxy.suning.cn/uimg1/sop/commodity/2P04A4Jn0HKxbKYSHc17kw.jpg" alt="">
      <img src="https://uimgproxy.suning.cn/uimg1/sop/commodity/MT4k-mPd0veQXWPPO5yTIw.jpg" alt="">
    </div>

    <!-- 底部 -->
    <div class="footer">
      <div class="icon-home">
        <van-icon name="wap-home-o" />
        <span>首页</span>
      </div>
      <div class="icon-cart">
        <van-icon name="shopping-cart-o" />
        <span>购物车</span>
      </div>
      <div class="btn-add">加入购物车</div>
      <div class="btn-buy">立刻购买</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ProDetail',
  data () {
    return {
      images: [
        'https://img01.yzcdn.cn/vant/apple-1.jpg',
        'https://img01.yzcdn.cn/vant/apple-2.jpg'
      ],
      current: 0
    }
  },
  methods: {
    onChange (index) {
      this.current = index
    }
  }
}
</script>

<style lang="less" scoped>
.prodetail {
  padding-top: 46px;
  ::v-deep .van-icon-arrow-left {
    color: #333;
  }
  img {
    display: block;
    width: 100%;
  }
  .custom-indicator {
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding: 5px 10px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 15px;
  }
  .desc {
    width: 100%;
    overflow: scroll;
    ::v-deep img {
      display: block;
      width: 100%!important;
    }
  }
  .info {
    padding: 10px;
  }
  .title {
    display: flex;
    justify-content: space-between;
    .now {
      color: #fa2209;
      font-size: 20px;
    }
    .oldprice {
      color: #959595;
      font-size: 16px;
      text-decoration: line-through;
      margin-left: 5px;
    }
    .sellcount {
      color: #959595;
      font-size: 16px;
      position: relative;
      top: 4px;
    }
  }
  .msg {
    font-size: 16px;
    line-height: 24px;
    margin-top: 5px;
  }
  .service {
    display: flex;
    justify-content: space-between;
    line-height: 40px;
    margin-top: 10px;
    font-size: 16px;
    background-color: #fafafa;
    .left-words {
      span {
        margin-right: 10px;
      }
      .van-icon {
        margin-right: 4px;
        color: #fa2209;
      }
    }
  }

  .comment {
    padding: 10px;
  }
  .comment-title {
    display: flex;
    justify-content: space-between;
    .right {
      color: #959595;
    }
  }

  .comment-item {
    font-size: 16px;
    line-height: 30px;
    .top {
      height: 30px;
      display: flex;
      align-items: center;
      margin-top: 20px;
      img {
        width: 20px;
        height: 20px;
      }
      .name {
        margin: 0 10px;
      }
    }
    .time {
      color: #999;
    }
  }

  .footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 55px;
    background-color: #fff;
    border-top: 1px solid #ccc;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    .icon-home, .icon-cart {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      .van-icon {
        font-size: 24px;
      }
    }
    .btn-add,
    .btn-buy {
      height: 36px;
      line-height: 36px;
      width: 120px;
      border-radius: 18px;
      background-color: #ffa900;
      text-align: center;
      color: #fff;
      font-size: 14px;
    }
    .btn-buy {
      background-color: #fe5630;
    }
  }
}
    
.tips {
  padding: 10px;
}
</style>

Lazyload 是 Vue 指令，使用前需要对指令进行注册。

import { Lazyload } from 'vant'
Vue.use(Lazyload)

32. 商品详情 - 动态渲染介绍

1. 动态路由参数，获取商品 id

computed: {
  goodsId () {
    return this.$route.params.id
  }
},

2. 封装 api 接口 api/product.js

// 获取商品详情数据
export const getProDetail = (goodsId) => {
  return request.get('/goods/detail', {
    params: {
      goodsId
    }
  })
}

3. 一进入页面发送请求，获取商品详情数据

data () {
  return {
    images: [
      'https://img01.yzcdn.cn/vant/apple-1.jpg',
      'https://img01.yzcdn.cn/vant/apple-2.jpg'
    ],
    current: 0,
    detail: {},
  }
},

async created () {
  this.getDetail()
},

methods: {
  ...
  async getDetail () {
    const { data: { detail } } = await getProDetail(this.goodsId)
    this.detail = detail
    this.images = detail.goods_images
  }
}

4. 动态渲染

<div class="prodetail" v-if="detail.goods_name">

<van-swipe :autoplay="3000" @change="onChange">
  <van-swipe-item v-for="(image, index) in images" :key="index">
    <img v-lazy="image.external_url" />
  </van-swipe-item>

  <template #indicator>
    <div class="custom-indicator">{{ current + 1 }} / {{ images.length }}</div>
  </template>
</van-swipe>

<!-- 商品说明 -->
<div class="info">
  <div class="title">
    <div class="price">
      <span class="now">￥{{ detail.goods_price_min }}</span>
      <span class="oldprice">￥{{ detail.goods_price_max }}</span>
    </div>
    <div class="sellcount">已售{{ detail.goods_sales }}件</div>
  </div>
  <div class="msg text-ellipsis-2">
    {{ detail.goods_name }}
  </div>

  <div class="service">
    <div class="left-words">
      <span><van-icon name="passed" />七天无理由退货</span>
      <span><van-icon name="passed" />48小时发货</span>
    </div>
    <div class="right-icon">
      <van-icon name="arrow" />
    </div>
  </div>
</div>

<!-- 商品描述 -->
<div class="tips">商品描述</div>
<div class="desc" v-html="detail.content"></div>

33. 商品详情 - 动态渲染评价

1. 封装接口 api/product.js

// 获取商品评价
export const getProComments = (goodsId, limit) => {
  return request.get('/comment/listRows', {
    params: {
      goodsId,
      limit
    }
  })
}

2. 页面调用获取数据

import defaultImg from '@/assets/default-avatar.png'

data () {
  return {
    ...
    total: 0,
    commentList: [],
    defaultImg
},

async created () {
  ...
  this.getComments()
},
    
async getComments () {
  const { data: { list, total } } = await getProComments(this.goodsId, 3)
  this.commentList = list
  this.total = total
},

3. 动态渲染评价

<!-- 商品评价 -->
<div class="comment" v-if="total > 0">
  <div class="comment-title">
    <div class="left">商品评价 ({{ total }}条)</div>
    <div class="right">查看更多 <van-icon name="arrow" /> </div>
  </div>
  <div class="comment-list">
    <div class="comment-item" v-for="item in commentList" :key="item.comment_id">
      <div class="top">
        <img :src="item.user.avatar_url || defaultImg" alt="">
        <div class="name">{{ item.user.nick_name }}</div>
        <van-rate :size="16" :value="item.score / 2" color="#ffd21e" void-icon="star" void-color="#eee"/>
      </div>
      <div class="content">
        {{ item.content }}
      </div>
      <div class="time">
        {{ item.create_time }}
      </div>
    </div> 
  </div>
</div>

34. 加入购物车 - 唤起弹窗

1. 按需导入 van-action-sheet

import { ActionSheet } from 'vant'
Vue.use(ActionSheet)

2. 准备 van-action-sheet 基本结构

<van-action-sheet v-model="showPannel" :title="mode === 'cart' ? '加入购物车' : '立刻购买'">
	111
</van-action-sheet>
    
data () {
  return {
    ...
    mode: 'cart'
    showPannel: false
  }
},

3. 注册点击事件，点击时唤起弹窗

<div class="btn-add" @click="addFn">加入购物车</div>
<div class="btn-buy" @click="buyFn">立刻购买</div>

addFn () {
  this.mode = 'cart'
  this.showPannel = true
},
buyFn () {
  this.mode = 'buyNow'
  this.showPannel = true
}

4. 完善结构

<van-action-sheet v-model="showPannel" :title="mode === 'cart' ? '加入购物车' : '立刻购买'">
  <div class="product">
    <div class="product-title">
      <div class="left">
        <img src="http://cba.itlike.com/public/uploads/10001/20230321/8f505c6c437fc3d4b4310b57b1567544.jpg" alt="">
      </div>
      <div class="right">
        <div class="price">
          <span>¥</span>
          <span class="nowprice">9.99</span>
        </div>
        <div class="count">
          <span>库存</span>
          <span>55</span>
        </div>
      </div>
    </div>
    <div class="num-box">
      <span>数量</span>
      数字框占位
    </div>
    <div class="showbtn" v-if="true">
      <div class="btn" v-if="true">加入购物车</div>
      <div class="btn now" v-else>立刻购买</div>
    </div>
    <div class="btn-none" v-else>该商品已抢完</div>
  </div>
</van-action-sheet>

.product {
  .product-title {
    display: flex;
    .left {
      img {
        width: 90px;
        height: 90px;
      }
      margin: 10px;
    }
    .right {
      flex: 1;
      padding: 10px;
      .price {
        font-size: 14px;
        color: #fe560a;
        .nowprice {
          font-size: 24px;
          margin: 0 5px;
        }
      }
    }
  }

  .num-box {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    align-items: center;
  }

  .btn, .btn-none {
    height: 40px;
    line-height: 40px;
    margin: 20px;
    border-radius: 20px;
    text-align: center;
    color: rgb(255, 255, 255);
    background-color: rgb(255, 148, 2);
  }
  .btn.now {
    background-color: #fe5630;
  }
  .btn-none {
    background-color: #cccccc;
  }
}

5. 动态渲染

<van-action-sheet v-model="showPannel" :title="mode === 'cart' ? '加入购物车' : '立刻购买'">
  <div class="product">
    <div class="product-title">
      <div class="left">
        <img :src="detail.goods_image" alt="">
      </div>
      <div class="right">
        <div class="price">
          <span>¥</span>
          <span class="nowprice">{{ detail.goods_price_min }}</span>
        </div>
        <div class="count">
          <span>库存</span>
          <span>{{ detail.stock_total }}</span>
        </div>
      </div>
    </div>
    <div class="num-box">
      <span>数量</span>
      数字框组件
    </div>
    <div class="showbtn" v-if="detail.stock_total > 0">
      <div class="btn" v-if="mode === 'cart'">加入购物车</div>
      <div class="btn now" v-if="mode === 'buyNow'">立刻购买</div>
    </div>
    <div class="btn-none" v-else>该商品已抢完</div>
  </div>
</van-action-sheet>

35. 加入购物车 - 封装数字框组件

1. 封装组件 components/CountBox.vue

<template>
  <div class="count-box">
    <button @click="handleSub" class="minus">-</button>
    <input :value="value" @change="handleChange" class="inp" type="text">
    <button @click="handleAdd" class="add">+</button>
  </div>
</template>

    
<script>
export default {
  props: {
    value: {
      type: Number,
      default: 1
    }
  },
  methods: {
    handleSub () {
      if (this.value <= 1) {
        return
      }
      this.$emit('input', this.value - 1)
    },
    handleAdd () {
      this.$emit('input', this.value + 1)
    },
    handleChange (e) {
      // console.log(e.target.value)
      const num = +e.target.value // 转数字处理 (1) 数字 (2) NaN

      // 输入了不合法的文本 或 输入了负值，回退成原来的 value 值
      if (isNaN(num) || num < 1) {
        e.target.value = this.value
        return
      }

      this.$emit('input', num)
    }
  }
}
</script>
    

<style lang="less" scoped>
.count-box {
  width: 110px;
  display: flex;
  .add, .minus {
    width: 30px;
    height: 30px;
    outline: none;
    border: none;
    background-color: #efefef;
  }
  .inp {
    width: 40px;
    height: 30px;
    outline: none;
    border: none;
    margin: 0 5px;
    background-color: #efefef;
    text-align: center;
  }
}
</style>

2. 使用组件

import CountBox from '@/components/CountBox.vue'

export default {
  name: 'ProDetail',
  components: {
    CountBox
  },
  data () {
    return {
      addCount: 1
      ...
    }
  },
}

<div class="num-box">
  <span>数量</span>
  <CountBox v-model="addCount"></CountBox>
</div>

36. 加入购物车 - 判断 token 登录提示

说明：加入购物车，是一个登录后的用户才能进行的操作，所以需要进行鉴权判断，判断用户 token 是否存在

1. 若存在：继续加入购物车操作
2. 不存在：提示用户未登录，引导到登录页

1. 按需注册 dialog 组件

import { Dialog } from 'vant'
Vue.use(Dialog)

2. 按钮注册点击事件

<div class="btn" v-if="mode === 'cart'" @click="addCart">加入购物车</div>

3. 添加 token 鉴权判断，跳转携带回跳地址

async addCart () {
  // 判断用户是否有登录
  if (!this.$store.getters.token) {
    this.$dialog.confirm({
      title: '温馨提示',
      message: '此时需要先登录才能继续操作哦',
      confirmButtonText: '去登录',
      cancelButtonText: '再逛逛'
    })
      .then(() => {
        this.$router.replace({
          path: '/login',
          query: {
            backUrl: this.$route.fullPath
          }
        })
      })
      .catch(() => {})
    return
  }
  console.log('进行加入购物车操作')
}

4. 登录后，若有回跳地址，则回跳页面

// 判断有无回跳地址
const url = this.$route.query.backUrl || '/'
this.$router.replace(url)

37. 加入购物车 - 封装接口进行请求

1. 封装接口 api/cart.js

// 加入购物车
export const addCart = (goodsId, goodsNum, goodsSkuId) => {
  return request.post('/cart/add', {
    goodsId,
    goodsNum,
    goodsSkuId
  })
}

2. 页面中调用请求

data () {
  return {
      cartTotal: 0
  }  
},

async addCart () {
  ...
  const { data } = await addCart(this.goodsId, this.addCount, this.detail.skuList[0].goods_sku_id)
  this.cartTotal = data.cartTotal
  this.$toast('加入购物车成功')
  this.showPannel = false
},

3. 请求拦截器中，统一携带 token

// 自定义配置 - 请求/响应 拦截器
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
  ...
  const token = store.getters.token
  if (token) {
    config.headers['Access-Token'] = token
    config.headers.platform = 'H5'
  }
  return config
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error)
})

4. 准备小图标

<div class="icon-cart">
  <span v-if="cartTotal > 0" class="num">{{ cartTotal }}</span>
  <van-icon name="shopping-cart-o" />
  <span>购物车</span>
</div>

5. 定制样式

.footer .icon-cart {
  position: relative;
  padding: 0 6px;
  .num {
    z-index: 999;
    position: absolute;
    top: -2px;
    right: 0;
    min-width: 16px;
    padding: 0 4px;
    color: #fff;
    text-align: center;
    background-color: #ee0a24;
    border-radius: 50%;
  }
}

38. 购物车 - 静态布局

1. 基本结构

<template>
  <div class="cart">
    <van-nav-bar title="购物车" fixed />
    <!-- 购物车开头 -->
    <div class="cart-title">
      <span class="all">共<i>4</i>件商品</span>
      <span class="edit">
        <van-icon name="edit" />
        编辑
      </span>
    </div>

    <!-- 购物车列表 -->
    <div class="cart-list">
      <div class="cart-item" v-for="item in 10" :key="item">
        <van-checkbox></van-checkbox>
        <div class="show">
          <img src="http://cba.itlike.com/public/uploads/10001/20230321/a072ef0eef1648a5c4eae81fad1b7583.jpg" alt="">
        </div>
        <div class="info">
          <span class="tit text-ellipsis-2">新Pad 14英寸 12+128 远峰蓝 M6平板电脑 智能安卓娱乐十核游戏学习二合一 低蓝光护眼超清4K全面三星屏5GWIFI全网通 蓝魔快本平板</span>
          <span class="bottom">
            <div class="price">¥ <span>1247.04</span></div>
            <div class="count-box">
              <button class="minus">-</button>
              <input class="inp" :value="4" type="text" readonly>
              <button class="add">+</button>
            </div>
          </span>
        </div>
      </div>
    </div>

    <div class="footer-fixed">
      <div  class="all-check">
        <van-checkbox  icon-size="18"></van-checkbox>
        全选
      </div>

      <div class="all-total">
        <div class="price">
          <span>合计：</span>
          <span>¥ <i class="totalPrice">99.99</i></span>
        </div>
        <div v-if="true" class="goPay">结算(5)</div>
        <div v-else class="delete">删除</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CartPage'
}
</script>

<style lang="less" scoped>
// 主题 padding
.cart {
  padding-top: 46px;
  padding-bottom: 100px;
  background-color: #f5f5f5;
  min-height: 100vh;
  .cart-title {
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    font-size: 14px;
    .all {
      i {
        font-style: normal;
        margin: 0 2px;
        color: #fa2209;
        font-size: 16px;
      }
    }
    .edit {
      .van-icon {
        font-size: 18px;
      }
    }
  }

  .cart-item {
    margin: 0 10px 10px 10px;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    background-color: #ffffff;
    border-radius: 5px;

    .show img {
      width: 100px;
      height: 100px;
    }
    .info {
      width: 210px;
      padding: 10px 5px;
      font-size: 14px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .bottom {
        display: flex;
        justify-content: space-between;
        .price {
          display: flex;
          align-items: flex-end;
          color: #fa2209;
          font-size: 12px;
          span {
            font-size: 16px;
          }
        }
        .count-box {
          display: flex;
          width: 110px;
          .add,
          .minus {
            width: 30px;
            height: 30px;
            outline: none;
            border: none;
          }
          .inp {
            width: 40px;
            height: 30px;
            outline: none;
            border: none;
            background-color: #efefef;
            text-align: center;
            margin: 0 5px;
          }
        }
      }
    }
  }
}

.footer-fixed {
  position: fixed;
  left: 0;
  bottom: 50px;
  height: 50px;
  width: 100%;
  border-bottom: 1px solid #ccc;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;

  .all-check {
    display: flex;
    align-items: center;
    .van-checkbox {
      margin-right: 5px;
    }
  }

  .all-total {
    display: flex;
    line-height: 36px;
    .price {
      font-size: 14px;
      margin-right: 10px;
      .totalPrice {
        color: #fa2209;
        font-size: 18px;
        font-style: normal;
      }
    }

    .goPay, .delete {
      min-width: 100px;
      height: 36px;
      line-height: 36px;
      text-align: center;
      background-color: #fa2f21;
      color: #fff;
      border-radius: 18px;
      &.disabled {
        background-color: #ff9779;
      }
    }
  }

}
</style>

2. 按需导入组件

import { Checkbox } from 'vant'
Vue.use(Checkbox)

39. 购物车 - 构建 vuex 模块 - 获取数据存储

1. 新建 modules/cart.js 模块

export default {
  namespaced: true,
  state () {
    return {
      cartList: []
    }
  },
  mutations: {
  },
  actions: {
  },
  getters: {
  }
}

2. 挂载到 store 上面

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import cart from './modules/cart'

Vue.use(Vuex)

export default new Vuex.Store({
  getters: {
    token: state => state.user.userInfo.token
  },
  modules: {
    user,
    cart
  }
})

3. 封装 API 接口 api/cart.js

// 获取购物车列表数据
export const getCartList = () => {
  return request.get('/cart/list')
}

4. 封装 action 和 mutation

mutations: {
  setCartList (state, newList) {
    state.cartList = newList
  },
},
actions: {
  async getCartAction (context) {
    const { data } = await getCartList()
    data.list.forEach(item => {
      item.isChecked = true
    })
    context.commit('setCartList', data.list)
  }
},

5. 页面中 dispatch 调用

computed: {
  isLogin () {
    return this.$store.getters.token
  }
},
created () {
  if (this.isLogin) {
    this.$store.dispatch('cart/getCartAction')
  }
},

40. 购物车 - mapState - 渲染购物车列表

1. 将数据映射到页面

import { mapState } from 'vuex'

computed: {
  ...mapState('cart', ['cartList'])
}

2. 动态渲染

<!-- 购物车列表 -->
<div class="cart-list">
  <div class="cart-item" v-for="item in cartList" :key="item.goods_id">
    <van-checkbox icon-size="18" :value="item.isChecked"></van-checkbox>
    <div class="show" @click="$router.push(`/prodetail/${item.goods_id}`)">
      <img :src="item.goods.goods_image" alt="">
    </div>
    <div class="info">
      <span class="tit text-ellipsis-2">{{ item.goods.goods_name }}</span>
      <span class="bottom">
        <div class="price">¥ <span>{{ item.goods.goods_price_min }}</span></div>
        <CountBox :value="item.goods_num"></CountBox>
      </span>
    </div>
  </div>
</div>

41. 购物车 - 封装 getters - 动态计算展示

1. 封装 getters：商品总数 / 选中的商品列表 / 选中的商品总数 / 选中的商品总价

getters: {
  cartTotal (state) {
    return state.cartList.reduce((sum, item, index) => sum + item.goods_num, 0)
  },
  selCartList (state) {
    return state.cartList.filter(item => item.isChecked)
  },
  selCount (state, getters) {
    return getters.selCartList.reduce((sum, item, index) => sum + item.goods_num, 0)
  },
  selPrice (state, getters) {
    return getters.selCartList.reduce((sum, item, index) => {
      return sum + item.goods_num * item.goods.goods_price_min
    }, 0).toFixed(2)
  }
}

2. 页面中 mapGetters 映射使用

computed: {
  ...mapGetters('cart', ['cartTotal', 'selCount', 'selPrice']),
},
    
<!-- 购物车开头 -->
<div class="cart-title">
  <span class="all">共<i>{{ cartTotal || 0 }}</i>件商品</span>
  <span class="edit">
    <van-icon name="edit"  />
    编辑
  </span>
</div>


<div class="footer-fixed">
  <div  class="all-check">
    <van-checkbox  icon-size="18"></van-checkbox>
    全选
  </div>
  <div class="all-total">
    <div class="price">
      <span>合计：</span>
      <span>¥ <i class="totalPrice">{{ selPrice }}</i></span>
    </div>
    <div v-if="true" :class="{ disabled: selCount === 0 }" class="goPay">
      结算({{ selCount }})
    </div>
    <div v-else  :class="{ disabled: selCount === 0 }" class="delete">
      删除({{ selCount }})
    </div>
  </div>
</div>

42. 购物车 - 全选反选功能

1. 全选 getters

getters: {
  isAllChecked (state) {
    return state.cartList.every(item => item.isChecked)
  }
}
    
...mapGetters('cart', ['isAllChecked']),

<div class="all-check">
  <van-checkbox :value="isAllChecked" icon-size="18"></van-checkbox>
  全选
</div>

2. 点击小选，修改状态

<van-checkbox @click="toggleCheck(item.goods_id)" ...></van-checkbox>
    
toggleCheck (goodsId) {
  this.$store.commit('cart/toggleCheck', goodsId)
},
    
mutations: {
  toggleCheck (state, goodsId) {
    const goods = state.cartList.find(item => item.goods_id === goodsId)
    goods.isChecked = !goods.isChecked
  },
}

3. 点击全选，重置状态

<div @click="toggleAllCheck" class="all-check">
  <van-checkbox :value="isAllChecked" icon-size="18"></van-checkbox>
  全选
</div>

toggleAllCheck () {
  this.$store.commit('cart/toggleAllCheck', !this.isAllChecked)
},

mutations: {
  toggleAllCheck (state, flag) {
    state.cartList.forEach(item => {
      item.isChecked = flag
    })
  },
}

43. 购物车 - 数字框修改数量

1. 封装 api 接口

// 更新购物车商品数量
export const changeCount = (goodsId, goodsNum, goodsSkuId) => {
  return request.post('/cart/update', {
    goodsId,
    goodsNum,
    goodsSkuId
  })
}

2. 页面中注册点击事件，传递数据

<CountBox :value="item.goods_num" @input="value => changeCount(value, item.goods_id, item.goods_sku_id)"></CountBox>

changeCount (value, goodsId, skuId) {
  this.$store.dispatch('cart/changeCountAction', {
    value,
    goodsId,
    skuId
  })
},

3. 提供 action 发送请求， commit mutation

mutations: {
  changeCount (state, { goodsId, value }) {
    const obj = state.cartList.find(item => item.goods_id === goodsId)
    obj.goods_num = value
  }
},
actions: {
  async changeCountAction (context, obj) {
    const { goodsId, value, skuId } = obj
    context.commit('changeCount', {
      goodsId,
      value
    })
    await changeCount(goodsId, value, skuId)
  },
}

44. 购物车 - 编辑切换状态

1. data 提供数据, 定义是否在编辑删除的状态

data () {
  return {
    isEdit: false
  }
},

2. 注册点击事件，修改状态

<span class="edit" @click="isEdit = !isEdit">
  <van-icon name="edit"  />
  编辑
</span>

3. 底下按钮根据状态变化

<div v-if="!isEdit" :class="{ disabled: selCount === 0 }" class="goPay">
    去结算（{{ selCount }}）
</div>
<div v-else :class="{ disabled: selCount === 0 }" class="delete">删除</div>

4. 监视编辑状态，动态控制复选框状态

watch: {
  isEdit (value) {
    if (value) {
      this.$store.commit('cart/toggleAllCheck', false)
    } else {
      this.$store.commit('cart/toggleAllCheck', true)
    }
  }
}

45. 购物车 - 删除功能完成

1. 查看接口，封装 API ( 注意：此处 id 为获取回来的购物车数据的 id )

// 删除购物车
export const delSelect = (cartIds) => {
  return request.post('/cart/clear', {
    cartIds
  })
}

2. 注册删除点击事件

<div v-else :class="{ disabled: selCount === 0 }" @click="handleDel" class="delete">
  删除({{ selCount }})
</div>

async handleDel () {
  if (this.selCount === 0) return
  await this.$store.dispatch('cart/delSelect')
  this.isEdit = false
},

3. 提供 actions

actions: {
    // 删除购物车数据
    async delSelect (context) {
      const selCartList = context.getters.selCartList
      const cartIds = selCartList.map(item => item.id)
      await delSelect(cartIds)
      Toast('删除成功')

      // 重新拉取最新的购物车数据 (重新渲染)
      context.dispatch('getCartAction')
    }
},

46. 购物车 - 空购物车处理

1. 外面包个大盒子，添加 v-if 判断

<div class="cart-box" v-if="isLogin && cartList.length > 0">
  <!-- 购物车开头 -->
  <div class="cart-title">
    ...
  </div>
  <!-- 购物车列表 -->
  <div class="cart-list">
    ...
  </div>
  <div class="footer-fixed">
    ...
  </div>
</div>

<div class="empty-cart" v-else>
  <img src="@/assets/empty.png" alt="">
  <div class="tips">
    您的购物车是空的, 快去逛逛吧
  </div>
  <div class="btn" @click="$router.push('/')">去逛逛</div>
</div>

2. 相关样式

.empty-cart {
  padding: 80px 30px;
  img {
    width: 140px;
    height: 92px;
    display: block;
    margin: 0 auto;
  }
  .tips {
    text-align: center;
    color: #666;
    margin: 30px;
  }
  .btn {
    width: 110px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    background-color: #fa2c20;
    border-radius: 16px;
    color: #fff;
    display: block;
    margin: 0 auto;
  }
}

47. 订单结算台

所谓的 “立即结算”，本质就是跳转到订单结算台，并且跳转的同时，需要携带上对应的订单参数。

而具体需要哪些参数，就需要基于 【订单结算台】 的需求来定。

(1) 静态布局

准备静态页面

<template>
  <div class="pay">
    <van-nav-bar fixed title="订单结算台" left-arrow @click-left="$router.go(-1)" />

    <!-- 地址相关 -->
    <div class="address">

      <div class="left-icon">
        <van-icon name="logistics" />
      </div>

      <div class="info" v-if="true">
        <div class="info-content">
          <span class="name">小红</span>
          <span class="mobile">13811112222</span>
        </div>
        <div class="info-address">
          江苏省 无锡市 南长街 110号 504
        </div>
      </div>

      <div class="info" v-else>
        请选择配送地址
      </div>

      <div class="right-icon">
        <van-icon name="arrow" />
      </div>
    </div>

    <!-- 订单明细 -->
    <div class="pay-list">
      <div class="list">
        <div class="goods-item">
            <div class="left">
              <img src="http://cba.itlike.com/public/uploads/10001/20230321/8f505c6c437fc3d4b4310b57b1567544.jpg" alt="" />
            </div>
            <div class="right">
              <p class="tit text-ellipsis-2">
                 三星手机 SAMSUNG Galaxy S23 8GB+256GB 超视觉夜拍系统 超清夜景 悠雾紫 5G手机 游戏拍照旗舰机s23
              </p>
              <p class="info">
                <span class="count">x3</span>
                <span class="price">¥9.99</span>
              </p>
            </div>
        </div>
      </div>

      <div class="flow-num-box">
        <span>共 12 件商品，合计：</span>
        <span class="money">￥1219.00</span>
      </div>

      <div class="pay-detail">
        <div class="pay-cell">
          <span>订单总金额：</span>
          <span class="red">￥1219.00</span>
        </div>

        <div class="pay-cell">
          <span>优惠券：</span>
          <span>无优惠券可用</span>
        </div>

        <div class="pay-cell">
          <span>配送费用：</span>
          <span v-if="false">请先选择配送地址</span>
          <span v-else class="red">+￥0.00</span>
        </div>
      </div>

      <!-- 支付方式 -->
      <div class="pay-way">
        <span class="tit">支付方式</span>
        <div class="pay-cell">
          <span><van-icon name="balance-o" />余额支付（可用 ¥ 999919.00 元）</span>
          <!-- <span>请先选择配送地址</span> -->
          <span class="red"><van-icon name="passed" /></span>
        </div>
      </div>

      <!-- 买家留言 -->
      <div class="buytips">
        <textarea placeholder="选填：买家留言（50字内）" name="" id="" cols="30" rows="10"></textarea>
      </div>
    </div>

    <!-- 底部提交 -->
    <div class="footer-fixed">
      <div class="left">实付款：<span>￥999919</span></div>
      <div class="tipsbtn">提交订单</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PayIndex',
  data () {
    return {
    }
  },
  methods: {
  }
}
</script>

<style lang="less" scoped>
.pay {
  padding-top: 46px;
  padding-bottom: 46px;
  ::v-deep {
    .van-nav-bar__arrow {
      color: #333;
    }
  }
}
.address {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 20px;
  font-size: 14px;
  color: #666;
  position: relative;
  background: url(@/assets/border-line.png) bottom repeat-x;
  background-size: 60px auto;
  .left-icon {
    margin-right: 20px;
  }
  .right-icon {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-7px);
  }
}
.goods-item {
  height: 100px;
  margin-bottom: 6px;
  padding: 10px;
  background-color: #fff;
  display: flex;
  .left {
    width: 100px;
    img {
      display: block;
      width: 80px;
      margin: 10px auto;
    }
  }
  .right {
    flex: 1;
    font-size: 14px;
    line-height: 1.3;
    padding: 10px;
    padding-right: 0px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    color: #333;
    .info {
      margin-top: 5px;
      display: flex;
      justify-content: space-between;
      .price {
        color: #fa2209;
      }
    }
  }
}

.flow-num-box {
  display: flex;
  justify-content: flex-end;
  padding: 10px 10px;
  font-size: 14px;
  border-bottom: 1px solid #efefef;
  .money {
    color: #fa2209;
  }
}

.pay-cell {
  font-size: 14px;
  padding: 10px 12px;
  color: #333;
  display: flex;
  justify-content: space-between;
  .red {
    color: #fa2209;
  }
}
.pay-detail {
  border-bottom: 1px solid #efefef;
}

.pay-way {
  font-size: 14px;
  padding: 10px 12px;
  border-bottom: 1px solid #efefef;
  color: #333;
  .tit {
    line-height: 30px;
  }
  .pay-cell {
    padding: 10px 0;
  }
  .van-icon {
    font-size: 20px;
    margin-right: 5px;
  }
}

.buytips {
  display: block;
  textarea {
    display: block;
    width: 100%;
    border: none;
    font-size: 14px;
    padding: 12px;
    height: 100px;
  }
}

.footer-fixed {
  position: fixed;
  background-color: #fff;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 46px;
  line-height: 46px;
  border-top: 1px solid #efefef;
  font-size: 14px;
  display: flex;
  .left {
    flex: 1;
    padding-left: 12px;
    color: #666;
    span {
      color:#fa2209;
    }
  }
  .tipsbtn {
    width: 121px;
    background: linear-gradient(90deg,#f9211c,#ff6335);
    color: #fff;
    text-align: center;
    line-height: 46px;
    display: block;
    font-size: 14px;
  }
}
</style>

(2) 获取收货地址列表

1 封装获取地址的接口

import request from '@/utils/request'

// 获取地址列表
export const getAddressList = () => {
  return request.get('/address/list')
}

2 页面中 - 调用获取地址

data () {
  return {
    addressList: []
  }
},
computed: {
  selectAddress () {
    // 这里地址管理不是主线业务，直接获取默认第一条地址
    return this.addressList[0] 
  }
},
async created () {
  this.getAddressList()
},
methods: {
  async getAddressList () {
    const { data: { list } } = await getAddressList()
    this.addressList = list
  }
}

3 页面中 - 进行渲染

computed: {
  longAddress () {
    const region = this.selectAddress.region
    return region.province + region.city + region.region + this.selectAddress.detail
  }
},

<div class="info" v-if="selectAddress?.address_id">
  <div class="info-content">
    <span class="name">{{ selectAddress.name }}</span>
    <span class="mobile">{{ selectAddress.phone }}</span>
  </div>
  <div class="info-address">
    {{ longAddress }}
  </div>
</div>

(3) 订单结算 - 封装通用接口

**思路分析：**这里的订单结算，有两种情况：

1. 购物车结算，需要两个参数

   ① mode=“cart”

   ② cartIds=“cartId, cartId”

2. 立即购买结算，需要三个参数

   ① mode=“buyNow”

   ② goodsId=“商品id”

   ③ goodsSkuId=“商品skuId”

都需要跳转时将参数传递过来

---

封装通用 API 接口 api/order

import request from '@/utils/request'

export const checkOrder = (mode, obj) => {
  return request.get('/checkout/order', {
    params: {
      mode,
      delivery: 0,
      couponId: 0,
      isUsePoints: 0,
      ...obj
    }
  })
}

(4) 订单结算 - 购物车结算

1 跳转时，传递查询参数

layout/cart.vue

<div @click="goPay">结算({{ selCount }})</div>

goPay () {
  if (this.selCount > 0) {
    this.$router.push({
      path: '/pay',
      query: {
        mode: 'cart',
        cartIds: this.selCartList.map(item => item.id).join(',')
      }
    })
  }
}

2 页面中接收参数, 调用接口，获取数据

data () {
  return {
    order: {},
    personal: {}
  }
},
    
computed: {
  mode () {
    return this.$route.query.mode
  },
  cartIds () {
    return this.$route.query.cartIds
  }
}

async created () {
  this.getOrderList()
},

async getOrderList () {
  if (this.mode === 'cart') {
    const { data: { order, personal } } = await checkOrder(this.mode, { cartIds: this.cartIds })
    this.order = order
    this.personal = personal
  }
}

3 基于数据进行渲染

<!-- 订单明细 -->
<div class="pay-list" v-if="order.goodsList">
  <div class="list">
    <div class="goods-item" v-for="item in order.goodsList" :key="item.goods_id">
        <div class="left">
          <img :src="item.goods_image" alt="" />
        </div>
        <div class="right">
          <p class="tit text-ellipsis-2">
            {{ item.goods_name }}
          </p>
          <p class="info">
            <span class="count">x{{ item.total_num }}</span>
            <span class="price">¥{{ item.total_pay_price }}</span>
          </p>
        </div>
    </div>
  </div>

  <div class="flow-num-box">
    <span>共 {{ order.orderTotalNum }} 件商品，合计：</span>
    <span class="money">￥{{ order.orderTotalPrice }}</span>
  </div>

  <div class="pay-detail">
    <div class="pay-cell">
      <span>订单总金额：</span>
      <span class="red">￥{{ order.orderTotalPrice }}</span>
    </div>

    <div class="pay-cell">
      <span>优惠券：</span>
      <span>无优惠券可用</span>
    </div>

    <div class="pay-cell">
      <span>配送费用：</span>
      <span v-if="!selectAddress">请先选择配送地址</span>
      <span v-else class="red">+￥0.00</span>
    </div>
  </div>

  <!-- 支付方式 -->
  <div class="pay-way">
    <span class="tit">支付方式</span>
    <div class="pay-cell">
      <span><van-icon name="balance-o" />余额支付（可用 ¥ {{ personal.balance }} 元）</span>
      <!-- <span>请先选择配送地址</span> -->
      <span class="red"><van-icon name="passed" /></span>
    </div>
  </div>

  <!-- 买家留言 -->
  <div class="buytips">
    <textarea placeholder="选填：买家留言（50字内）" name="" id="" cols="30" rows="10"></textarea>
  </div>
</div>

<!-- 底部提交 -->
<div class="footer-fixed">
  <div class="left">实付款：<span>￥{{ order.orderTotalPrice }}</span></div>
  <div class="tipsbtn">提交订单</div>
</div>

(5) 订单结算 - 立即购买结算

1 点击跳转传参

prodetail/index.vue

<div class="btn" v-if="mode === 'buyNow'" @click="goBuyNow">立刻购买</div>

goBuyNow () {
  this.$router.push({
    path: '/pay',
    query: {
      mode: 'buyNow',
      goodsId: this.goodsId,
      goodsSkuId: this.detail.skuList[0].goods_sku_id,
      goodsNum: this.addCount
    }
  })
}

2 计算属性处理参数

computed: {
  ...
  goodsId () {
    return this.$route.query.goodsId
  },
  goodsSkuId () {
    return this.$route.query.goodsSkuId
  },
  goodsNum () {
    return this.$route.query.goodsNum
  }
}

3 基于请求时携带参数发请求渲染

async getOrderList () {
  ...
  
  if (this.mode === 'buyNow') {
    const { data: { order, personal } } = await checkOrder(this.mode, {
      goodsId: this.goodsId,
      goodsSkuId: this.goodsSkuId,
      goodsNum: this.goodsNum
    })
    this.order = order
    this.personal = personal
  }
}

(6) mixins 复用 - 处理登录确认框的弹出

1 新建一个 mixin 文件 mixins/loginConfirm.js

export default {
  methods: {
    // 是否需要弹登录确认框
    // (1) 需要，返回 true，并直接弹出登录确认框
    // (2) 不需要，返回 false
    loginConfirm () {
      if (!this.$store.getters.token) {
        this.$dialog.confirm({
          title: '温馨提示',
          message: '此时需要先登录才能继续操作哦',
          confirmButtonText: '去登陆',
          cancelButtonText: '再逛逛'
        })
          .then(() => {
            // 如果希望，跳转到登录 => 登录后能回跳回来，需要在跳转去携带参数 (当前的路径地址)
            // this.$route.fullPath (会包含查询参数)
            this.$router.replace({
              path: '/login',
              query: {
                backUrl: this.$route.fullPath
              }
            })
          })
          .catch(() => {})
        return true
      }
      return false
    }
  }
}

2 页面中导入，混入方法

import loginConfirm from '@/mixins/loginConfirm'

export default {
  name: 'ProDetail',
  mixins: [loginConfirm],
  ...
}

3 页面中调用 混入的方法

async addCart () {
  if (this.loginConfirm()) {
    return
  }
  const { data } = await addCart(this.goodsId, this.addCount, this.detail.skuList[0].goods_sku_id)
  this.cartTotal = data.cartTotal
  this.$toast('加入购物车成功')
  this.showPannel = false
  console.log(this.cartTotal)
},

goBuyNow () {
  if (this.loginConfirm()) {
    return
  }
  this.$router.push({
    path: '/pay',
    query: {
      mode: 'buyNow',
      goodsId: this.goodsId,
      goodsSkuId: this.detail.skuList[0].goods_sku_id,
      goodsNum: this.addCount
    }
  })
}

48. 提交订单并支付

1 封装 API 通用方法（统一余额支付）

// 提交订单
export const submitOrder = (mode, params) => {
  return request.post('/checkout/submit', {
    mode,
    delivery: 10, // 物流方式  配送方式 (10快递配送 20门店自提)
    couponId: 0, // 优惠券 id
    payType: 10, // 余额支付
    isUsePoints: 0, // 是否使用积分
    ...params
  })
}

2 买家留言绑定

data () {
  return {
    remark: ''
  }
},
<div class="buytips">
  <textarea v-model="remark" placeholder="选填：买家留言（50字内）" name="" id="" cols="30" rows="10">
  </textarea>
</div>

3 注册点击事件，提交订单并支付

<div class="tipsbtn" @click="submitOrder">提交订单</div>

// 提交订单
async submitOrder () {
  if (this.mode === 'cart') {
    await submitOrder(this.mode, {
      remark: this.remark,
      cartIds: this.cartIds
    })
  }
  if (this.mode === 'buyNow') {
    await submitOrder(this.mode, {
      remark: this.remark,
      goodsId: this.goodsId,
      goodsSkuId: this.goodsSkuId,
      goodsNum: this.goodsNum
    })
  }
  this.$toast.success('支付成功')
  this.$router.replace('/myorder')
}

49. 订单管理

(1) 静态布局

1 基础静态结构

<template>
  <div class="order">
    <van-nav-bar title="我的订单" left-arrow @click-left="$router.go(-1)" />
    <van-tabs v-model="active">
      <van-tab title="全部"></van-tab>
      <van-tab title="待支付"></van-tab>
      <van-tab title="待发货"></van-tab>
      <van-tab title="待收货"></van-tab>
      <van-tab title="待评价"></van-tab>
    </van-tabs>

    <OrderListItem></OrderListItem>
  </div>
</template>

<script>
import OrderListItem from '@/components/OrderListItem.vue'
export default {
  name: 'OrderPage',
  components: {
    OrderListItem
  },
  data () {
    return {
      active: 0
    }
  }
}
</script>

<style lang="less" scoped>
.order {
  background-color: #fafafa;
}
.van-tabs {
  position: sticky;
  top: 0;
}
</style>

2 components/OrderListItem

<template>
  <div class="order-list-item">
    <div class="tit">
      <div class="time">2023-07-01 12:02:13</div>
      <div class="status">
        <span>待支付</span>
      </div>
    </div>
    <div class="list">
      <div class="list-item">
        <div class="goods-img">
          <img src="http://cba.itlike.com/public/uploads/10001/20230321/c4b5c61e46489bb9b9c0630002fbd69e.jpg" alt="">
        </div>
        <div class="goods-content text-ellipsis-2">
          Apple iPhone 14 Pro Max 256G 银色 移动联通电信5G双卡双待手机
        </div>
        <div class="goods-trade">
          <p>¥ 1299.00</p>
          <p>x 3</p>
        </div>
      </div>
      <div class="list-item">
        <div class="goods-img">
          <img src="http://cba.itlike.com/public/uploads/10001/20230321/c4b5c61e46489bb9b9c0630002fbd69e.jpg" alt="">
        </div>
        <div class="goods-content text-ellipsis-2">
          Apple iPhone 14 Pro Max 256G 银色 移动联通电信5G双卡双待手机
        </div>
        <div class="goods-trade">
          <p>¥ 1299.00</p>
          <p>x 3</p>
        </div>
      </div>
      <div class="list-item">
        <div class="goods-img">
          <img src="http://cba.itlike.com/public/uploads/10001/20230321/c4b5c61e46489bb9b9c0630002fbd69e.jpg" alt="">
        </div>
        <div class="goods-content text-ellipsis-2">
          Apple iPhone 14 Pro Max 256G 银色 移动联通电信5G双卡双待手机
        </div>
        <div class="goods-trade">
          <p>¥ 1299.00</p>
          <p>x 3</p>
        </div>
      </div>
    </div>
    <div class="total">
      共12件商品，总金额 ¥29888.00
    </div>
    <div class="actions">
      <span v-if