vue框架

天希oyyy

已于 2024-09-03 22:15:39 修改

阅读量665

点赞数 22

文章标签： vue.js 前端 javascript

于 2024-07-11 13:21:43 首次发布

本文链接：https://blog.csdn.net/m0_75079074/article/details/139219779

版权

介绍(以下语法为vue2语法)

对于大多公司的前端开发中，大多数都是使用vue框架，目前vue框架有vue2，vue3版本，vue是一套构建用户界面的渐进式框架。渐进式就是循序渐进，通过以后的需要对症学习。vue官网：Vue.js - 渐进式 JavaScript 框架 | Vue.js

Vue的两种开发方式：

Vue核心包开发

场景：局部模块改造
Vue核心包&Vue插件&工程化

场景：整站开发

Vue开发者工具安装

通过谷歌应用商店安装（国外网站）
极简插件下载（推荐）极简插件官网_Chrome插件下载_Chrome浏览器应用商店

安装步骤：

安装之后,运行vue文件代码在谷歌浏览器中右击检查，会多一个Vue的调试面板，

vue使用

（1）,下载或引入vue.js文件包，

通过cdn的jsdelivr官网(vue CDN by jsDelivr - A CDN for npm and GitHubA free, fast, and reliable CDN for vue. The progressive JavaScript framework for building modern web UI.https://www.jsdelivr.com/package/npm/vue)引入vue.js文件，可以在官网Vue.js - 渐进式 JavaScript 框架 | Vue.js说明文档中查看。

2,通过cdn的cdnjs官网vue - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developersSimple, Fast & Composable MVVM for building interactive interfaces - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each month, powered by Cloudflare. We make it faster and easier to load library files on your websites.https://cdnjs.com/libraries/vue链接访问vue.js在线地址,

3,可以通过下载文件包，为自己使用。

(2),创建Vue实例 new Vue(),

指定配置项，渲染数据

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

插值表达式 {{}}

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue的使用步骤</title>
  </head>
  <body>
    <!-- 1.准备容器，一会vue 就会把数据展示到这里 -->
    <div id="app">
      <p>{{uname}}</p>
      <p>{{uname.toUpperCase()}}</p>
      <p>{{age}}</p>
      <p>{{friend.sex}}</p>
    </div>

    <!-- 2.导入vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- 3.创建vue 实例对象 -->
    <script>
      let app = new Vue({
        el: "#app", //你要将数据展示到哪个元素标签里
        data: {
          //data是数据的意思，这里指要展示的数据
          uname: "hxm",
          age: 20,
          friend: {
            sex: "nan",
          },
        },
      });
      //所有的data里面的数据会自动加入到实例对象里面去
    </script>
  </body>
</html>

2.语法

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

<h3>{{title}}<h3>

<p>{{nickName.toUpperCase()}}</p>

<p>{{age >= 18 ? '成年':'未成年'}}</p>

<p>{{obj.name}}</p>

<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.插值表达式的注意事项

{{}}里面，支持的是表达式，而非语句if...for
使用的数据要存在（data）
不能在标签属性里面使用

响应式特性

1.什么是响应式？

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

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

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

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

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

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）

内容渲染指令

内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容。常用的内容渲染指令有如下2 个：

v-text（类似innerText）

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

v-html（类似 innerHTML）

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 1.准备一个容器，准备展示Vue的数据指令 -->
    <div class="app">
      <p>{{str}}</p>
      <!-- v-html相当于innerHTML能够识别标签 -->
      <p v-html="str">这里原来有内容，将会被覆盖</p>
    </div>
    <!-- 引入vue.js文件 -->
    <script src="./vue.js"></script>
    <script>
      const app = new Vue({
        el: ".app",
        data: {
          str: "这是一个<strong>优秀</strong>的boy",
        },
      });
    </script>
  </body>
</html>

条件渲染指令

条件判断指令，用来辅助开发者按需控制 DOM 的显示与隐藏。条件渲染指令有如下两个，分别是：

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

<!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>
      .box {
        width: 200px;
        height: 100px;
        line-height: 100px;
        margin: 10px;
        border: 3px solid #000;
        text-align: center;
        border-radius: 5px;
        box-shadow: 2px 2px 2px #ccc;
      }
    </style>
  </head>

  <body>
    <!-- 
    v-show底层原理：切换 css 的 display: none 来控制显示隐藏
    v-if  底层原理：根据 判断条件 控制元素的 创建 和 移除（条件渲染）
  -->

    <div id="app">
      <!-- v-show只是通过样式隐藏起来了 -->
      <div v-show="flag" class="box">我是v-show控制的盒子</div>
      <!-- v-if 是直接把div删除掉了 -->
      <div v-if="flag" class="box">我是v-if控制的盒子</div>
    </div>

    <script src="./vue.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          flag: false,
        },
      });
    </script>
  </body>
</html>

3,v-else 和 v-else-if

作用：辅助v-if进行判断渲染
语法：v-else v-else-if="表达式"
需要紧接着v-if使用

<!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>
</head>

<body>

  <div id="app">
    <p v-if="sex === 1">性别：♂ 男</p>
    <p v-else>性别：♀ 女</p>

    <hr>

    <p v-if="score >= 90">成绩评定A：奖励电脑一台</p>
    <p v-else-if="score >= 80">成绩评定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: {
        sex: 1,
        score: 65
      }
    })
  </script>

</body>

</html>

事件绑定指令

语法：

1.v-on：事件名=“内联语句”

2.v-on: 事件名=“methods中的函数名”

简写：@事件名

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

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

1,内联语句

<!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>
  </head>

  <body>
    <!-- v-on 
  作用注册事件=添加监听+提供处理逻辑
  语法：
  1.v-on：事件名=“内联语句”
  2.v-on: 事件名=“methods中的函数名”
  简写：@事件名
  -->
    <div id="app">
      <button v-on:click="count--">-</button>
      <span>{{count}}</span>
      <button @click="count++">+</button>
    </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>
  </body>
</html>

2，事件处理函数

注意：

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

<!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>
  </head>

  <body>
    <div id="app">
      <button v-on:click="fn">切换显示隐藏</button>
      <h1 v-show="flag">oyyyhxm</h1>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
      const app4 = new Vue({
        el: "#app",
        data: {
          flag: true,
        },
        methods: {
          fn() {
            //this  永远表示Vue实例对象
            this.flag = !this.flag;
          },
        },
      });
    </script>
  </body>
</html>

3.给事件处理函数传参

如果不传递任何参数，则方法无需加小括号；methods方法中可以直接使用 e 当做事件对象

如果传递了参数，则实参 $event 表示事件对象，固定用法。

<!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>
      .box {
        border: 3px solid #000000;
        border-radius: 10px;
        padding: 20px;
        margin: 20px;
        width: 210px;
      }

      h3 {
        margin: 10px 0 20px 0;
      }

      p {
        margin: 20px;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <div class="box">
        <h3>小黑自动售货机</h3>
        <button @click="fn">可乐5元</button>
        <button @click="fn">咖啡10元</button>
        <button @click="fn">牛奶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,
        },
        method: {
          fn() {},
        },
      });
    </script>
  </body>
</html>

属性绑定指令

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

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

则可以这样设置属性值：

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

循环渲染指令

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

item 是数组中的每一项
index 是每一项的索引，不需要可以省略
arr 是被遍历的数组

<!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>
</head>

<body>

  <div id="app">
    <h3>小黑水果店</h3>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        list: ['西瓜', '苹果', '鸭梨', '榴莲']
      }
    })
  </script>
</body>

</html>

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

//遍历对象
<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中的key

语法： key="唯一值"

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

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

注意：

key 的值只能是字符串或数字类型
key 的值必须具有唯一性
推荐使用 id 作为 key（唯一），不推荐使用 index 作为 key（会变化，不对应）

双向绑定指令

所谓双向绑定就是：

数据改变后，呈现的页面结果会更新
页面结果更新后，数据也会随之而变

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

语法：v-model="变量"

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

点击登录按钮获取表单中的内容
点击重置按钮清空表单中的内容

<!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>
</head>

<body>

  <div id="app">
    <!-- 
      v-model 可以让数据和视图，形成双向数据绑定
      (1) 数据变化，视图自动更新
      (2) 视图变化，数据自动更新
      可以快速[获取]或[设置]表单元素的内容
     -->
    账户：<input type="text"> <br><br>
    密码：<input type="password"> <br><br>
    <button>登录</button>
    <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: '',
        password: ''
      },
    })
  </script>
</body>

</html>

Vue中指令修饰符

1.什么是指令修饰符？

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

2.按键修饰符

@keyup.enter —>当点击enter键的时候才触发

<!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>
  </head>

  <body>
    <div id="app">
      <h3>监听键盘事件</h3>
      <!-- 
      1.按键修饰符只能用于键盘事件，keyup和keydown
      2.语法  @keyup.enter=""  表示按回车键才会执行操作
      3.语法  @keyup.esc=""    表示按esc键才会执行操作
      4.语法  @keyup.49        表示按keyCode值为49的键才会执行操作。这里的49表示键盘的keyCode值
     -->
      <input type="text" @keyup="fn" />
      <br />
      <input type="text" @keyup.enter="fn" />
      <br />
      <input type="text" @keyup.esc="fn" />
      <br />
      <input type="text" @keyup.49="fn" />
    </div>
    <script src="./js/vue-2.7.14.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        methods: {
          fn() {
            console.log("执行的次数");
          },
        },
      });
    </script>
  </body>
</html>

3.v-model修饰符

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

4.事件修饰符

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

<!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>
      .father {
        width: 200px;
        height: 200px;
        background-color: pink;
        margin-top: 20px;
      }

      .son {
        width: 100px;
        height: 100px;
        background-color: skyblue;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <h3>@事件名.stop → 阻止冒泡</h3>
      <div class="father">
        <div class="son" @click.stop>儿子</div>
      </div>
      <h3>@事件名.prevent → 阻止默认行为</h3>
      <a href="http://www.baidu.com" @click.prevent>阻止默认行为</a>
    </div>
    <script src="./js/vue-2.7.14.js"></script>
    <script>
    const app = new Vue({
      el: '#app',
      data: {
        username: '',
        age: '',
      },
      methods: {
        fatherFn () {
          alert('父亲盒子被点击了')
        },
        sonFn (e) {
          // e.stopPropagation()
          alert('儿子盒子被点击了')
        }
      }
    })
  </script>
  </body>
</html>

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

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

案例

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

      }
    })
  </script>

进度条案例

 <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">
        <span>50%</span>
      </div>
    </div>
    <button>设置25%</button>
    <button>设置50%</button>
    <button>设置75%</button>
    <button>设置100%</button>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {

      }
    })
  </script>

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

1.讲解内容：

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

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

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

<!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>
</head>

<body>

  <div id="app">
    <!-- 
      v-model 可以让数据和视图，形成双向数据绑定
      (1) 数据变化，视图自动更新
      (2) 视图变化，数据自动更新
      可以快速[获取] 或 [设置]表单元素的内容
     -->
    姓名：<input type="text" v-model="uname"/><br />

    性别：
    <!-- 相当于checked默认选中 与value值相同就能默认选中-->
    <input type="radio" name="sex" value="男" v-model="gender"/>男生
    <input type="radio" name="sex" value="女" v-model="gender"/>女生<br />

    爱好：
    <input type="checkbox" name="hobby" value="吃" v-model="arr"/>吃饭
    <input type="checkbox" name="hobby" value="睡" v-model="arr"/>睡觉
    <input type="checkbox" name="hobby" value="玩" v-model="arr"/>打豆豆<br />

    籍贯：
    <select  v-model="address">
      <option value="北京">北京市</option>
      <option value="上海" >上海市</option>
      <option value="天津" >天津市</option>
    </select><br />

    记住我：<input type="checkbox" v-model="rem"/>
  </div>
  </div>
  <script src="./js/vue-2.7.14.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data:{
        uname:'hxm',
        gender:'男',
        address:'天津',
        rem:true,
        arr:['吃','玩']
      }
    })
  </script>
</body>

</html>

computed计算属性

1.概念

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

2.语法

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

3.注意

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

<!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>
      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>
  </head>

  <body>
    <div id="app">
      <h3>小黑的礼物清单🛒<span>{{total}}</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>礼物总数：{{test()}} 个</p>
    </div>
    <script src="./js/vue-2.7.14.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 },
          ],
        },
        methods: {
          test() {
            return this.list.reduce((item, index) => {
              return item + index.num;
            }, 0);
          },
        },
        computed: {
          total() {
            console.log("计算属性执行方法只会执行一次");
            let t = 0;
            this.list.forEach((item) => {
              t += item.num;
            });
            return t;
          },
        },
      });
    </script>
  </body>
</html>

computed计算属性 VS methods方法

1.computed计算属性

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

语法：

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

2.methods计算属性

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

语法：

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

3.计算属性的优势

缓存特性（提升性能）

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

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

4.总结

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

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

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

计算属性的完整写法

注意：

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

<!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>
      span {
        display: inline-block;
        width: 50px;
        text-align: right;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <span>姓：</span><input type="text" :value="xing" /><br /><br />
      <span>名：</span><input type="text" v-model="ming" /><br /><br />
      <span>姓名：</span><input type="text" v-model.lazy="sum" /><br />
    </div>
    <script src="./js/vue-2.7.14.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          xing: "尼古拉斯",
          ming: "赵四",
        },
        computed: {
          sum: {
            get() {
              //当计算结果的时候，get就会执行
              return this.xing + "~" + this.ming;
            },
            set(val) {
              //当计算结果修改的时候，set就会执行
              console.log(val);
            },
          },
        },
      });
    </script>
  </body>
</html>

watch侦听器（监视器）

1.作用：

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

2.语法：

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

<!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>
      * {
        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;
      }

      .query {
        display: inline-block;
        margin: 10px;
      }

      select {
        width: 100px;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <!-- 条件选择框 -->
      <div class="query">
        <span>源语言：</span>
        <select v-model="obj.from">
          <option value="en">英语</option>
          <option value="zh">简体中文</option>
          <option value="jp">日语</option>
          <option value="fra">法语</option>
        </select>
      </div>
      <div class="query">
        <span>目标语言：</span>
        <select v-model="obj.to">
          <option value="zh">简体中文</option>
          <option value="en">英语</option>
          <option value="jp">日语</option>
          <option value="fra">法语</option>
        </select>
      </div>

      <!-- 翻译框 -->
      <div class="box">
        <div class="input-wrap">
          <!-- 双向绑定 -->
          <textarea v-model="obj.q"></textarea>
          <span><i>⌨️</i>文档翻译</span>
        </div>
        <div class="output-wrap">
          <div class="transbox">{{result}}</div>
        </div>
      </div>
    </div>
    <script src="./js/vue-2.7.14.js"></script>
    <script src="./js/axios.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          words: "",
          obj: {
            q: "", //把输入框双向绑定
            from: "en", //原语言双向绑定
            to: "zh", //目标语言双向绑定
          },
          result: "", //返回的结果
        },
        watch: {
          // 监听的数据1(修改后的值，原来的值){},
          // 监听的数据2(修改后的值，原来的值){}
          // words(newval, oldval) {
          //   console.log(newval);
          // },
          // "obj.good"(newval, oldval) {
          //   console.log(newval);
          // },

          //因为我们要监听对象的三个属性，所以直接监听对象就好了
          //但是监听对象不能通过上面的写法，需要完整写法才可以
          // 数据:{
          //   handler(变化后的值，变化前的值){}
          //   ,
          //   deep:true,//加入该配置，表示深度侦听，当对象的任意属性改变后，都可以侦听到。
          //   immediate:true//立即侦听，（页面刷新，马上执行一次handler函数）
          // }
          obj: {
            async handler(newVal) {
              // console.log(newVal);
              //下面进行翻译操作

              // 接口地址：http://www.itcbc.com:3006/api/translate
              // 请求方式：get
              // 请求参数：
              // （1）q：   需要被翻译的文本（必传）
              // （2）from：源语言（可选），默认-英语
              // （3）to：  需要被翻译成的语言（可选）默认值-中文
              // -----------------------------------------------
              const { data: res } = await axios({
                url: "http://www.itcbc.com:3006/api/translate",
                method: "GET",
                params: newVal,
              });
              console.log(res);
              //通过服务器返回的数据获得
              this.result = res.trans_result[0].dst;
            },
            deep: true,
            immediate: true,
          },
        },
      });
    </script>
  </body>
</html>

watch侦听器-完整写法

1.语法

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

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

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

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

Vue生命周期

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

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

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

2.挂载阶段：渲染模板

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

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

工程化开发和脚手架(大多数公司使用这个方式开发项目)

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

使用步骤：

你想要在哪个文件目录下安装这个包，就在那个目录中打开cmd终端，然后输入下面安装包命令。

每创建一个新项目就要重新安装这个工具包。

全局安装（只需安装一次即可） yarn global add @vue/cli 或者 npm i @vue/cli -g（脚手架工具-第三方包）,通过官网Vue CLI可以查阅文档——Installation | Vue CLI

查看vue/cli版本： vue --version
创建项目架子：vue create project-name(项目名不能使用中文)，

选择项目的依赖，一般选择最后一个,如果是选择 Default Vue2，不用选择需要的组件

还有选择需要安装的组件

然后选择Y ，例如

启动项目：yarn serve 或者 npm run serve(命令不固定，找package.json)
通过下面命令，可以更新vue CLI 版本

项目目录- 创建项目后，会有以下文件，

项目运行流程

组件化开发

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

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

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

根组件 App.vue

1.根组件介绍

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

组件是由三部分构成

语法高亮插件（下面这个插件只能在vue2中使用）

三部分构成
- 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

小驼峰命名法，appHead.vue

中横线：app-dds.vue

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)

二、scoped解决样式冲突

1.默认情况：

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

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

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

2.代码演示

子组件MyTest.vue

<template>
  <div>
    <h3>测试组件</h3>
    <p>test组件</p>
    <button @click="count--">-</button>
    <span>{{ count }}</span>
    <button @click="count++">+</button>
  </div>
</template>

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

<style>
div {
  background-color: pink;
}
p {
  color: red;
}
</style>

父组件App.vue

<template>
  <div>
    <h2>App组件</h2>
    <p>App组件</p>
    <hr />
    <my-test></my-test>
    <hr />
    <my-test></my-test>
    <hr />
    <my-test></my-test>
  </div>
</template>

<script>
import MyTest from "./components/MyTest";
export default {
  components: {
    MyTest,
  },
};
</script>

<style scoped>
p {
  color: blue;
}
</style>

如果父组件没有加scoped，则父组件的p标签为红色，被子组件覆盖了。如果当前组件加了scoped则会显示当前组件中所给的样式。

三、data必须是一个函数

1、data为什么要写成函数

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

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

四、组件通信

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

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

两种形式：父传子，子传父

1，父传子

通过自定义属性的方式，向子组件传递数据。

子组件通过props进行接收。

步骤：

给子组件以添加属性的方式传值
子组件内部通过props接收
模板中直接使用 props接收的值

2，子传父

子组件中通过$emit('自定义事件名',传的数据)向父组件传递数据。

父组件通过@自定义事件名="定义一个函数或者语句"

步骤：

$emit触发事件，给父组件发送消息通知
父组件监听$emit触发的事件
提供处理函数，在函数的性参中获取传过来的参数

代码实例：

父组件：

<template>
  <div>
    <h2>我是父组件 App组件</h2>
    <!-- 父传子语法：
          父：通过自定义属性的方式，向子组件传递数据
          <myTest 属性名="传递的数据"></myTest>
 -->

    <!-- 方法一 -->
    <!-- <my-test :id="goodsList[0].id" :name="goodsList[1].name" /> -->
    <!-- 方法二 -->
    <!-- <myTest :item="goodsList[0]"></myTest>
    <myTest :item="goodsList[1]"></myTest>
    <myTest :item="goodsList[2]"></myTest> -->
    <!-- 方法三 -->
    <myTest
      v-for="(item, index) in goodsList"
      :key="index"
      :item="item"
      @dfdf="dsds"
    ></myTest>
    <!-- @dfdf="dsds"@自定义事件名='方法' -->
    <!-- :item="item"item表示要传的数据名称 -->
  </div>
</template>

<script>
import myTest from "./components/myTest.vue";
export default {
  data() {
    return {
      goodsList: [
        { id: 1, name: "方便面", price: 5, info: "还可以" },
        { id: 2, name: "火腿肠", price: 2, info: "好吃" },
        { id: 3, name: "鸡蛋", price: 5, info: "绝了" },
      ],
    };
  },
  components: {
    myTest,
  },
  //子传父方法
  methods: {
    // 方法(接收传递过来的值){}
    dsds(val) {
      console.log(val); //查看值是否传过来
      let vow = this.goodsList.find((item) => item.id === val);
      vow.price--;
    },
  },
};
</script>

<style lang="less" scoped></style>

子组件：

<template>
  <div class="goods">
    <h2>我是子组件</h2>
    <h2>商品名称:{{ item.name }}</h2>
    <p>商品价格：{{ item.price }}</p>
    <p>商品描述：{{ item.info }}</p>
    <!-- 子传父 -->
    <button @click="$emit('dfdf', item.id)">减价</button>
    <!-- @click="$emit('自定义事件名',传的数据)" -->
  </div>
</template>

<script>
export default {
  //子组件，需要通过props 接收传递过来的数据
  props: ["item"], //与父组件传递过来的名称相同
};
</script>

<style lang="less" scoped>
.goods {
  margin: 10px;
  padding: 10px;
  border: 2px solid #999;
  border-radius: 5px;
}
</style>

注意：子组件传递的自定义事件名要与父组件的事件名相同，父组件的:item的item表示传递给子组件的数据名，要与子组件接收的名称一致。

五、什么是props

1.Props 定义

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

2.Props 作用

向子组件传递数据

3.特点

可以传递 任意数量 的props
可以传递 任意类型 的props

props校验

作用

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

语法:

类型校验
非空校验
默认值
自定义校验

父组件：

<template>
  <div id="app">
    <!-- 父传子就是给组件标签，添加属性 -->
    <Son age="age" :s="sum" :istrue="istrue" :say="say" :hihi="hihi"></Son>
  </div>
</template>

<script>
import Son from "./components/Son.vue";

export default {
  name: "App",
  components: {
    Son,
  },
  data() {
    return {
      sum: 30,
      istrue: true,
      list: ["2", "4", "5"],
      obj: {
        name: "hxm",
        age: 19,
      },
      say() {
        console.log(999);
      },
      hihi() {
        console.log(666);
      },
    };
  },
};
</script>

<style>
#app {
  font-family: Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

子组件：

<template>
  <div>
    <p>{{ age }}</p>
    <p>{{ sum }}</p>
  </div>
</template>

<script>
export default {
  name: "SonPage", //名称
  // props写成数组形式
  // props: ["age", "sum", "istrue", "say", "hihi"],
  // created() {
  //   //通过这个函数调用传递过来的函数
  //   this.say();
  //   this.hihi();
  // },
  //props 写成对象格式，可以对接收的变量进行校验
  //1，required：true   表示父组件必须传递这项数据
  //2，type：String|Number|Object|Array|Bootean|Function
  //2.1,允许多值属性写法  type:[String,Number]
  //3,default:''
  //默认值如果是对象或数组，要写成函数的格式，函数中返回对象或数组
  props: {
    // age: {/**在这里对接收的数据，进行校验 */},
    age: {
      required: true,
    },
    sum: {
      defalut: 19, //表示如果父组件没有传值过来，则sum值为19，
      type: Number,
    },
    obj: {
      defalut: () => {
        return {}; //对于默认值是数组或对象的情况，默认值要写一个函数，并且返回这个默认值，
      },
    },
    list: Array, //type的另外一种写法，表示只校验数组类型
  },
};
</script>

<style lang="less" scoped></style>

props校验完整写法

语法

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

代码实例

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

注意

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

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

props&data、单向数据流

共同点

都可以给组件提供数据

区别

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

单向数据流：

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

就是说只有在自己组件里面的数据才可以更改。

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

作用

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

步骤

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

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

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

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

3，B组件（发送方），触发Bus的$emit事件

Bus.$emit('sendMsg', '这是一个消息')

代码示例

EventBus.js

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

BaseA.vue(接受方)

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

<script>
import Bus from '../utils/EventBus'
export default {
  data() {
    return {
      msg: '',
    }
  },
}
</script>

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

BaseB.vue(发送方)

<template>
  <div class="base-b">
    <div>我是B组件（发布方）</div>
    <button>发送消息</button>
  </div>
</template>

<script>
import Bus from '../utils/EventBus'
export default {
}
</script>

<style scoped>
.base-b {
  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>

总结:

1.非父子组件传值借助什么？

2.什么是事件总线

3.发送方应该调用事件总线的哪个方法

4.接收方应该调用事件总线的哪个方法

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

非父子通信-provide&inject

作用

跨层级共享数据,定义一个组件数据，所有组件都可以使用这个数据

场景

语法

父组件 provide提供数据

export default {
  provide () {
    return {
       // 普通类型【非响应式】
       color: this.color, 
       // 复杂类型【响应式】
       userInfo: this.userInfo, 
    }
  }
}

子/孙组件 inject获取数据

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

案例：

父组件：

<template>
  <div>
    <Son></Son>
  </div>
</template>

<script>
// import { computed } from "vue";
import Son from "./components/Son.vue";
export default {
  //provide只支持从上层传递给下层
  provide: {
    //传递给后代组件的数据
    //如果传递的是对象，数据则是响应式的
    //传递的是其它数据，则是非响应式的
    //如果将非响应式的变为响应式的，需要引入组件computed
    user: { name: "hxm", age: "19" },
    // pho: computed("135"),
  },
  data() {
    return {};
  },
  components: {
    Son,
  },
};
</script>

<style lang="less" scoped></style>

子组件：

Son.vue

<template>
  <div>
    <h2>儿子组件---{{ user.name }}</h2>
    <hr />
    <GrandSon></GrandSon>
  </div>
</template>

<script>
import GrandSon from "./GrandSon.vue";
export default {
  name: "SonPage",
  components: {
    GrandSon,
  },
  //接收传递过来的值
  inject: ["user"],
};
</script>

<style lang="less" scoped></style>

grandSon.vue

<template>
  <div>
    <h3>孙子组件---{{ user.name }}</h3>
  </div>
</template>

<script>
export default {
  inject: ["user"],
};
</script>

<style lang="less" scoped></style>

注意

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>

2.作用：

提供数据的双向绑定

数据变，视图跟着变 :value
视图变，数据跟着变 @input

3.注意

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

4.代码示例

父组件：

<template>
  <div>
    <h3>需求1：不用v-model实现双向绑定</h3>
    <!-- <input type="text" v-model="username" /> -->
    <!-- 这里的：value和@input 是input标签特有的属性， -->
    <input type="text" :value="username" @input="changeValue" />
    <!-- v-model  相当于可以拆分成：value+@input -->
    <hr />

    <h3>需求2：实现输入框组件的v-model</h3>
    <!-- 这里的value是自定义属性 -->
    <!-- <MyInput :val="age" @input="changeAge"></MyInput> -->

    <!-- 这样就可以替换为v-model了 -->
    <MyInput v-model="age"></MyInput>
    <!-- <MyInput :value="age" @input="changeAge"></MyInput> -->
    <hr />

    <h3>需求3：实现下拉框组件的v-model</h3>
    <MySelect :value="address" @input="changeAddress"></MySelect>
    <!-- 
      总结：，v-model===：value+@input
      父传子，为了把数据传给子组件，设置表单元素的默认值
      子传父，为了把更改后表单里面的值，传递父组件，修改data数据
     -->
  </div>
</template>

<script>
import MyInput from "./components/MyInput.vue";
import MySelect from "./components/MySelect.vue";
export default {
  name: "App",
  data() {
    return {
      address: "广州",
      age: 19,
      username: "hxm",
    };
  },
  components: {
    MyInput,
    MySelect,
  },
  methods: {
    changeValue(e) {
      //将输入框的值赋值给username
      this.username = e.target.value;
    },
    changeAge(val) {
      //val为子组件传递的值
      this.age = val;
    },
    changeAddress(val) {
      this.address = val;
    },
  },
};
</script>

<style lang="less" scoped></style>

子组件：

MySelect.vue

<template>
  <select :value="value" @change="$emit('input', $event.target.value)">
    <option value="北京">北京市</option>
    <option value="上海">上海市</option>
    <option value="广州">广州市</option>
    <option value="深圳">深圳市</option>
  </select>
</template>

<script>
export default {
  name: "MySelect",
  props: ["value"],
};
</script>

<style lang="less" scoped></style>

MyInput.vue

<template>
  <input
    type="text"
    :value="value"
    @input="$emit('input', $event.target.value)"
  />
  <!-- :value="val" -->
</template>

<script>
export default {
  name: "MyInput",
  // props: ["val"],
  props: ["value"],
};
</script>

<style lang="less" scoped></style>

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

不同的表单元素， v-model在底层的处理机制是不一样的。比如给checkbox使用v-model
底层处理的是 checked属性和change事件。
不过咱们只需要掌握应用在文本框上的原理即可

v-model简化代码

1.目标：

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

2.如何简化：

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

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

3.代码示例

子组件

<select :value="value" @change="handleChange">...</select>
props: {
  value: String
},
methods: {
  handleChange (e) {
    this.$emit('input', e.target.value)
  }
}

父组件

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

.sync修饰符

1.作用

可以实现 子组件 与 父组件数据 的 双向绑定，简化代码
简单理解：子组件可以修改父组件传过来的props值

2.场景

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

3.本质

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

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>
    <button @click="isShow = false">关闭</button>
    <MyDialog :isd.sync="isShow"></MyDialog>
    <!-- 
      :属性.sync="变量" 相当于 :属性="变量"+@update:属性="xxx"
     -->
  </div>
</template>

<script>
import MyDialog from "./components/MyDialog.vue";
export default {
  name: "App",
  data() {
    return {
      isShow: false,
    };
  },
  components: {
    MyDialog,
  },
};
</script>

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

子组件

<template>
  <div class="dialog" v-show="isd">
    <div class="dialog-header">
      <h3>友情提示</h3>
      <span class="close" @click="close">✖️</span>
    </div>
    <div class="dialog-content">我是文本内容</div>
    <div class="dialog-footer">
      <button>取消</button>
      <button>确认</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: ["isd"],
  methods: {
    close() {
      this.$emit("update:isd", false);
    },
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.dialog {
  width: 470px;
  height: 230px;
  padding: 0 25px;
  background-color: #ffffff;
  margin: 40px;
  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>

6.总结

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

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

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') 获取的是整个页面中的盒子

5.代码示例

App.vue

<template>
  <div>
    <h2>App组件</h2>
    <p>这是App组件中的p标签</p>
    <hr />
    <MyTest ref="p"></MyTest>
    <hr />
    <MyForm ref="myForm"></MyForm>
    <!-- 
      如果在组件中则可以通过调用组件中的方法
      即找到子组件后，就可以调用子组件中的方法
     -->
    <button @click="$refs.myForm.resetForm()">重置</button>
  </div>
</template>

<script>
import MyTest from "./components/MyTest.vue";
import MyForm from "./components/MyForm.vue";
export default {
  data() {
    return {};
  },
  components: {
    MyTest,
    MyForm,
  },
};
</script>

<style lang="less" scoped></style>

子组件MyTest.vue

<template>
  <div>
    <h3>Test组件需求：找到下面的p标签，设置样式</h3>
    <p ref="p">这是Test组件中的p标签</p>
  </div>
</template>

<script>
export default {
  mounted() {
    //document.querySelector是再整个页面中找元素
    // document.querySelector("p").style.color = "red";
    //ref和refs则是再当前标签中找元素
    console.log(this.$refs); //获取元素后存到了refs这个对象里面
    this.$refs.p.style.color = "red";
    //如果有多个相同的元素，则最后一个元素生效。
    //循环出来之后，多个元素有相同的ref值，this.$refs.xxx找到全部的
  },
};
</script>

<style lang="less" scoped></style>

MyForm.vue

<template>
  <div>
    <h3>Form组件需求：点击按钮能够重置表单</h3>
    用户名：<input type="text" v-model="uname" /><br />
    手机号：<input type="text" v-model="phone" /><br />
  </div>
</template>

<script>
export default {
  data() {
    return {
      uname: "zhangsan",
      phone: "13266668888",
    };
  },
  methods: {
    resetForm() {
      this.uname = this.phone = "";
    },
  },
};
</script>

<style lang="less" scoped></style>

自定义指令

1.指令介绍

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

2.自定义指令

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

3.自定义指令语法

全局注册

//在main.js中
Vue.directive('指令名', {
  "inserted" (el) {
    // 可以对 el 标签，扩展额外功能
    el.focus()
  }
})

局部注册

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

使用指令

注意：在使用指令的时候，一定要先注册，再使用，否则会报错使用指令语法： v-指令名。如：<input type="text" v-focus/>

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

4.指令中的配置项介绍

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

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

注意：

//下面都是钩子函数，在一定的行为下触发

bind(elc,obj){},//只执行一次:DOM洁染之前执行，里面可以进行样式操作

inserted (ele,obj),//只执行一次:DOM這染之后执行，里面可以进行行为操作

update (ele,obj){},// 数据更新后执行

componentUpdated (ele,obj){},// 父了组件都更新后执行

unbind(ele,obj){},//指令解绑的时候执行

代码演示：

父组件

<template>
  <div class="box">
    <h3>需求1：让输入框立即获取焦点</h3>
    <div class="focus">
      <input type="text" v-focus />
    </div>
    <h3>需求2：Ajax请求数据，并设计loading指令</h3>
    <ul>
      <li class="news">
        <div class="left">
          <div class="title">5G渗透率持续提升，创新业务快速成长</div>
          <div class="info">
            <span>新京报</span>
            <span>2222-10-28 11:50:28</span>
          </div>
        </div>
        <div class="right">
          <img src="http://ajax-api.itheima.net/images/0.webp" alt="" />
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
// 安装 axios =>  npm i axios 或者 yarn add axios
// 安装如果报错，则加 --legacy-peer-deps 选项
// 接口地址：http://hmajax.itheima.net/api/news
// 请求方式：get
// 请求参数：无
export default {};
</script>

<style>
.box {
  width: 800px;
  min-height: 500px;
  position: relative;
}
.focus,
ul {
  border: 3px solid orange;
  border-radius: 5px;
  padding: 10px;
  margin: 10px;
}
.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>

全局组件

import Vue from "vue";
import App from "./App.vue";

Vue.config.productionTip = false;

//设置自定义 指令 v-指令名称
// 1. 全局注册指令
Vue.directive("focus", {
  // inserted 会在 指令所在的元素，被插入到页面中时触发
  inserted(ele, obj) {
    // ele 就是指令所绑定的元素
    console.log(ele);
    // obj表示指令的一些信息(比如：指令的值，obj.value)
    console.log(obj);
    ele.focus(); //让元素获取焦点
  },
});
/**
 * mainjs 中，全同指令语法:
Vue.directive(指令名称",{
  //下面都是钩子函数，在一定的行为下触发
  bind(elc,obj){},//只执行一次:DOM洁染之前执行，里面可以进行样式操作
  inserted (ele,obj),//只执行一次:DOM這染之后执行，里面可以进行行为操作
  update (ele,obj){},// 数据更新后执行
  componentUpdated (ele,obj){},// 父了组件都更新后执行
  unbind(ele,obj){},//指令解绑的时候执行
})
 */

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

自定义指令-v-loading指令的封装

1.场景

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

实现

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

案例：

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

// 接口地址：
// 请求方式：get
export default {
  data () {
    return {
      list: [],
      isLoading: false,
      isLoading2: false
    }
  },
  async created () {
    // 1. 发送请求获取数据
    const res = await axios.get('api网址')
    
    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>

vue-router(路由)

路由的概念

前端路由：Hash 地址与组件之间的对应关系。
页面效果：在浏览器中访问不同的 Hash 地址，会显示不同的组件

单页面应用

单页面应用程序（英文名：Single Page Application）简称 SPA，顾名思义，指的是一个 Web 网站中只有唯一的一个 HTML 页面，所有的功能与交互都在这唯一的一个页面内完成。

路由的基本使用

vue路由

vue路由（vue-router）是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用，能够轻松的管理 SPA 项目中组件的切换。

vue-route官网地址：https://v3.router.vuejs.org/zh/

vue路由的安装和基础配置

vue-router 是一个第三方模块，一个插件。需要安装与配置。

安装 vue-router 包

# vue2 项目，要指定版本安装
npm i vue-router@3.5.2
npm i vue-router //表示安装最新版本的插件

2，创建路由模块（src/router/index.js）

// 1. 导入所需模块
import Vue from 'vue'
import VueRouter from 'vue-router'

// 2. 调用 Vue.use() 函数，将 VueRouter 安装为 Vue 的插件
Vue.use(VueRouter)

// 3. 配置路由规则
const routes = []

// 4. 创建路由的实例对象
const router = new VueRouter({
    /*路由的配置*/
    routes
})

// 5. 导出路由的实例对象
export default router

注意：后续会自动配置路由，所以要将多余的代码删除，恢复到上面的代码一样。

3，创建并挂载路由模块（main.js）

import Vue from 'vue'
import App from './App.vue'

// 1. 导入路由模块
import router from '@/router'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  // 2. 挂载路由模块
  router
}).$mount('#app')

浏览器访问 localhost:8080 ，如果路径后自动添加了 /#/ ，则基本上配置成功。

当自定义创建项目的时候，就会自动配置插件。如下

1，安装脚手架vue cli。全局安装（只需安装一次即可） yarn global add @vue/cli 或者 npm i @vue/cli -g（脚手架工具-第三方包）,通过官网Vue CLI可以查阅文档——Installation | Vue CLI

2.创建项目架子：vue create project-name(项目名不能使用中文)，创建后按上下键选择最下面的自定义选择插件：

然后按空格选择需要的插件，回车选择支持vue的版本。

之后会问是否选择历史的路由，这里我选择no。然后选择css的插件，

回车后选择包的类型，这里我选择JSON格式。再回车后填写名称，后自动安装。

之后在安装的文件夹package.json中可以查看你安装插件的版本，

案例：

src/views 文件夹准备了若干组件，

findMusic---发现音乐
myMusic---我的音乐
guangZhu---关注

需求：点击App组件中的三个超链接，在下面的空白处，展示对应的组件。

按照以下步骤实现：

配置路由规则（router/index.js中）
设置路由出口（<router-view />）（在哪里展示组件，在哪里放它）
设置超链接（<router-link to="/findMusic">发现音乐</router-link>）

App.vue组件

<template>
  <div>
    <div class="footer_wrap">
      <!-- router-link超链接 -->
      <router-link to="/findMusic">发现音乐</router-link>
      <router-link to="/myMusic">我的音乐</router-link>
      <router-link to="/guangZhu">关注</router-link>
    </div>
    <div class="top">
      <!-- 组件变化过程
      首先点击router-link超链接，跳转到配置路由规则那里，
      然后匹配路由地址是否相同，相同则显示组件，
      最后<router-view></router-view>在哪里就是引用了组件
       -->
      <!-- 路由出口 → 匹配的组件所展示的位置 -->
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style>
body {
  margin: 0;
  padding: 0;
}
.footer_wrap {
  position: relative;
  left: 0;
  top: 0;
  display: flex;
  width: 100%;
  text-align: center;
  background-color: #333;
  color: #ccc;
}
.footer_wrap a {
  flex: 1;
  text-decoration: none;
  padding: 20px 0;
  line-height: 20px;
  background-color: #333;
  color: #ccc;
  border: 1px solid black;
}
.footer_wrap a:hover {
  background-color: #555;
}
</style>

src/router/index.js中

import Vue from "vue";
import VueRouter from "vue-router";
//2.调用Vue.use() 函数，将VueRouter安装为Vue的插件
Vue.use(VueRouter); // VueRouter插件初始化
// @表示src路径
import findMusic from "@/views/findMusic.vue";
import myMusic from "@/views/myMusic.vue";
import guangZhu from "@/views/guangZhu.vue";
//3.配置路由规则
const routes = [
  //直接写到这个数组中的路由规则，级别最大。叫做一级路由
  //一级路由 【只能】 展示在 App.vue 中，所以 <router-view /> 只能放到 App.vue 中
  // {path:'想要显示到网址上的地址',component:需要跳转的路由组件}
  { path: "/findMusic",component: findMusic,},
  { path: "./myMusic", component: myMusic },
  { path: "./guangZhu",component: guangZhu,
  },
];
// 创建了一个路由对象
const router = new VueRouter({
  // routes 路由规则们
  // route  一条路由规则 { path: 路径, component: 组件 }
  routes,
});
//5.导出路由的案例对象
export default router;

组件的变化过程：点击超链接 --> 地址栏改变 --> 匹配路由规则地址 --> 在出口处展示对应组件.

嵌套路由

组件怎么嵌套，路由规则（index.js里面）就怎么嵌套（谁是谁的孩子，组件有父子关系，规则也有相同的父子关系）
遵循在哪里展示组件，就在哪里设置出口（<router-view />）

案例：

在src/views中添加三个组件

tuiJain.vue---推荐
paiHangban.vue---排行榜
geShou.vue---歌手

需求：

在发现音乐中点击三个链接跳转到对应组件中，

findMusic.vue中

<template>
  <div>
    <div>
      <p>发现音乐</p>
      <p>发现音乐</p>
      <p>发现音乐</p>
      <p>发现音乐</p>
    </div>
    <div class="link">
      <router-link to="/findMusic/tuiJian">推荐</router-link>
      <router-link to="/findMusic/PaiHangban">排行榜</router-link>
      <router-link to="/findMusic/geShou">歌手</router-link>
    </div>
    <div class="content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: "FindMusic",
};
</script>

<style></style>

router/index.js中

import Vue from "vue";
import VueRouter from "vue-router";
//2.调用Vue.use() 函数，将VueRouter安装为Vue的插件
Vue.use(VueRouter); // VueRouter插件初始化
// @表示src路径
import findMusic from "@/views/findMusic.vue";
import myMusic from "@/views/myMusic.vue";
import guangZhu from "@/views/guangZhu.vue";
//引入二级路由
import tuiJian from "@/views/tuiJian.vue";
import geShou from "@/views/geShou.vue";
import paiHangban from "@/views/paiHangban.vue";
//3.配置路由规则
const routes = [
  //直接写到这个数组中的路由规则，级别最大。叫做一级路由
  //一级路由 【只能】 展示在 App.vue 中，所以 <router-view /> 只能放到 App.vue 中
  // {path:'想要显示到网址上的地址',component:需要跳转的路由组件}
  {
    path: "/findMusic",
    component: findMusic,
    children: [
      //二级路由的path，可以不写/
      //二级路由的访问地址会和一级地址拼接
      //如：访问tuijian地址是  /findMusic/tuijian
      {
        path: "tuiJian",
        component: tuiJian,
      },
      { path: "paiHangban", component: paiHangban },
      { path: "geShou", component: geShou },
    ],
  },
  { path: "./myMusic", component: myMusic },
  {
    path: "./guangZhu",
    component: guangZhu,
  },
];
// 创建了一个路由对象
const router = new VueRouter({
  // routes 路由规则们
  // route  一条路由规则 { path: 路径, component: 组件 }
  routes,
});
//5.导出路由的案例对象
export default router;

路由传参

两种传参方式：查询参数传参和动态路由传参

查询参数传参：超链接挂好合适的参数；跳转后，组件中使用 $route.query.参数名 获取值

动态路由传参：

超链接挂好合适的参数
路由规则改为 { path: '/xxx/:id', compo... } 或者 { path: '/xxx/:id?', compo... }
跳转后，组件中使用 $route.params.id 获取值

<template>
  <div>
    <!-- 排行榜 -->
    <h2>排行榜</h2>
    <div class="contains">
      <div class="left">
        <ul>
          <li v-for="item in list" :key="item.id">
            <!-- //第一步 -->
            <router-link
              :to="`/discover/toplist?id=${item.id}&name=${item.name}`"
            >
              {{ item.name }}
            </router-link>
          </li>
        </ul>
      </div>
      <!-- 第三步 -->
      <div class="content" v-show="$route.query.name">
        当前查看的是<span>{{ $route.query.name }}</span
        >的歌曲
      </div>
    </div>
  </div>
</template>

index.js里面

// 1. 导入所需模块
import Vue from "vue";
import VueRouter from "vue-router";

// 2. 调用 Vue.use() 函数，将 VueRouter 安装为 Vue 的插件
Vue.use(VueRouter);

const routes = [
  { path: "/", redirect: "/discover" }, //重定向
  {
    path: "/discover",

    component: () => import("@/views/DisCover"),
    children: [
      {
        name: "default",
        path: "default",
        component: () => import("@/views/Recommend"),
      },
      {
        name: "toplist",
        path: "toplist",
        component: () => import("@/views/TopList"),
      },
      //第二步
      {
        name: "artlist",
        path: "artlist/:id?",
        component: () => import("@/views/ArtList"),
      },
    ],
  },
  { path: "/mymusic", component: () => import("@/views/MyMusic") },
  { path: "/follow", component: () => import("@/views/Follow") },
  { path: "*", component: () => import("@/views/NotFound") }, //404配置
];

// 3. 创建路由的实例对象
const router = new VueRouter({
  // mode: "history", //修改为历史模式
  routes,
  // linkActiveClass:'aa',//表示修改模糊匹配的类名
  // linkExactActiveClass:'b'，//表示修改精确匹配的类名
});

// 4. 导出路由的实例对象
export default router;

传参方式	地址栏	路由规则	组件中获取参数值
查询参数	/xx/xx?id=2	`path: /xx/xx`	$route.query.id
动态路由	/xx/xx/2	`path: /xx/xx/:id?`	$route.params.id

重定向

使用场景：页面hash地址是 xx 的情况，你希望跳转到 yy 地址。

比如：页面打开后，hash地址是 / ，我希望跳转到 /discover/tuijian

例如在index.js 中添加{ path: '/', redirect: '/discover/tuijian' }

历史模式

路由模式有两种：hash模式（默认）和历史模式

hash模式 --- 地址栏有 # 号
历史模式 --- 地址栏没有 # 号

如需使用历史模式，在 router/index.js 中进行配置：

// 4. 创建路由的实例对象
const router = new VueRouter({
    /*路由的配置*/
    routes,
    mode: 'history' // 改为历史模式
})

404处理

场景：当访问一个不存在的地址时，页面一片空白。而我们希望提示用户没有这个页面。

解决办法：加一条一级路由规则即可。

{ path: '*', component: () => import('@/views/NotFound.vue') }

链接高亮（排它）

为什么超链接，不用 a 标签，而用 router-link 标签？

使用 router-link 也会解析为 a 标签
会给当前访问的超链接，自动加两个类名
- router-link-exact-active --- 精确匹配类名
- router-link-active --- 模糊匹配类名

通过给两个类添加样式，实现导航链接的高亮效果

编程式导航

通过调用API方式实现导航的方式，叫做编程式导航

location.href = 'xxxxx' // 使用API方法跳转页面
history.go(-1) // 使用API方法后退

在vue-router中，也有类似的功能。

this.$router.方法名()

this.$router.back() ---- 后退
this.$router.forward() ---- 前进
this.$router.go(n) ---- 前进或后退  go(1)前进一次   go(-1)后退一次

this.$router.push() ---- 跳转到指定的一个地址，并添加一条历史记录
this.$router.replace() ---- 跳转到指定的一个地址，只替换当前地址，并不会增加历史记录

$router.push() 跳转到指定 hash 地址，并增加一条历史记录

// 写法一：对象格式，用 path 进行跳转
this.$router.push({
	  path: '完整路由地址',
      query: {
        参数: '值',
        参数: '值'    // query参数会拼接成  /xxxxx?参数=值&参数=值
      },
      // params: {
      //   参数: '值',
      //   参数: '值'
      // }, // 有问题，不用。参数不能拼接到url后面
})

// 写法二：对象格式，用 name 进行跳转
this.$router.push({
	  name: '路由的name值',
      query: {
        参数: '值',
        参数: '值'       // /xxxxx?参数=值&参数=值
      },
      params: {
        参数: '值',
        参数: '值'
      }, // 参数会拼到url后面    /xxxxx/3/绿皮书
})

// 写法三：直接写字符串
this.$router.push('完整路由地址')
this.$router.push('/sport?id=4&name=英格兰对法国')
this.$router.push('/movie/3/绿皮书')

$nextTick

使用场景：

如果想要在修改数据后立即得到更新后的DOM结构，可以使用this.$nextTick()
在created生命周期中进行DOM操作

语法：

//在methods方法中写入
this.$nextTick(()=>{
    //数据更新后，下次DOM更新后，执行这个函数
    //函数体
})

即当数据更新，等DOM也更新后，才会执行此方法里的函数体。

插槽

基本语法：

//父组件，使用对话框组件
<my-dialog>
      <p>写入想写的内容</p>
</my-dialog>

//子组件(对话框组件)
 <template>
      <div class="dialog">
        <h2>温馨提示</h2>
        <!-- 对话框的内容，不应该写死 -->
        <!-- 可以用slot标签占位 -->
        <slot>默认值</slot>
        <button>确定</button>
      </div>
    </template>

最终结果为

 <template>
      <div class="dialog">
        <h2>温馨提示</h2>
        <!-- 对话框的内容，不应该写死 -->
        <!-- 可以用slot标签占位 -->
        <slot><p>写入想写的内容</p></slot>
        <button>确定</button>
      </div>
    </template>

总结：子组件：使用<slot></slot>标签占位。表示这里要放一些内容，相当于在这里挖了一个坑位，准备放内容；父组件：使用子组件的时候，在标签中间，为插槽（前面的坑位），提供要展示的内容

具名插槽

案例，将三条语句 <h3>温馨提示</h3>；<p>你确定要删除吗？</p>；<button>确定</button>展现到子组件中对应的位置

例如

//父组件
<template>
  <div>
    <MyDialog>
      <!-- 为插槽提供需要展示的结构 -->
      <!-- 法一 v-slot:相当于#-->
      <!-- <template #title>
        <h3>温馨提示</h3>
      </template>

      <template #default>
        <p>你确定要删除吗？</p>
      </template>

      <template v-slot:btn>
        <button>确定{{ sex }}</button>
      </template> -->
      <!-- 法二 -->
      <template v-slot:title>
        <h3>温馨提示</h3>
      </template>
      <template v-slot:default>
        <p>你确定要删除吗？</p>
      </template>
      <template v-solt:btn>
        <button>确定</button>
      </template>
    </MyDialog>

    <!-- <MyDialog>
      <p>你确定要退出吗？</p>
    </MyDialog> -->
  </div>
</template>

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

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

//子组件
<template>
  <div class="dialog">
    <div class="dialog-header">
      <!-- 标题也不能写死 -->
      <!--具名插槽slot标签中加name-->
      <slot name="title"></slot>
      <span class="close">✖️</span>
    </div>
    <div class="dialog-content">
      <!-- 内容区，内容不固定，所以不能写死，这时用 <slot></slot>占位 -->
      <!-- 没有name属性的插槽，其实也有名字，叫做 default -->
      <slot ></slot>
    </div>
    <div class="dialog-footer">
      <!-- 按钮是什么，也不能写死 -->
      <slot name="btn" ></slot>
    </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;
  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>

作用：可以将标签变得灵活，输入想要的内容。在封装组件的时候，将可变的结构设计为插槽（<slot></slot>）

作用域插槽

场景：有些时候，子组件在定义插槽的时候，需要向使用者（父组件）传递一些数据，这样的插槽叫做作用域插槽。

父组件接收并使用数据:为了接收数据，只能加一个<template>;obj数据，只能在当前<template>里面用，是具有使用范围的，所以叫做作用域插槽。

例如

子组件

<template>
  <div class="dialog">
    <div class="dialog-header">
      <!-- 标题也不能写死 -->
      <slot name="title"></slot>
      <span class="close">✖️</span>
    </div>
    <div class="dialog-content">
      <!-- 内容区，内容不固定，所以不能写死，这时用 <slot></slot>占位 -->
      <!-- 没有name属性的插槽，其实也有名字，叫做 default -->
      <slot username="张三" age="20"></slot>
    </div>
    <div class="dialog-footer">
      <!-- 按钮是什么，也不能写死 -->
      <slot name="btn" sex="男"></slot>
    </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;
  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>
      <!-- 为插槽提供需要展示的结构 -->
      <!-- 法一 -->
      <template #title>
        <h3>温馨提示</h3>
      </template>

      <template #default="obj">
        <p>你确定要删除吗？{{ obj }}</p>
      </template>
      <!--
       解构赋值
          <template v-slot:btn="{ let {sex}=obj }">
            <button>确定{{ sex }}</button>
          </template> 
      -->
      <template v-slot:btn="{ sex }">
        <button>确定{{ sex }}</button>
      </template> 
     
  </div>
</template>

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

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

解析过程

父组件接收数据时，可以直接解构： #default="{ username, age }"

obj为自定义属性，接收username和age相当于接收了一个对象

解构后，使用使用 {{ username }} 和 {{ age }}

提示：传递的属性不要叫 name，name是插槽的名字。

具体使用场景：

需求：封装一个表格组件，用于展示列表数据。

表格的最后一列，放什么按钮不确定，可能是删除、详情、编辑等等，所以设计为插槽。
为了完成删除，需要将一行数据或 id 传递给父组件，所以用作用域插槽。

父组件

<template>
  <div>
    <MyTable :data="list">
      <!-- 下面一行是老版本的 语法 -->
      <!-- <template slot-scope="{ id }">父组件接收 id，并完成删除 -->
      <template v-slot:default="{ id }">
        <button @click="del(id)">移除</button>
      </template>
    </MyTable>

    <MyTable :data="list2">
      <button>编辑</button>
      <!-- <MyTest></MyTest> -->
    </MyTable>
  </div>
</template>

<script>
import MyTable from './components/MyTable.vue'
export default {
  methods: {
    del (id) {
      this.list = this.list.filter(item => item.id !== id)
    }
  },
  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
  }
}
</script>

子组件

<template>
  <table class="my-table">
    <thead>
      <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>年纪</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in data" :key="item.id">
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
        <td>
          <!-- 表格的最后一列，放什么按钮，不能写死 所以插槽将 id 传给父组件-->
          <slot :id="item.id" age="20"> 默认值 </slot>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  props: ['data']
}
</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>

总结：父组件，使用插槽时

没有被包裹在<template>中的内容都会被视为默认插槽的内容
使用插槽时，v-slot:abc可以简写为 #abc
接收作用域插槽的值：<template #abc="对象"></template>
给插槽传递内容的时候，可以将其他组件传进去。

<MyDialog>
	<!-- <p>你确定要删除吗？</p> -->
    <!-- 不传递一个html标签，传递一个组件也可以 -->
    <MyButton></MyButton>
</MyDialog>

这里的插槽（适用于vue2和vue3）。老版本的插槽参见这里https://gitee.com/link?target=https%3A%2F%2Fv2.cn.vuejs.org%2Fv2%2Fguide%2Fcomponents-slots.html。
v-slot 它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的 attribute