Vue基础Vue基础知识。vue指令、插槽、生命周期、修饰符、监听、组件通信、event bus、props。

1. Vue中的常用指令

概念：指令（Directives）是 Vue 提供的带有 v- 前缀 的特殊标签属性。
vue 中的指令按照不同的用途可以分为如下 6 大类：

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

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

1.1 内容渲染指令

内容渲染指令用来辅助开发者渲染 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标签的样式呈现出来。

1.2 条件渲染指令

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

v-show

1. 作用：控制元素显示隐藏
1. 语法： v-show = "表达式" 表达式值为 true 显示， false 隐藏
1. 原理：切换 display:none 控制显示隐藏
1. 场景：频繁切换显示隐藏的场景

v-if

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

v-else 和 v-else-if

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

1.3 事件绑定指令

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

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

内联语句

<div id="app">
    <button @click="count--">-</button>
    <span>{{ count }}</span>
    <button v-on:click="count++">+</button>
</div>
     <script>
       const app = new Vue({
         el: '#app',
         data: {
           count: 100
         }
       })
     </script>

事件处理函数注意：

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

给事件处理函数传参

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

1.4 属性绑定指令

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

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

则可以这样设置属性值：

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

1.5 列表渲染指令

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

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

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

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

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

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

2. key

语法： key="唯一值"
作用：给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用。
为什么加key： Vue 的默认行为会尝试原地修改元素（就地复用）
实例代码：

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

注意：

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

::: tip 当不希望元素复用，而是两个元素独立时，只需添加一个具有唯一值的keyattribute 即可。 :::

3. 表单输入绑定

所谓双向绑定就是：

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

作用： 给表单元素（input、radio、select）使用，双向绑定数据，可以快速获取或设置表单元素内容
v-model是一个语法糖。 ::: vue-demo 演示

<template>
   单个复选框，绑定到布尔值；
   多个复选框，绑定到同一个数组。<br>
   <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
   <label for="jack">Jack</label>
   <input type="checkbox" id="john" value="John" v-model="checkedNames">
   <label for="john">John</label>
   <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
   <label for="mike">Mike</label>
   <br>
   <span>Checked names: {{ checkedNames }}</span>
   <br><br>单选按钮
   <div id="example-4">
      <input type="radio" id="one" value="One" v-model="picked">
      <label for="one">One</label>
      <br>
      <input type="radio" id="two" value="Two" v-model="picked">
      <label for="two">Two</label>
      <br>
      <span>Picked: {{ picked }}</span>
   </div>
   <br>选择框-多选(绑定到一个数组)
      <div id="example-6">
         <select v-model="selected" multiple style="width: 50px;">
            <option>A</option>
            <option>B</option>
            <option>C</option>
         </select>
         <br>
         <span>Selected: {{ selected }}</span>
      </div>
   </div>
</template>
<script>
   export default {
      data() {
          return{
             checkedNames:[],
             picked:'',
             selected:[]
          }
      },
   }
</script>

:::

4. 修饰符

修饰符就是通过“.”指明一些指令后缀不同的后缀封装了不同的处理操作，从而简化代码。

4.1. 按键修饰符

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

4.2. v-model修饰符

v-model.trim —>去除首位空格。
v-model.number —>转为数字。
v-model.lazy —>取消数据同步，而转为在 change 事件之后进行同步。

::: vue-demo lazy演示

<template>
   <input type="text" v-model="text" placeholder="同步更新">
   text:{{text}}<br>
   <input type="text" v-model.lazy="textLazy" placeholder="lazy">
   text:{{textLazy}}
</template>
<script>
   export default {
      data() {
          return{
              text:'',
             textLazy:''
          }
      },
   }
</script>

:::

4.3. 事件修饰符

@事件名.stop —> 阻止冒泡
@事件名.prevent —>阻止默认行为（如a标签上添加事件）
@事件名.stop.prevent —>可以连用即阻止事件冒泡也阻止默认行为

5. v-bind

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

5.1 绑定HTML-Class

5.1.1. 对象语法

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

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

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

5.1.2.数组语法

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

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

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

在数组语法中也可以使用对象语法
可以绑定一个返回对象的计算属性 :::

::: vue-demo 对象与数组语法演示

<style>
    .colorActive {
      color: red;
    }
    .size-active {
      font-size: 30px;
    }
</style>
<template>
    <!--绑定对象-->
    <div ref="arrClass" style="padding-bottom: 5px" :class="[{ colorActive: textColor}, sizeClass]">对象语法</div>
   <button @click="color(textColor)">颜色</button> &nbsp;
   <button @click="sizeBtn()">颜色</button> &nbsp;
</template>
  <script>
    export default{
       data() {
          return{
             textColor: false,
             sizeClass:'size-active'
          }
       },
       methods:{
          color(v) {
              this.textColor = !v
          }, 
          sizeBtn() {
              const ref = this.$refs.arrClass
              if (ref.classList.contains('size-active')) {
                 console.log(1)
                         ref.classList.remove('size-active')
              }
             else 
                 ref.classList.add('size-active')
                  
          },
       }
    }
  </script>

:::

5.2 绑定内联样式

:::tip v-bind:style同样有对象语法与数组语法 :::

5.2.1. 多重值

可以为 style 绑定中的 property 提供一个包含多个值的数组，常用于提供多个带前缀的值，例如：

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

这样写只会渲染数组中最后一个被浏览器支持的值。如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex。

6. 生命周期钩子

Vue生命周期：就是一个Vue实例从创建到销毁的整个过程。
生命周期四个阶段：① 创建 ② 挂载 ③ 更新 ④ 销毁

创建阶段：创建响应式数据
挂载阶段：渲染模板
更新阶段：修改数据，更新视图
销毁阶段：销毁Vue实例

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

7. 计算属性和侦听器

7.1. 计算属性

7.1.1. 概念

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

::: tip

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

::: warning

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

7.1.2. computed VS methods

计算属性会对计算出来的结果缓存，再次使用直接读取缓存，
依赖项变化了，会自动重新计算并再次缓存
methods没有缓存特性

7.1.3. 计算属性的 setter

计算属性默认只有 getter，在需要修改时需要使用setter。

computed:{
   //  默认
   属性名(){
       //逻辑
      return 结果
   }
    // 完整
   属性名(){
      getter(){
         //逻辑
         return 结果
      }
      setter(){
        // 修改逻辑
      }
   }
}

7.1.4. computed VS watch

当有一些数据需要随着其它数据变动而变动时，很容易滥用 watch,通常更好的做法是使用计算属性。
::: vue-demo

<template>
   姓：<input type="text" v-model="firstName"> +
   名：<input type="text" v-model="lastName"> =
   <span>姓名：{{ fullName }}</span><br><br>
</template>
<script>
   export default {
      data() {
          return{
             firstName: '郑',
             lastName: '昊洋',
          }
      },
      computed: {
         fullName: {
            get () {
               return this.firstName + this.lastName
            },
            set (value) {
               this.firstName = value.slice(0, 1)
               this.lastName = value.slice(1)
            }
         }
      }
   }
</script>

::: 若用watch实现以上功能，则较为繁琐。

data: {
    firstName: '郑',
    lastName: '昊洋',
    fullName: '郑昊洋'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + val
    }
  }

7.2. 侦听器

计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

watch: {
    属性名(newValue) {
        // 防抖: 延迟执行 → 干啥事先等一等，延迟一会，一段时间内没有再次触发，才执行
        clearTimeout(this.timer)
        this.timer = setTimeout(async () => {
        const res = await axios({
            url: 'XXX', 
            params: {
            words: newValue
            }
        })
           this.result = res.data.data
              console.log(res.data.data)
        }, 300)
    }
}

watch监听在最初绑定时并不会立即执行，需要等到监听值发生变化时才执行监听计算。若需要在绑定阶段就执行监听，则需要使用 immediate: true。
如果我们需要监听一个对象obj，当obj的所有字段发生改变时就执行监听，需要对obj的多个字段都写一样的监听逻辑，非常繁琐，则可以使用 deep: true实现深度监听。 ::: vue-demo watch演示

<script>
   export default {
      data() {
         return {
            obj: {
               words: '你好',
               lang: 'english'
            },
            result: ''
         }
      },
      watch: {
         obj: {
            deep: true, // 深度监视obj所有字段
            immediate: true, // 立刻执行，一进入页面handler就立刻执行一次
            handler(newValue) {
               clearTimeout(this.timer)
               this.timer = setTimeout(async () => {
                  this.result = '将'+newValue.words+'翻译为'+newValue.lang
               }, 300)
            }
         }
      }
   }
</script>
<template>
   <!-- 条件选择框 -->
   <div class="query">
      <span>翻译成的语言：</span>
      <select v-model="obj.lang">
         <option value="english">英语</option>
         <option value="italy">意大利</option>
         <option value="german">德语</option>
      </select>
   </div>

   <!-- 翻译框 -->
   <div class="box">
      <div class="input-wrap">
         <textarea v-model="obj.words"></textarea>
         <span><i>⌨️</i>文档翻译</span>
      </div>
      <div class="output-wrap">
         <div class="transbox">{{result}}</div>
      </div>
   </div>
</template>
<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: 15px;
      border: 1px solid #dedede;
      outline: none;
      resize: none;
      padding: 10px;
   }

   textarea:hover {
      border: 1px solid #1589f5;
   }

   .transbox {
      width: 300px;
      height: 160px;
      background-color: #888888;
      padding: 10px;
      border: none;
      font-size: 15px;
   }

   .tip-box {
      width: 300px;
      height: 25px;
      line-height: 25px;
      display: flex;
   }

   .tip-box span {
      flex: 1;
      text-align: center;
   }

   .query span {
      font-size: 18px;
   }

   .input-wrap {
      position: relative;
   }

   .input-wrap span {
      position: absolute;
      right: 15px;
      bottom: 15px;
      font-size: 12px;
   }

   .input-wrap i {
      font-size: 20px;
      font-style: normal;
   }
</style>

:::

8. 组件通信

8.1 props

8.1.1 props类型

props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object,
  callback: Function,
  contactsPromise: Promise
}

::: tip

type 可用数组声明多种类型。
如果 type 仅为 null 而非使用数组语法，它将允许任何类型。
type 也可以是自定义的类或构造函数,Vue 将会通过 instanceof 来检查类型是否匹配。 :::

8.1.2 props校验

当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的警告。

props: {
    校验的属性名: {
    type: 类型, // Number String Boolean ...
    required: true, // 是否必填
    default: 默认值, // 简单默认值
    // 对象或数组默认值必须从一个工厂函数获取
    default: function () {
        return { message: 'hello' }
    }
    // 自定义类型校验函数
    // 在 3.4+ 中完整的 props 作为第二个参数传入
    validator (value,props) {
        // 自定义校验逻辑
        return 是否通过校验
        }
    }
}

::: warning

default和required一般不同时写（因为当时必填项时，肯定是有值的）
default后面如果是简单类型的值，可以直接写默认。如果是复杂类型的值，则需要以函数的形式return一个默认值。
prop 的校验是在组件实例被创建之前，所以实例的属性 (比如 data、computed 等) 将在 default 或 validator 函数中不可用。 :::

8.1.3 props父子通信

父组件通过 props 将数据传递给子组件。（静态与动态props查看此链接）
子组件利用 $emit 通知父组件修改更新。

在子组件中发送监听:

<button @click="$emit('increaseBy', 1)">加一</button>

在父组件监听事件:

<MyButton :value="count" @increase-by="(n) => count += n" />

::: tip

内联的箭头函数可以改为组件方法。
父组件中推荐使用 kebab-case 形式来监听。props同理。 :::

8.2 v-model

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

<input v-model="msg" type="text">

在代码背后，模板编译器会对 v-model 进行更冗长的等价展开。因此上面的代码其实等价于下面这段：

<input :value="msg" @input="msg = $event.target.value" type="text">

因此，若需要在父组件利用v-model实现父子组件通信，只需要将子组件prop为声明value，并触发 input事件。

<!--子组件-->
<select :value="value" @change="handleChange">...</select>
props: {
    value: String
},
methods: {
    handleChange (e) {
        this.$emit('input', e.target.value)
    }
}
<!--父组件-->
<BaseSelect v-model="selectId"></BaseSelect>

8.3 .sync修饰符

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

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

子组件

props: {
    visible: Boolean
},
methods:{
   closeBox() {
      this.$emit('update:visible',false)
   },
}

8.3 event bus

在某些场景中，需要非父子组件之间进行简易消息传递，则使用event bus。
以一个Vue场景为例，文件结构为： :::file-tree

src
- components
  - SendVue.vue
  - ReceiveVue.vue
- utils
  - EventBus.js
- App.vue :::

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

// EventBus.js
import Vue from 'vue'
const Bus  =  new Vue()
export default Bus   //导出

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

import Bus from '../utils/EventBus'
created () {
    Bus.$on('sendMsg', (msg) => {
    this.msg = msg
    })
}

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

import Bus from '../utils/EventBus'
sendMsgAFn() {
   Bus.$emit('sendAMsg', '今天天气不错，适合旅游')
},

8.4 provide&inject

父组件利用provide可为子/孙组件提供数据。

父组件 provide提供数据

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

子/孙组件 inject获取数据

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

::: tip

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

9. 自定义指令

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

9.1. 自定义指令语法

全局注册

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

局部注册

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

配置介绍：
inserted:被绑定元素插入父节点时调用的钩子函数。
el：使用指令的那个DOM元素。

9.2. 自定义指令的指

在绑定指令时，可以通过“等号”的形式为指令绑定具体的参数值。
通过 binding.value 可以拿到指令值，指令值修改会触发update函数。 ::: vue-demo 指令演示

<template>
  <div v-color="color">我是内容</div>
  <button type="button" @click="changeColor">修改指令值</button>
</template>
<script>
  export default {
    data () {
        return{
            color: "red"
        }
    },
    methods: {
      changeColor() {
          if (this.color==="red"){
            this.color = "blue"
          }
          else{
            this.color = "red"
          }
      },
    },
    directives: {
      color: {
        inserted(el, binding) {
          // binding.value 就是指令的值
          el.style.color = binding.value
        },
        // 2. update 指令的值修改的时候触发，提供值变化后，dom更新的逻辑
        updated(el, binding) {
          el.style.color = binding.value
        }
      }
    }
  }
</script>

:::

10. 插槽

元素是一个插槽出口 (slot outlet)，标示了父元素提供的插槽内容 (slot content) 将在哪里被渲染。举例来说，这里有一个组件，可以像这样使用：

<FancyButton>
Click me! <!-- 插槽内容 -->
</FancyButton>

而的模板是这样的：

<button class="fancy-btn">
<slot></slot> <!-- 插槽出口 -->
</button>

最终渲染出的 DOM 是这样：

<button class="fancy-btn">Click me!</button>

:::tip 插槽内容可以访问到父组件的数据作用域。
插槽内容无法访问子组件的数据。 :::

10.1 默认内容

之间的内容，将在父组件没有提供任何插槽内容时作为默内容。

<button type="submit">
  <slot>
    Submit <!-- 默认内容 -->
  </slot>
</button>

10.2 具名插槽

带name的插槽被称为具名插槽(named slots)。没有提供name的 <slot> 出口会隐式地命名为“default”（name="default"）。
要为具名插槽传入内容，需要使用一个含 v-slot 指令的 <template> 元素，并将目标插槽的名字传给该指令：

<!--子模板中-->
<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
</div>
<!--父组件调用时-->
<BaseLayout>
  <template v-slot:header>
    <!-- header 插槽的内容放这里 -->
  </template>
</BaseLayout>

<template v-slot:header>可以简写为<template #header>。
当一个组件同时接收默认插槽和具名插槽时，所有位于顶级的非 <template> 节点都被隐式地视为默认插槽的内容。

10.3 作用域插槽

解决插槽的内容无法访问到子组件的状态。

10.3.1 默认作用域插槽

<!-- <MyComponent> 的模板 -->
<div>
  <slot :text="greetingMessage" :count="1"></slot>
</div>

默认插槽通过子组件标签上的 v-slot 指令，直接接收到了一个插槽 props 对象。

<MyComponent v-slot="slotProps">
  {{ slotProps.text }} {{ slotProps.count }}
</MyComponent>

以上代码可以解构为：

<MyComponent v-slot="{ text, count }">
  {{ text }} {{ count }}
</MyComponent>

10.3.2 具名作用域插槽

具名作用域插槽的工作方式也是类似的，插槽 props 可以作为 v-slot 指令的值被访问到： v-slot:name="slotProps"。当使用缩写时是这样：

<MyComponent>
  <template #header="headerProps">
    {{ headerProps }}
  </template>
</MyComponent>

向具名插槽中传入 props：

<slot name="header" message="hello"></slot>

name 是一个 Vue 特别保留的 attribute，不会作为 props 传递给插槽。因此最终 headerProps 的结果是 { message: 'hello' }。

同时使用了具名插槽与默认插槽，则需要为默认插槽使用显式的 <template> 标签。直接为组件添加 v-slot 指令将导致编译错误!

<!-- <MyComponent> template -->
<div>
  <slot :message="hello"></slot>
  <slot name="footer" />
</div>

<!-- 该模板无法编译 -->
<MyComponent v-slot="{ message }">
  <p>{{ message }}</p>
  <template #footer>
    <!-- message 属于默认插槽，此处不可用！ -->
    <p>{{ message }}</p>
  </template>
</MyComponent>

<!--正确写法-->
<MyComponent>
  <!-- 使用显式的默认插槽 -->
  <template #default="{ message }">
    <p>{{ message }}</p>
  </template>
  <template #footer>
    <p>Here's some contact info</p>
  </template>
</MyComponent>