Vue2笔记

最新推荐文章于 2024-07-25 15:39:18 发布

HANG_WORLD

最新推荐文章于 2024-07-25 15:39:18 发布

阅读量258

点赞数

分类专栏：前端啊文章标签：笔记 vue.js 前端

本文链接：https://blog.csdn.net/HANG_WORLD/article/details/132871823

版权

前端啊专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Day01

一、为什么要学习Vue

1.前端必备技能

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

3.提高开发效率

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

二、什么是Vue

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

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

操作数据的框架，并且有：
Vue核心包开发（局部开发）
Vue核心包&Vue插件&工程化（全站开发）

三、创建Vue实例

核心步骤（4步）：

准备容器
引包（官网） — 开发版本/生产版本
创建Vue实例 new Vue()
指定配置项，渲染数据
1. el:指定挂载点
2. data提供数据

<div id="app">
    <p>{{msg}}</p>
    <p>{{ age>=18 ? '成年' : '未成年' }}</p>
</div>
<script src="/lib/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',  //选择器，管理的盒子
        data:{      //渲染数据
            msg: '哈哈哈哈',
            age:1
        }
    })
</script>

四、插值表达式 {{}}

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

我们可以用插值表达式渲染出Vue提供的数据
在这里插入图片描述
1、语法：{{ 表达式 }}

五、响应式特性

响应式：简单理解就是数据变，视图对应变。
修改： ① 访问数据： “实例.属性名” ② 修改数据： “实例.属性名”= “值”
底层：
在这里插入图片描述

六、Vue开发者工具安装

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

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

七、Vue中的常用指令

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

内容渲染指令（v-html、v-text）

 1、v-text（类似innerText）
 使用语法：`<p v-text="uname">hello</p>`，意思是将 uame 值渲染到 p 标签中
 类似 innerText，使用该语法，会覆盖 p 标签原有内容

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

示例代码：

<div id="app1">
        <p v-text=msg>hello</p>
        <p v-html=msg1>hello</p>
    </div>
    <script>
        const app1 = new Vue({
            el:'#app1',
            data: {
                msg:'意思是将 msg 值渲染到 p 标签中',
                msg1:'<span>意思是将 msg1 值渲染到 p 标签中(包括标签)</span>'
            },
            methods: {
            }
        })
    </script>

条件渲染指令（v-show、v-if、v-else、v-else-if）

 1、v-show ：控制元素显示隐藏
 语法：v-show = "表达式"   表达式值为 true 显示， false 隐藏
 原理：  切换 display:none 控制显示隐藏
 场景：频繁切换显示隐藏的场景
 
 2、v-if：控制元素显示隐藏（条件渲染）
 语法：  v-if= "表达式"          表达式值 true显示， false 隐藏
 原理：  基于条件判断，是否创建 或 移除元素节点
 场景：  要么显示，要么隐藏，不频繁切换的场景

 3、v-else 和 v-else-if：辅助v-if进行判断渲染
 语法：v-else  v-else-if="表达式"

示例代码：

<div id="app">
    <div v-show='true'>v-show:表达式值为 true 显示， false 隐藏</div>
    <div v-if='false'>v-if:表达式值为 true 显示， false 隐藏</div>
    <div v-else-if="false">v-else-if:辅助</div>
    <div v-else>v-else:辅助（前面根据v-if v-else-if 按顺序只要前面的为true了,后面的不需要看）</div>
</div>
<script>
    const app = new Vue({
        el:'#app',	//迭代器
        data:{  //数据

        },
        methods:{   //方法

        }
    })
</script>

事件绑定指令（v-on）

 使用Vue时，如需为DOM注册事件，及其的简单，语法如下：

 <button v-on:事件名="内联语句">按钮</button>
 <button v-on:事件名="处理函数">按钮</button>
 <button v-on:事件名="处理函数(实参)">按钮</button>
 v-on:` 简写为 **@**

示例代码：

<div id="app3">
        <p>{{msg}}</p>
        <button v-on:click="msg++">按我+</button>
        <button v-on:click="fs(5)">按我+5</button>
        <button @click="msg--">按我-</button>

        <script>
            const app3 = new Vue({
                el:'#app3' ,
                data: {
                  msg: 15
                },
                methods:{
                    fs(index){
                        app3.msg+=index
                    }
                }
            })
        </script>
    </div>

属性绑定指令（v-bind）

 v-bind：动态设置html的标签属性 比如：src、url、title
 语法：v-bind:属性名=“表达式”

示例代码：

<div id="app4">
        <img v-bind:src="msg">
        <script>
            const app4 = new Vue({
                el:'#app4',
                data:{
                    msg:'./imgs/10-02.png'
                },
                methods:{

                }
            })
        </script>
    </div>

双向绑定指令（v-model）

 	所谓双向绑定就是：
 1. 数据改变后，呈现的页面结果会更新
 2. 页面结果更新后，数据也会随之而变
 作用：给表单元素（input、radio、select）使用，双向绑定数据，可以快速 获取*或 设置 表单元素内容
 语法：v-model="变量"

示例代码：

<div id="app5">
        用户：<input type="text" v-model="user"><br>
        密码：<input type="password" v-model="password">
        <script>
            const  app5 = new Vue({
                el:'#app5',
                data:{
                    user:'',
                    password:''
                },
                methods:{

                }
            })
        </script>
    </div>

列表渲染指令（v-for）

 v-for：用来辅助开发者基于一个数组来循环渲染一个列表结构。
 语法：v-for="(value, key, index) in arr :key="item.id""
 - item 是数组中的每一项
 - index 是每一项的索引，不需要可以省略
 - arr 是被遍历的数组
 - key给列表项添加的唯一标识

<div id="app6">
        <ul>
            <li v-for="(item,index) in meg" :key="item.id">
                <span>{{item.name}}</span>
                <span>{{item.author}}</span>
                <span>{{item.cont}}</span>
            </li>
        </ul>
    </div>
    <script>
        const  app6= new Vue({
            el:'#app6',
            data:{
                meg:[
                    {id:1,name: '《红楼梦》', author: '曹雪芹',cont:130},
                    {id:2,name: '《西游记》', author: '吴承恩',cont:120},
                    {id:3,name: '《水浒传》', author: '施耐庵',cont:150}
                ]
            },
            methods:{

            }
        })
    </script>

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

Day02

一、今日学习目标

1.指令补充

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

2.computed计算属性

基础语法
计算属性vs方法
计算属性的完整写法
成绩案例

3.watch侦听器

基础写法
完整写法

二、指令修饰符

1.什么是指令修饰符？

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

2.按键修饰符

@keyup.enter —>当点击enter键的时候才触发
代码演示：

 <input type="text" @keyup.enter="fu()" v-model="username">	 <!--按回车键会执行fu()方法-->

3.v-model修饰符

v-model.trim —>去除首位空格
v-model.number —>转数字

4.事件修饰符

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

三、v-bind对样式控制的增强-操作class

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

1.语法：

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

2.对象语法

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

<div class="box" :class="{ 类名1: 布尔值, 类名2: 布尔值 }"></div>

适用场景：一个类名，来回切换

3.数组语法

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

<div class="box" :class="[ 类名1, 类名2, 类名3 ]"></div>

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

四、v-bind对有样式控制的增强-操作style

1.语法

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

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

1.讲解内容：

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

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

2.案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    textarea {
      display: block;
      width: 240px;
      height: 100px;
      margin: 10px 0;
    }
  </style>
</head>
<body>

  <div id="app">
    <h3>小黑学习网</h3>

    姓名：
      <input type="text" v-model="username">
      <br><br>

    是否单身：
      <input type="checkbox" v-model="isDanshen">
      <br><br>

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

    <!-- 
      前置理解：
        1. option 需要设置 value 值，提交给后台
        2. select 的 value 值，关联了选中的 option 的 value 值
      结合 Vue 使用 → v-model
    -->
    所在城市:
      <select v-model="city">
        <option value="111">北京</option>
        <option value="222">上海</option>
        <option value="333">成都</option>
        <option value="444">南京</option>
      </select>
      <br><br>

    自我描述：
      <textarea v-model="txts"></textarea>

    <button>立即注册</button>
  </div>
  <script src="/lib/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        username:'蔡航',
        isDanshen:'',
        gender:1,
        city:444,
        txts:'aa'

      },
      watch:{
        username(newVlue){
          console.log("变化了："+newVlue)
        }
      }
    })
  </script>
</body>
</html>

六、computed计算属性

1.概念

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

2.语法

声明在 computed 配置项中，一个计算属性对应一个函数
使用起来和普通属性一样使用 {{ 计算属性名}}

3.注意

computed配置项和data配置项是同级的
computed中的计算属性虽然是函数的写法，但他依然是个属性
computed中的计算属性不能和data中的属性同名
使用computed中的计算属性和使用data中的属性是一样的用法
computed中计算属性内部的this依然指向的是Vue实例

七、computed计算属性 VS methods方法

1.computed计算属性

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

语法：

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

2.methods计算属性

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

语法：

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

3.计算属性的优势

缓存特性（提升性能）

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

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

4.总结

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

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

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

八、计算属性的完整写法

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

计算属性默认的简写，只能读取访问，不能 “修改”
如果要 “修改” → 需要写计算属性的完整写法

computed:{
          isAll:{
            get(){
              return this.fruitList.every(item => item.isChecked === true)
            },
            set(value){
              this.fruitList.forEach(item => item.isChecked = value)
            }
          }
      }

九、watch侦听器（监视器）

1.作用：

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

2.语法：

watch同样声明在跟data同级的配置项中
简单写法：简单类型数据直接监视
完整写法：添加额外配置项

   data: { 
     words: '苹果',
     obj: {
       words: '苹果'
     }
   },
   
   watch: {
     // 该方法会在数据变化时，触发执行
     数据属性名 (newValue, oldValue) {
       一些业务逻辑 或 异步操作。 
     },
     '对象.属性名' (newValue, oldValue) {
       一些业务逻辑 或 异步操作。 
     }
   }

3、完整写法

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

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

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

watch: {// watch 完整写法
  对象: {
    deep: true, // 深度监视
    immdiate:true,//立即执行handler函数
    handler (newValue) {
      console.log(newValue)
    }
  }
}

十、综合案例

在这里插入图片描述
需求说明：

渲染功能
删除功能
修改个数
全选反选
统计选中的总价和总数量
持久化到本地

实现思路：

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

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

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

4.全选反选

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

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

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

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/inputnumber.css" />
    <link rel="stylesheet" href="./css/index.css" />
    <title>购物车</title>
  </head>
  <body>
    <div class="app-container" id="app">
      <!-- 顶部banner -->
      <div class="banner-box"><img src="http://autumnfish.cn/static/fruit.jpg" alt="" /></div>
      <!-- 面包屑 -->
      <div class="breadcrumb">
        <span>🏠</span>
        /
        <span>购物车</span>
      </div>
      <!-- 购物车主体 -->
      <div class="main" v-if="fruitList.length>0" >
        <div class="table">
          <!-- 头部 -->
          <div class="thead">
            <div class="tr">
              <div class="th">选中</div>
              <div class="th th-pic">图片</div>
              <div class="th">单价</div>
              <div class="th num-th">个数</div>
              <div class="th">小计</div>
              <div class="th">操作</div>
            </div>
          </div>
          <!-- 身体 -->
          <div class="tbody">
            <div class="tr" v-for="(item,index) in fruitList" :key="item.id" :class="{active:item.isChecked}">
              <div class="td"><input type="checkbox" checked v-model="item.isChecked"/></div>
              <div class="td"><img v-bind:src="item.icon" alt=""/></div>
              <div class="td">{{item.price}}</div>
              <div class="td">
                <div class="my-input-number">
                  <button class="decrease" @click="add(item.id)" :disabled="item.num<=1"> - </button>
                  <span class="my-input__inner">{{item.num}}</span>
                  <button class="increase" @click="sub(item.id)"> + </button>
                </div>
              </div>
              <div class="td">{{item.num * item.price}}</div>
              <div class="td"><button @click="del(item.id)">删除</button></div>
            </div>
          </div>
        </div>
        <!-- 底部 -->
        <div class="bottom">
          <!-- 全选 -->
          <label class="check-all">
            <input type="checkbox" v-model="isAll"/>
            全选
          </label>
          <div class="right-box">
            <!-- 所有商品总价 -->
            <span class="price-box">总价&nbsp;&nbsp;:&nbsp;&nbsp;¥&nbsp;<span class="price">{{totalPrice}}</span></span>
            <!-- 结算按钮 -->
            <button class="pay">结算( {{totalCount}} )</button>
          </div>
        </div>
      </div>
      <!-- 空车 -->
      <div class="empty" v-else>🛒空空如也</div>
    </div>
    <script src="/lib/vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          // 水果列表
          fruitList: JSON.parse(localStorage.getItem('list'))||[],
        },
        computed:{
          isAll:{
            get(){
              return this.fruitList.every(item => item.isChecked === true)
            },
            set(value){
              this.fruitList.forEach(item => item.isChecked = value)
            }
          },
          // 统计选中的总数
          totalCount(){
              return this.fruitList.reduce((sum,item) => {
                if(item.isChecked){
                  return sum+item.num
                }else {
                  return sum
                }
              },0)
          },
          totalPrice(){
            return this.fruitList.reduce((sum,item) => {
              if(item.isChecked){
                return sum+item.num*item.price
              }else {
                return sum
              }
            },0)
          }
        },
        methods:{
          del(id){
            this.fruitList=this.fruitList.filter(item => item.id != id)
          },
          sub(id){
            //根据id找到数组中的对应项
            const  fruit= this.fruitList.find(item => item.id === id)
            fruit.num++
          },
          add(id){
            const  fruit= this.fruitList.find(item => item.id === id)
            fruit.num--
          }
        },
        watch:{
          fruitList:{
            deep:true,
            handler(newValue) {
              //需要将变化后的newValue存入本地
              localStorage.setItem('list',JSON.stringify(newValue))
            }
          }
        }
      })
    </script>
  </body>
</html>

Day03

二、Vue生命周期

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

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

1.创建阶段：创建响应式数据

2.挂载阶段：渲染模板

3.更新阶段：修改数据，更新视图

4.销毁阶段：销毁Vue实例

在这里插入图片描述

三、Vue生命周期钩子

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


    const app = new Vue({
      el: '#app',
      data: {
        count: 100,
        title: '计数器'
      },
      // 1. 创建阶段（准备数据）
      beforeCreate () {
        console.log('beforeCreate 响应式数据准备好之前', this.count)
      },
      created () {
        console.log('created 响应式数据准备好之后', this.count)
        // this.数据名 = 请求回来的数据
        // 可以开始发送初始化渲染的请求了
      },

      // 2. 挂载阶段（渲染模板）
      beforeMount () {
        console.log('beforeMount 模板渲染之前', document.querySelector('h3').innerHTML)
      },
      mounted () {
        console.log('mounted 模板渲染之后', document.querySelector('h3').innerHTML)
        // 可以开始操作dom了
      },

      // 3. 更新阶段(修改数据 → 更新视图)
      beforeUpdate () {
        console.log('beforeUpdate 数据修改了，视图还没更新', document.querySelector('span').innerHTML)
      },
      updated () {
        console.log('updated 数据修改了，视图已经更新', document.querySelector('span').innerHTML)
      },

      // 4. 卸载阶段
      beforeDestroy () {
        console.log('beforeDestroy, 卸载前')
        console.log('清除掉一些Vue以外的资源占用，定时器，延时器...')
      },
      destroyed () {
        console.log('destroyed，卸载后')
      }
    })

用到的地方：
created ：可以发送请求拿取数据库数据，方便首页的渲染
mounted ：操作dom，进入网页搜索框获取焦点 document.querySelector(‘#id’).focus()

五、案例-小黑记账清单

1.需求图示：

在这里插入图片描述

2.需求分析

1.基本渲染

2.添加功能

3.删除功能

4.饼图渲染

3.思路分析

1.基本渲染

立刻发送请求获取数据 created
拿到数据，存到data的响应式数据中
结合数据，进行渲染 v-for
消费统计 —> 计算属性

2.添加功能

收集表单数据 v-model，使用指令修饰符处理数据
给添加按钮注册点击事件，对输入的内容做非空判断，发送请求
请求成功后，对文本框内容进行清空
重新渲染列表

3.删除功能

注册点击事件，获取当前行的id
根据id发送删除请求
需要重新渲染

4.饼图渲染

初始化一个饼图 echarts.init(dom) mounted钩子中渲染
根据数据试试更新饼图 echarts.setOptions({…})

4.实现

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 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>
  </head>
  <body>
    <div id="app">
      <div class="contain">
        <!-- 左侧列表 -->
        <div class="list-box">

          <!-- 添加资产 -->
          <form class="my-form">
            <input v-model.trim="name" type="text" class="form-control" placeholder="消费名称" />
            <input v-model.number="price" type="text" class="form-control" placeholder="消费价格" />
            <button @click="add" 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 v-for="(item, index) in list" :key="item.id">
                <td>{{ index + 1 }}</td>
                <td>{{ item.name }}</td>
                <td :class="{ red: item.price > 500 }">{{ item.price.toFixed(2) }}</td>
                <td><a @click="del(item.id)" href="javascript:;">删除</a></td>
              </tr>
            </tbody>
            <tfoot>
              <tr>
                <td colspan="4">消费总计： {{ totalPrice.toFixed(2) }}</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. 基本渲染
       *    (1) 立刻发送请求获取数据 created
       *    (2) 拿到数据，存到data的响应式数据中
       *    (3) 结合数据，进行渲染 v-for
       *    (4) 消费统计 => 计算属性
       * 2. 添加功能
       *    (1) 收集表单数据 v-model
       *    (2) 给添加按钮注册点击事件，发送添加请求
       *    (3) 需要重新渲染
       * 3. 删除功能
       *    (1) 注册点击事件，传参传 id
       *    (2) 根据 id 发送删除请求
       *    (3) 需要重新渲染
       * 4. 饼图渲染
       *    (1) 初始化一个饼图 echarts.init(dom)  mounted钩子实现
       *    (2) 根据数据实时更新饼图 echarts.setOption({ ... })
       */
      const app = new Vue({
        el: '#app',
        data: {
          list: [],
          name: '',
          price: ''
        },
        computed: {
          totalPrice () {
            return this.list.reduce((sum, item) => sum + item.price, 0)
          }
        },
        created () {
          // const res = await axios.get('https://applet-base-api-t.itheima.net/bill', {
          //   params: {
          //     creator: '小黑'
          //   }
          // })
          // this.list = res.data.data

          this.getList()
        },
        mounted () {
          this.myChart = echarts.init(document.querySelector('#main'))
          this.myChart.setOption({
            // 大标题
            title: {
              text: '消费账单列表',
              left: 'center'
            },
            // 提示框
            tooltip: {
              trigger: 'item'
            },
            // 图例
            legend: {
              orient: 'vertical',
              left: 'left'
            },
            // 数据项
            series: [
              {
                name: '消费账单',
                type: 'pie',
                radius: '50%', // 半径
                data: [
                  // { value: 1048, name: '球鞋' },
                  // { value: 735, name: '防晒霜' }
                ],
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          })
        },

        methods: {
          async getList () {
            const res = await axios.get('https://applet-base-api-t.itheima.net/bill', {
              params: {
                creator: '小黑'
              }
            })
            this.list = res.data.data

            // 更新图表
            this.myChart.setOption({
              // 数据项
              series: [
                {
                  // data: [
                  //   { value: 1048, name: '球鞋' },
                  //   { value: 735, name: '防晒霜' }
                  // ]
                  data: this.list.map(item => ({ value: item.price, name: item.name}))
                }
              ]
            })
          },
          async add () {
            if (!this.name) {
              alert('请输入消费名称')
              return
            }
            if (typeof this.price !== 'number') {
              alert('请输入正确的消费价格')
              return
            }

            // 发送添加请求
            const res = await axios.post('https://applet-base-api-t.itheima.net/bill', {
              creator: '小黑',
              name: this.name,
              price: this.price
            })
            // 重新渲染一次
            this.getList()

            this.name = ''
            this.price = ''
          },
          async del (id) {
            // 根据 id 发送删除请求
            const res = await axios.delete(`https://applet-base-api-t.itheima.net/bill/${id}`)
            // 重新渲染
            this.getList()
          }
        }
      })
    </script>
  </body>
</html>

六、工程化开发和脚手架

1.开发Vue的两种方式

核心包传统开发模式：基于html / css / js 文件，直接引入核心包，开发 Vue。
工程化开发模式：基于构建工具（例如：webpack）的环境中开发Vue。

工程化开发模式优点：

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

工程化开发模式问题：

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

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

2.脚手架Vue CLI

基本介绍：

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

可以帮助我们快速创建一个开发Vue项目的标准化基础架子。【集成了webpack配置】

好处：

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

使用步骤：

全局安装（只需安装一次即可） yarn global add @vue/cli 或者 npm i @vue/cli -g
查看vue/cli版本： vue --version
创建项目架子：vue create project-name(项目名不能使用中文)
启动项目：yarn serve 或者 npm run serve(命令不固定，找package.json)

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

1.项目目录介绍

在这里插入图片描述

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

main.js 入口文件
App.vue App根组件
index.html 模板文件

2.运行流程

在这里插入图片描述

八、组件化开发

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

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

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

比如：下面这个页面，可以把所有的代码都写在一个页面中，但是这样显得代码比较混乱，难易维护。咱们可以按模块进行组件划分
在这里插入图片描述

九、根组件 App.vue

1.根组件介绍

整个应用最上层的组件，包裹所有普通小组件
在这里插入图片描述

2.组件是由三部分构成

三部分构成
- template：结构（有且只能一个根元素）
- script: js逻辑
- style：样式 (可支持less，需要装包)
让组件支持less

（1） style标签，lang=“less” 开启less功能

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

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

1.特点：

只能在注册的组件内使用

2.步骤：

创建.vue文件（三个组成部分）
在使用的组件内先导入再注册，最后使用

3.使用方式：

当成html标签使用即可 <组件名></组件名>

4.注意：

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

5.语法：

在这里插入图片描述

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

export default {  // 局部注册
  components: {
   '组件名': 组件对象,
    HmHeader:HmHeaer,
    HmHeader
  }
}

十一、普通组件的注册使用-全局注册

1.特点：

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

2.步骤

创建.vue组件（三个组成部分）
main.js中进行全局注册

3.使用方式

当成HTML标签直接使用

<组件名></组件名>

4.注意

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

5.语法

Vue.component(‘组件名’, 组件对象)

例：

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

Day04

一、scoped解决样式冲突

1.默认情况：

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

全局样式: 默认组件中的样式会作用到全局，任何一个组件中都会受到此样式的影响
局部样式: 可以给组件加上scoped 属性,可以让样式只作用于当前组件

2.代码演示

<style scoped>
.topic {
  padding-top: 60px;
  margin-bottom: 40px;
}
</style>`

二、data必须是一个函数

1、data为什么要写成函数

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

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

三、组件通信

1.什么是组件通信？

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

组件的数据是独立的，无法直接访问其他组件的数据。
想使用其他组件的数据，就需要组件通信

2.组件关系分类

父子关系
非父子关系

3.父向子通信

1、在父中，先在子组件标签上，以添加属性的方式传值

< Son :title=“myTitle”>< Son>

2、在子中，使用props来接受数据

props:[‘title’]

在这里插入图片描述

4.子向父通信

1、在子中，使用$emit触发事件，给父组件发送消息通知

this.$emit('changeTitle,‘传智教育’)

2、在父中，监听 $emit触发的事件，并供处理函数

< Son :title=“msg” @changeTitle=“handlechange”>< /Son>
handlechange (title) {this.msg = title}

在这里插入图片描述

四、props校验

1.语法

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

2.代码实例

<script>
export default {
  // 完整写法（类型、默认值、非空、自定义校验）
  props: {
    w: {
      type: Number,
      //required: true,
      default: 0,
      validator(val) {
        // console.log(val)
        if (val >= 100 || val <= 0) {
          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 的数据更新，会向下流动，影响子组件。这个数据流动是单向的（谁的数据谁负责）

六、非父子通信-event bus 事件总线

1.作用

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

2.步骤

创建一个都能访问的事件总线（空Vue实例）

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

A组件（接受方），监听Bus的 $on事件

created () {
  Bus.$on('sendMsg', (msg) => {
    this.msg = msg
  })
}

B组件（发送方），触发Bus的$emit事件
```
Bus.$emit('sendMsg', '这是一个消息')
```

在这里插入图片描述

七、非父子通信-provide&inject

1.作用

跨层级共享数据

2.场景

在这里插入图片描述

3.语法

父组件 provide提供数据

export default {
  provide () {
    return {
       // 普通类型【非响应式,父修改数据后，子孙无法修改】
       color: this.color, 
       // 复杂类型【响应式，父修改数据后，子孙也修改】
       userInfo: this.userInfo, 
    }
  }
}

2.子/孙组件 inject获取数据

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

4.注意

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

八、表单类组件封装

实现子组件和父组件数据的双向绑定（实现App.vue中的selectId和子组件选中的数据进行双向绑定）
v-model是一个语法糖，其本质是( :value + @input）
在这里插入图片描述
其子组件中，必须使用value接收数据，input触发事件。（这是使用的父的第一句话，简化开发）

九、.sync修饰符

1.作用

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

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

2.场景

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

3.本质

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

在这里插入图片描述

十、ref和$refs

1.作用

利用ref 和 $refs 可以用于获取 dom 元素或组件实例

2.特点：

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

3.语法

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

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

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

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

4.注意

之前只用document.querySelect(‘.box’) 获取的是整个页面中的盒子，可能有同名的，导致不是该组件的这个

十一、异步更新 & $nextTick

1.需求

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

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

// 显示输入框
        this.isShowEdit = true  
        // 获取焦点
        this.$refs.inp.focus()

直接这样使用会报错，Vue 是异步更新DOM，即先处理所有的js然后再处理，这时会发现，框框出来了但是获取焦点时找不到。

2.解决方案

$nextTick：等 DOM更新后,才会触发执行此方法里的函数体

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

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

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

day05

一、自定义指令

1.指令与自定义指令

内置指令：v-html、v-if、v-bind、v-on… 这都是Vue给咱们内置的一些指令，可以直接使用
自定义指令：同时Vue也支持让开发者，自己注册一些指令。这些指令被称为自定义指令

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

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

全局注册

//在main.js中
Vue.directive('指令名', {
// inserted:指定元素，被插入到页面中时触发
  "inserted" (el) {
    // 可以对 el 标签，扩展额外功能
    el.focus()
  }
})

局部注册

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

使用指令

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

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

2.指令中的配置项

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

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

3.自定义指令-指令的值

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

语法：

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

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

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

directives: {
  color: {
    inserted (el, binding) {
      el.style.color = binding.value
    },
    update (el, binding) {
      el.style.color = binding.value
    }
  }
}

3.代码示例
在这里插入图片描述

4.自定义指令-v-loading指令的封装（完成加载显示案例）

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

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

1.分析

  1.本质 loading效果就是一个蒙层，盖在了盒子上
  
  2.数据请求中，开启loading状态，添加蒙层
  
  3.数据请求完毕，关闭loading状态，移除蒙层

2.实现

  1.准备一个 loading类，通过伪元素定位，设置宽高，实现蒙层
  
  2.开启关闭 loading状态（添加移除蒙层），本质只需要添加移除类即可
  
  3.结合自定义指令的语法进行封装复用

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

3.代码实现

<template>
  <div class="main">
    <div class="box">
      <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>

二、插槽

1.作用

让组件内部的一些结构支持 自定义（修改指定的位置，而不改变整体架构）
在这里插入图片描述
将需要多次显示的对话框,封装成一个组件

2.插槽的基本语法

组件内需要定制的结构部分，改用****占位
使用组件时, < MyDialog>< /MyDialog>标签内部, 传入结构替换slot
给插槽传入内容时，可以传入纯文本、html标签、组件

在这里插入图片描述

3.设置默认值

语法： 在< slot>标签内，放置内容，作为默认显示内容

4.设置多个slot （具名插槽）

语法：

多个slot使用 name 属性区分名字
template配合 v-slot:名字 来分发对应标签

注意：
v-slot:名字可以简写为： #名字
必须要用< template>包裹起来才能识别。

5.作用域插槽

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

使用步骤

给 slot 标签, 以添加属性的方式传值

<slot :id="item.id" msg="测试文本"></slot>

所有添加的属性, 都会被收集到一个对象中
```
{ id: 3, msg: '测试文本' }
```

在template中, 通过 #插槽名= "obj" 接收，默认插槽名为 default

<MyTable :list="list">
  <template #default="obj">
    <button @click="del(obj.id)">删除</button>
  </template>
</MyTable>

三、单页应用程序与多页面程

1.概念

单页应用程序：SPA【Single Page Application】是指所有的功能都在一个html页面上实现

单页应用网站：网易云音乐 https://music.163.com/

多页应用网站：京东 https://jd.com/

2.单页应用 VS 多页面应用

在这里插入图片描述
单页应用类网站：系统类网站 / 内部网站 / 文档类网站 / 移动端站点

多页应用类网站：公司官网 / 电商类网站

四、路由

1.概念

路径和组件的映射关系

单页面应用程序，之所以开发效率高，性能好，用户体验好
最大的原因就是：页面按需更新
在这里插入图片描述

2. VueRouter的基本使用

概念：Vue 官方的一个路由插件，是一个第三方包（修改地址栏路径时，切换显示匹配的组件）
官网：https://v3.router.vuejs.org/zh/

使用：（5+2）：

5个基本配置

下载 VueRouter 模块到当前工程，版本3.6.5
```
yarn add vue-router@3.6.5
```
main.js中引入VueRouter
```
import VueRouter from 'vue-router'
```
安装注册
```
Vue.use(VueRouter)
```
创建路由对象
```
const router = new VueRouter()
```

注入，将路由对象注入到new Vue实例中，建立关联

new Vue({
  render: h => h(App),
  router:router
}).$mount('#app')

当我们配置完以上5步之后就可以看到浏览器地址栏中的路由变成了 /#/的形式。表示项目的路由已经被Vue-Router管理了
在这里插入图片描述

2个核心步骤
1.创建需要的组件 (views目录)，配置路由规则
main.js

import Find from "@/views/Find";
import Friend from "@/views/friend";
import My from "@/views/My";
Vue.use(VueRouter)
const router = new VueRouter({
  routes:[
      {path:'/find',component:Find},
      {path:'/my',component:My},			//path:地址栏路径
      {path:'/friend',component:Friend},	//component:组件文件
  ]
})

new Vue({
  render: h => h(App),
  router:router
}).$mount('#app')

2.配置导航，配置路由出口(路径匹配的组件显示的位置)
App.vue

<div class="footer_wrap">
  <a href="#/find">发现音乐</a>
  <a href="#/my">我的音乐</a>
  <a href="#/friend">朋友</a>
</div>
<div class="top">
  <router-view></router-view>
</div>

3.组件的存放目录问题

分类：
.vue文件分为2类，都是 .vue文件（本质无区别）

页面组件（配置路由规则时使用的组件）
复用组件（多个组件中都使用到的组件）

目录：
分类开来的目的就是为了 更易维护

src/views文件夹

页面组件 - 页面展示 - 配合路由用
src/components文件夹

复用组件 - 展示数据 - 常用于复用

4.mian.js的分离

创建一个需要分离的.js （index.js）
将其引入到mian.js中（main.js）

day06

一、声明式导航

1.导航高亮处理

vue-router 提供了一个全局组件 router-link (取代 a 标签)

能跳转，配置 to 属性指定路径(必须) 。本质还是 a 标签，to 无需 #
能高亮，默认就会提供高亮类名，可以直接设置高亮样式

语法： < router-link to=“path的值”>发现音乐< /router-link>

<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>

.footer_wrap a.router-link-active{
  background-color: darkkhaki;
}

2.两个属性

其中他会给高亮标签给两个class属性：
在这里插入图片描述

router-link-exact-active ：精准的路由地址（例如：/find/one）他可以匹配/find/one
router-link-active ：模糊的路由地址（例如：/find）他可以匹配/find/a /find/b …,所以可以用于多级路由

3.自定义类名（了解即可）

我们可以在创建路由对象时，额外配置两个配置项即可。 linkActiveClass和linkExactActiveClass

const router = new VueRouter({
  routes: [...],
  linkActiveClass: "类名1",
  linkExactActiveClass: "类名2"
})

4.参数传递

我们可以通过两种方式，在跳转的时候把所需要的参数传到其他页面中

查询参数传参
动态路由传参

查询参数传参：

传参语法： < router-link to=“/path?参数名=值”>< /router-link>
接受参数： $router.query.参数名

动态路由传参（必须要传递参数）：

想要其不传参也能访问，在冒号参数后面添加‘？’ 例如： /:help?

传参语法：

1、配置动态路由

	const router = new VueRouter({
  routes: [
    ...,
    { 
      path: '/search/:words', 
      component: Search 
    }
  ]
})

2、配置导航链接：to=“/path/参数值”

接受参数：$route.params.参数名（params后面的参数名要和动态路由配置的参数保持一致）

查询参数传参 VS 动态路由传参

查询参数传参 (比较适合传多个参数)
1. 跳转：to=“/path?参数名=值&参数名2=值”
2. 获取：$route.query.参数名
动态路由传参 (优雅简洁，传单个参数比较方便)
1. 配置动态路由：path: “/path/:参数名”
2. 跳转：to=“/path/参数值”
3. 获取：$route.params.参数名
注意：动态路由也可以传多个参数，但一般只传一个

5.重定向

语法：

{ path: 匹配路径, redirect: 重定向到的路径 },
比如：
{ path:'/' ,redirect:'/home' }

解决的问题：
网页打开时， url 默认是 / 路径，未匹配到组件时，会出现空白，我们需要通过重定向，让其强制跳转 /home 路径

6.设置404

语法：

import NotFind from '@/views/NotFind'

const router = new VueRouter({
  routes: [
    ...
    { path: '*', component: NotFind } //最后一个
  ]
})

注意： 配置在其他路由规则的最后面

7.路由模式设置

路由的路径看起来不自然, 有#，能否切成真正路径形式?

hash路由(默认) 例如: http://localhost:8080/#/home
history路由(常用) 例如: http://localhost:8080/home (以后上线需要服务器端支持，开发环境webpack给规避掉了history模式的问题)

语法：

const router = new VueRouter({
    mode:'histroy', //默认是hash
    routes:[]
})

8.编程式导航-两种路由跳转方式

path 路径跳转传参（query传参）

//简单写法
this.$router.push('/路径?参数名1=参数值1&参数2=参数值2')

//完整写法
this.$router.push({
  path: '/路由路径',
  query:{
  	参数名1:'参数值1',
  	参数名2:'参数值2'
  }
})

接收参数：
$router.query.参数名

path路径跳转传参（动态路由传参）

//简单写法
this.$router.push('/路径/参数值')
//完整写法
this.$router.push({
  path: '/路径/参数值'
})

接收参数：
$route.params.参数名

name 命名路由跳转传参 (query传参)

1、路由规则，必须配置name配置项

{ name: '路由名', path: '/path/xxx', component: XXX },

2、通过name来进行跳转

this.$router.push({
  name: '路由名',
  query: {
    参数名1: '参数值1',
    参数名2: '参数值2'
  }
})

接收参数：
$route.query.参数名

name 命名路由跳转传参 (动态路由传参)

this.$router.push({
  name: '路由名字',
  params: {
    参数名: '参数值',
  }
})

接收参数：
$route.params.参数名

总结：

path和name的选择：路径少选path,路径多选name
query和动态路由：参数多选query，一个参数选择动态路由

9.两级路由配置

routes: [
        {
            path: '/',
            component: Layout,
            children: [ {
                    path: '/article',
                    component: Article
                }]
        },
        {
            path: '/detail',
            component: ArticleDetail
        }
    ]

两级路由在一级路由下，添加children属性，然后配置其路由

二、组件缓存

1、问题

从面经列表点到详情页，又点返回，数据重新加载了 → 希望回到原来的位置
在这里插入图片描述

2、原因

当路由被跳转后，原来所看到的组件就被销毁了（会执行组件内的beforeDestroy和destroyed生命周期钩子），
重新返回后组件又被重新创建了（会执行组件内的beforeCreate,created,beforeMount,Mounted生命周期钩子），所以数据被加载了

3、解决方案

利用keep-alive把原来的组件给缓存下来

keep-alive

keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件中。
优点：

在组件切换过程中把切换出去的组件保留在内存中，防止重复渲染DOM，

减少加载时间及性能消耗，提高用户体验性。
使用：
App.vue

<template>
  <div class="h5-wrapper">
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

问题：

缓存了所有被切换的组件

解决问题：
keep-alive的三个属性：

① include ：组件名数组，只有匹配的组件会被缓存

② exclude ：组件名数组，任何匹配的组件都不会被缓存

③ max ：最多可以缓存多少组件实例

App.vue

<template>
  <div class="h5-wrapper">
    <keep-alive :include="['LayoutPage']">
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

额外的两个生命周期钩子

keep-alive的使用会触发两个生命周期函数

activated 当组件被激活（使用）的时候触发 → 进入这个页面的时候触发
deactivated 当组件不被使用的时候触发 → 离开这个页面的时候触发

组件缓存后就不会执行组件的created, mounted, destroyed 等钩子了

所以其提供了actived 和deactived钩子，帮我们实现业务需求。

三、VueCli 自定义创建项目

安装脚手架 (已安装)

npm i @vue/cli -g

创建项目

vue create hm-exp-mobile

所有选项如下：
1、选择自定义创建

2、自定义组件如下

3、选择vue2

4、使用hash模式

5、使用less

6、使用标准规范

7、保存重启项目

8、分配单独的文件夹

9、不保存此次预览

四、ESlint代码规范

ESLint:是一个代码检查工具，用来检查你的代码是否符合指定的规则(你和你的团队可以自行约定一套规则)。在创建项目时，我们使用的是 JavaScript Standard Style 代码风格的规则。

规范说明：

字符串使用单引号 – 需要转义的地方除外
无分号
函数名后加空格 function name (arg) { ... }
…

手动修复

在这里插入图片描述
打开 ESLint 规则表，使用页面搜索（Ctrl + F）这个代码，查找对该规则的一个释义。

eslint插件来实现自动修正

在WS或其他编译软件中下载即可

WS如下：
在这里插入图片描述

VS如下：
在这里插入图片描述
settings.json 参考

{
    "window.zoomLevel": 2,
    "workbench.iconTheme": "vscode-icons",
    "editor.tabSize": 2,
    "emmet.triggerExpansionOnTab": true,
    // 当保存的时候，eslint自动帮我们修复错误
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    },
    // 保存代码，不自动格式化
    "editor.formatOnSave": false
}

day07

一、Vuex

1.概述

Vuex 是一个 Vue 的状态管理工具，状态就是数据。
大白话：Vuex 是一个插件，可以帮我们管理 Vue 通用的数据 (多组件共享的数据)。例如：购物车数据个人信息数

2.创建

安装 vuex

yarn add vuex@3 或者 npm i vuex@3

新建 store/index.js专门存放 vuex
创建仓库 store/index.js

// 导入 vue
import Vue from 'vue'
// 导入 vuex
import Vuex from 'vuex'
// vuex也是vue的插件, 需要use一下, 进行插件的安装初始化
Vue.use(Vuex)

// 创建仓库 store
const store = new Vuex.Store()

// 导出仓库
export default store

在 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')

3.基本使用【核心概念 - state】

提供数据

State提供唯一的公共数据源，所有共享的数据都要统一放到Store中的State中存储。
打开项目中的store.js文件，在state对象中可以添加我们要共享的数据。

// 创建仓库 store
const store = new Vuex.Store({
  // state 状态, 即数据, 类似于vue组件中的data,
  // 区别：
  // 1.data 是组件自己的数据, 
  // 2.state 中的数据整个vue项目的组件都能访问到
  state: {
    count: 101
  }
})

访问Vuex中的数据（三种）

模板中使用
组件中可以使用 $store 获取到vuex中的store对象实例，可通过state属性属性获取count，如下

<h1>state的数据 - {{ $store.state.count }}</h1>

组件逻辑中使用
将state属性定义在计算属性中 https://vuex.vuejs.org/zh/guide/state.html

<h1>state的数据 - {{ count }}</h1>
// 把state中数据，定义在组件内的计算属性中
  computed: {
    count () {
      return this.$store.state.count
    }
  }

js文件中使用

//main.js

import store from "@/store"

console.log(store.state.count)

(*)辅助函数-mapState

1.第一步：导入mapState (mapState是vuex中的一个函数)

import { mapState } from 'vuex'

2.第二步：利用展开运算符将导出的状态映射给计算属性

  computed: {
    ...mapState(['count'])
  }

 <div> state的数据：{{ count }}</div>

4.Vuex数据修改【核心概念 - mutations】

Vuex的单项数据流

明确 vuex 同样遵循单向数据流，组件中不能直接修改仓库的数据，但可能代码不报错，
所以需要开启严格模式（注意：严格模式是消耗内存的，上线时需要关闭）
在这里插入图片描述

mutations的使用（修改数据）

可以传参或不传。传参只能有一个，所以可以传集合，对象，数组啥的

1.定义mutations

const store  = new Vuex.Store({
  state: {
    count: 0
  },
  // 定义mutations（用于修改数据）
  mutations: {
     
  }
})

2.格式说明
mutations是一个对象，对象中存放修改state的方法

mutations: {
    // 方法里参数 第一个参数是当前store的state属性
    // payload 载荷 运输参数 调用mutaiions的时候 可以传递参数 传递载荷
    addCount (state,n) {
      state.count += n
    }
  },

3.组件中提交 mutations

this.$store.commit('addCount',参数)

() 练习-Vuex中的值和组件中的input双向绑定

在这里插入图片描述

代码实现：
App.vue

<input :value="count" @input="handleInput" type="text">

export default {
  methods: {
    handleInput (e) {
      // 1. 实时获取输入框的值
      const num = +e.target.value
      // 2. 提交mutation，调用mutation函数
      this.$store.commit('changeCount', num)
    }
  }
}

store/index.js

mutations: { 
   changeCount (state, newCount) {
      state.count = newCount
   }
},

(*)辅助函数- mapMutations

mapMutations和mapState很像，它把位于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中

5.异步修改Vuex的数据【核心概念 - actions】

1.actions

1.定义actions

mutations: {
  changeCount (state, newCount) {
    state.count = newCount
  }
},
actions: {
  setAsyncCount (context, num) {
    // 一秒后, 给一个数, 去修改 num
    setTimeout(() => {
      context.commit('changeCount', num)
    }, 1000)
  }
},

2.组件中通过dispatch调用

setAsyncCount () {
  this.$store.dispatch('setAsyncCount', 666)
}

(*)辅助函数 -mapActions

Son2.vue

import { mapActions } from 'vuex'
methods: {
   ...mapActions(['changeCountAction'])
}

//mapActions映射的代码 本质上是以下代码的写法
//methods: {
//  changeCountAction (n) {
//    this.$store.dispatch('changeCountAction', n)
//  },
//}

直接通过 this.方法就可以调用

<button @click="changeCountAction(200)">+异步</button>

6.筛选vuex数据【核心概念 - getters】

除了state之外，有时我们还需要从state中筛选出符合条件的一些数据，这些数据是依赖state的，此时会用到getters

1.getters

定义getters

  getters: {
    // getters函数的第一个参数是 state
    // 必须要有返回值
     filterList:  state =>  state.list.filter(item => item > 5)
  }

使用getters

<div>{{ $store.getters.filterList }}</div>

(*)辅助函数 - mapGetters

computed: {
    ...mapGetters(['filterList'])
}

 <div>{{ filterList }}</div>

7.总结

在这里插入图片描述

二、module【核心概念】

1.创建

创建模块js

const state = {
  userInfo: {
    name: 'zs',
    age: 18
  }
}

const mutations = {}

const actions = {}

const getters = {}

export default {
  state,
  mutations,
  actions,
  getters
}

在主js（index.js）中配置注册

import user from './modules/user'
import setting from './modules/setting'

const store = new Vuex.Store({
    modules:{
        user
    }
})

2.获取

在模块的js代码如下：

const state = {
  userInfo: {
    name: 'zs',
    age: 18
  },
  myMsg: '我的数据'
}

const mutations = {}
const actions = {}
const getters = {}

export default {
  namespaced: true,		# 开启命名空间
  state,
  mutations,
  actions,
  getters
}

获取模块内的state数据

1、直接通过模块名访问 $store.state.模块名.xxx

$store.state.user.userInfo.name

2、通过 mapState 映射：

...mapState('user', ['userInfo']),
...mapState('setting', ['theme', 'desc']),

获取模块内的getters数据

1、直接通过模块名访问 $store.getters['模块名/xxx ']

<div>{{ $store.getters['user/UpperCaseName'] }}</div>

2、通过 mapGetters 映射

computed:{
  ...mapGetters('user', ['UpperCaseName'])
}

获取模块内的mutations方法

const mutations = {
  setUser (state, newUserInfo) {
    state.userInfo = newUserInfo
  }
}

1、直接通过 store 调用 $store.commit('模块名/xxx ', 额外参数)

<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')
    }
  }
}

2、通过 mapMutations 映射

<button @click="setUser({ name: 'xiaoli', age: 80 })">更新个人信息</button>
<button @click="setTheme('skyblue')">更新主题</button>

methods:{
// 分模块的映射
...mapMutations('setting', ['setTheme']),
...mapMutations('user', ['setUser']),
}

获取模块内的actions方法

js:

const actions = {
  setUserSecond (context, newUserInfo) {
    // 将异步在action中进行封装
    setTimeout(() => {
      // 调用mutation   context上下文，默认提交的就是自己模块的action和mutation
      context.commit('setUser', newUserInfo)
    }, 1000)
  }
}

1、直接通过 store 调用 $store.dispatch('模块名/xxx ', 额外参数)

<button @click="updateUser2">一秒后更新信息</button>

methods:{
    updateUser2 () {
      // 调用action dispatch
      this.$store.dispatch('user/setUserSecond', {
        name: 'xiaohong',
        age: 28
      })
    },
}

2、通过 mapActions 映射

<button @click="setUserSecond({ name: 'xiaoli', age: 80 })">一秒后更新信息</button>

methods:{
  ...mapActions('user', ['setUserSecond'])
}

HANG_WORLD

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue2笔记

本文来自黑马vue2+vue3教学视频
复制链接

扫一扫

专栏目录