🗒️Vue 指令

来自官网 https://cn.vuejs.org

1. Class 和 Style 绑定

class 和 style 都是 attribute，所以可以使用 v-bind 指令。

• :class 是 v-bind:class 的缩写

• :style 是 v-bind:style 的缩写

考虑到复杂绑定时用 v-bind 拼接生成字符串比较麻烦而且容易出错，所以 Vue 专门为 class 和 style 的 v-bind 用法提供了特殊的功能增强，就是除了字符串外，表达式的值还可以是对象或数组。

1.1 绑定对象

eg1. 给 class 绑定对象

<!-- 1. -->
<div :class="{ active: isActive}"></div>

<!-- 2. 和静态共存 -->
<div
  class="static"
  :class="{ active: isActive, 'text-danger': isError }"
></div>

<!-- 3. 绑定个对象 -->
<div :class="classObject"></div>

<!-- 4. 绑定个计算属性 -->
<div :class="classObject2"></div>

import { ref, reactive, computed } from 'vue';

const isActive = ref(true);
const isError = ref(true);
const error = ref(null);

const classObject = reactive({
  active: true,
  "text-danger": false
});

const classObject2 = computed(() => ({
  active: isActive.value && !error.value,
  "text-danger": error.value && error.value.type === "fatal"
}));

eg2. 给 style 绑定对象

<!-- 1. 给 style 绑定对象（以下两个等价） -->
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<div :style="{ color: activeColor, 'font-size': fontSize + 'px' }"></div>

<!-- 2. 直接绑定一个对象 -->
<div :style="styleObject"></div>

<!-- 3. 绑定一个计算属性 -->

import {ref, reactive} from 'vue';
  
const activeColor = ref("red");
const fontSize = ref(30);

const styleObject = reactive({
  color: "red",
  fontSize: "13px"
});

1.2 绑定数组

eg1. 给 class 绑定数组

<!-- 1. 普通数组 -->
<div :class="[activeClass, errorClass]"></div>

<!-- 2. 有条件地渲染 -->
<div :class="[isActive ? activeClass : '', errorClass]"></div>

<!-- 3. 在数组中嵌套对象（可避免冗长的条件渲染） -->
<div :class="[{ active: isActive }, errorClass]"></div>

import { ref } from "vue";
  
const activeClass = ref("active");
const errorClass = ref("text-danger");

const isActive = ref(true);

在组件上使用。关于更多组件的 attribute 继承的细节，详见 透传 Attributes。

2. v-if 和 v-show

它们的区别：

	v-if	v-show
条件渲染	是真实地按条件渲染，它会确保事件监听器和子组件都会被销毁和重建	只是切换了元素的 CSS display 属性
初始渲染的开销	是惰性的。如果初次渲染时是 false，则不会做任何事情；只有当条件首次变为 true 时才被渲染	初始一定会被渲染（即在 DOM 树中保留该元素），而无论初始条件如何
切换的开销	更高	仅更改 display 属性
是否支持 <template>	支持	不支持

所以，v-show 适用于频繁切换，而 v-if 更适用于在运行时绑定条件很少改变的。

3. v-for

3.1 用法

1. 遍历一个数组

   1. <li v-for="item in items"></li>

      • 解构 <li v-for="{ message } in items"></li>

   2. <li v-for="(item, index) in items"></li>

      • 解构 <li v-for="({ message }, index) in items"></li>

      • for-in

   3. <li v-for="item of items"></li>

      • for-of 更接近 JavaScript 的迭代器语法

2. 遍历一个对象：遍历对象的所有属性，顺序是基于对该对象调用 Object.keys() 的返回值

   1. <li v-for="value in myObject"></li>

   2. <li v-for="(value, key) in myObject"></li>

   3. <li v-for="(value, key, index) in myObject"></li>

3. 直接接受一个整数值

   • <span v-for="n in 10"></span> 初值是从 1 开始

在 v-for 块中可以完整地访问父作用域内的属性和变量。多层嵌套的 v-for，作用域的工作方式和函数的作用域很类似，每个 v-for 作用域都可以访问到父级作用域。

v-for 也能在 <template> 上使用。

3.2 :key 绑定

对于通过 v-for 渲染的元素列表，Vue 默认按照“就地更新”的策略来更新。比如当数据项的顺序改变时，Vue 不会随之移动 DOM 元素的顺序，而是就地更新每个元素。

默认模式是高效的，但只适用于列表渲染输出的结果不依赖子组件状态或者临时 DOM 状态的情况（例如表单输入值）。

给每个元素对应的块提供一个唯一的 key 属性，可以让 Vue 跟踪每个节点，从而重用和重新排序现有的元素。key 绑定的值期望是一个基础类型的值，不要赋个对象。更多详见内置的特殊 Attributes key。

3.3 v-for 和 v-if

1. 不推荐同时使用 v-if 和 v-for，详见风格指南。

2. 若同时使用了，v-if 的优先级会更高，这意味着 v-if 的条件将无法访问到 v-for 作用域内定义的变量别名。更多请查阅列表渲染指南。

3. 通常会在外新包装一层

   • <template v-for><li v-if></li></template>

   • <template v-if><li v-for></li></template>

4. v-on

v-on 指令可以监听 DOM 事件，比如 v-on:click="handler"，简写为 @click="handler"。

1. 内联事件处理器

   1. 比如 <button @click="count++">Add 1</button>

   2. 比如 <button @click="say('hello')">Say hello</button>

   3. 传事件参数 <button @click="(event) => warn('xxx', event)"></button>

2. 方法事件处理器

   1. 比如 <button @click="greet">Greet</button>

4.1 事件修饰符

功能类似 event.preventDefault() 和 event.stopPropagation()。

1. .stop：停止冒泡

2. .prevent：阻止默认

3. .self：仅当 event.target 是元素本身时

4. 与原生 addEventListener 事件相对应

   1. .capture：使用 capture 捕获模式

   2. .once：最多被触发一次

   3. .passive：和 scrolling 相关

修饰符可链式书写：

• 比如 <a @click.stop.prevent="doThat"></a>

• 需注意顺序

  • @click.prevent.self 会阻止元素及其子元素的所有点击事件的默认行为

  • @click.self.prevent 则只会阻止对元素本身的点击事件的默认行为

• 不要同时使用 .passive 和 .prevent

  • 因为 .passive 向浏览器表明了不想阻止事件的默认行为

4.2 按键修饰符

1. 常用按键的别名

   1. .enter

   2. .tab

   3. .delete (捕获“Delete”和“Backspace”两个按键)

   4. .esc

   5. .space

   6. .up

   7. .down

   8. .left

   9. .right

2. 系统按键修饰符

   1. .ctrl

   2. .alt

   3. .shift

   4. .meta

3. .exact 修饰符：确定组合的系统按键修饰符

4. 鼠标按键修饰符

   1. .left

   2. .right

   3. .middle

<input @keyup.enter="submit" />
<input @keyup.page-down="onPageDown" />
<input @keyup.alt.enter="clear" />
<div @click.ctrl="doSomething"></div>

5. v-model

关于表单输入的绑定，如果是手动连接值绑定和更改事件监听器可能会很麻烦，而 v-model 指令能帮我们简化很多。如下：

<input :value="text" @input="event => text = event.target.value" />

<input v-model="text" />

5.1 不同类型的输入

v-model 可以处理不同类型的输入，比如 <input>, <textarea>, <select> 元素。它还会根据所使用的元素自动使用对应的 DOM 属性和事件组合：

1. 文本类型的 <input> 和 <textarea> 元素会绑定 value property 并侦听 input 事件

2. <input type="checkbox"> 和 <input type="radio"> 会绑定 checked property 并侦听 change 事件

3. <select> 会绑定 value property 并侦听 change 事件

注意：v-model 会忽略任何表单元素上初始的 value, checked 或 selected attribute。它将始终将当前绑定的 JavaScript 状态视为数据的正确来源。

5.2 修饰符

1. .lazy：让 v-model 更新数据的时机从 input 事件之后变成 change事件 之后

2. .number：若输入框有 type="number" 该修饰符会自动启用

3. .trim：自动去除两端的空格