在前端基础面试中，Vue的指令算是一个高频面试题
面试官问：Vue有哪些指令
你就告诉他：截止到Vue3.2，Vue一共有16个自带指令
v-text、v-html、v-show、v-if、v-else、v-else-if、v-for、v-on、v-bind、v-model、v-slot、v-pre、v-cloak、v-once、v-memo、v-is，其中v-memo是3.2新增的，v-is在3.1.0中废弃
首先来说什么是Vue指令
在表现形式上，就是带有v-前缀的属性。v-属性名=‘具体表达式’。当表达式对应的值发生变化后，将响应式的作用于Dom，从而影响视图层。更为具体的说，指令结合属性作为暗号，框架会根据按照对应的不同的值来进行Dom操作的绑定。
1、v-text
更新元素的文本内容。
<h1 v-text="msg"></h1>
msg被定义在数据属性中，指明了具体的值。将具体的值展示在视图层，对应javascript中的innerText属性。同时，其作用又与模板语法 {{具体的数据属性名}} 类似。因此一般较为少用
2、v-html
与v-text很像 指明了具体的html内容。对应javascript中的innerHtml属性
<div v-html="msg"></div>
<div v-html="'<h3>hello Vue</h3>'"></div>
第二个需要注意的是，里头内容必须是按普通 HTML 插入
3、v-show
v-show和v-if的能够一样都是条件渲染, 取值为true就显示, 取值为false就不显示
v-if和v-show区别
v-if: 只要取值为false就不会创建元素
v-show: 哪怕取值为false也会创建元素, 只是如果取值是false会设置元素的display为none
4、v-if
基于表达式值的真假性，来条件性地渲染元素或者模板片段
当 v-if 元素被触发，元素及其所包含的指令/组件都会销毁和重构。如果初始条件是假，那么其内部的内容根本都不会被渲染
<template>
<div class="about">
<div v-if="ok">111</div>
</div>
</template>
<script>
export default {
data() {
return {
ok: true,
};
}
};
</script>
v-if注意点
v-if可以从模型中获取数据
v-if也可以直接赋值一个表达式
当同时使用v-if、v-for时，
v-if比v-for优先级更高，并不推荐在一元素上同时使用这两个指令
5、v-else
前提是上一个兄弟元素必须有 v-if 或 v-else-if
v-else指令可以和v-if指令配合使用, 当v-if不满足条件时就执行v-else就显示v-else中的内容
<template>
<div class="about">
<div v-if="ok">111</div>
<div v-else>222</div>
</div>
</template>
<script>
export default {
data() {
return {
ok: false,
};
}
};
</script>
6、v--else-if
v-else-if可以和 v-if指令配合使用, 当v-if不满足条件时就依次执行后续v-else-if, 哪个满足就显示哪个
v-else-if注意点
和 v-else一样，v-else-if不能单独出现
v-if和v-else-if中间不能出现其它内容
7、v-for
相当于JS中的for in循环, 可以根据数据多次渲染元素
<template>
<div class="about">
<div v-for="(val,index) in items" :key="index">{{ val.title }}</div>
</div>
</template>
<script>
export default {
data() {
return {
items:[
{id:1,title:'小学'},
{id:2,title:'中学'},
{id:3,title:'高中'},
{id:4,title:'大学'},
]
};
}
};
</script>
v-for特点
可以遍历 数组, 字符, 数字, 对象
8、v-on
v-on指令专门用于给元素绑定监听事件，可以缩写为：@
<!-- 方法处理函数 -->
<button v-on:click="doThis"></button>
<!-- 缩写的方法处理函数 -->
<button @click="doThis"></button>
v-on注意点:
v-on绑定的事件被触发之后, 会去Vue实例对象的methods中查找对应的回调函数
修饰符：
.stop- 调用event.stopPropagation()。.prevent- 调用event.preventDefault()。.capture- 在捕获模式添加事件监听器。.self- 只有事件从元素本身发出才触发处理函数。.{keyAlias}- 只在某些按键下触发处理函数。.once- 最多触发一次处理函数。.left- 只在鼠标左键事件触发处理函数。.right- 只在鼠标右键事件触发处理函数。.middle- 只在鼠标中键事件触发处理函数。.passive- 通过{ passive: true }附加一个 DOM 事件
9、v-bind
v-bind用于绑定数据和元素属性，可以缩写为: 或.(当使用 .prop 修饰符时)
动态的绑定一个或多个 attribute，也可以是组件的 prop
修饰符：
.camel- 将短横线命名的 attribute 转变为驼峰式命名。.prop- 强制绑定为 DOM property。.attr- 强制绑定为 DOM attribute
修饰符：
当用于绑定 `class` 或 `style` attribute，`v-bind` 支持额外的值类型如数组或对象。详见下方的指南链接。
在处理绑定时，Vue 默认会利用 `in` 操作符来检查该元素上是否定义了和绑定的 key 同名的 DOM
property。如果存在同名的 property，则 Vue 会把作为 DOM property 赋值，而不是作为 attribute 设置。这个行为在大多数情况都符合期望的绑定值类型，但是你也可以显式
用 `.prop` 和 `.attr` 修饰符来强制绑定方式。有时这是必要的，特别是在和[自定义元素]
(https://cn.vuejs.org/guide/extras/web-components.html#passing-dom-properties)打交道时。
当用于组件 props 绑定时，所绑定的 props 必须在子组件中已被正确声明。
当不带参数使用时，可以用于绑定一个包含了多个 attribute 名称-绑定值对的对象。
10、v-model
在表单输入元素或组件上创建双向绑定
-
仅限：
<input><select><textarea>- components
-
修饰符：
在前端处理表单时，我们常常需要将表单输入框的内容同步给 JavaScript 中相应的变量。手动连接值绑定和更改事件监听器可能会很麻烦
<input :value="text" @input="(event) => (text = event.target.value)" />
v-model 指令帮我们简化了这一步骤
<input v-model="text">
11、v-slot
用于声明具名插槽或是期望接收 props 的作用域插槽 ，可以缩写为： #
- 参数：插槽名 (可选，默认是
default)
举例来说，这里有一个 <FancyButton> 组件，可以像这样使用:
<FancyButton> Click me! <!-- 插槽内容 --> </FancyButton>
而 <FancyButton> 的模板是这样的：
<button class="fancy-btn"> <slot></slot> <!-- 插槽出口 --> </button>
<slot> 元素是一个插槽出口 (slot outlet)，标示了父元素提供的插槽内容 (slot content) 将在哪里被渲染。
最终渲染出的 DOM 是这样：
<button class="fancy-btn">Click me!</button>
12、v-pre
跳过该元素及其所有子元素的编译
元素内具有 v-pre，所有 Vue 模板语法都会被保留并按原样渲染。最常见的用例就是显示原始双大括号标签及内容
<span v-pre>{{ this will not be compiled }}</span>
结果如图，可以看出span标签里面的内容并没有被编译
13、v-cloak
v-cloak原理是先通过样式隐藏内容，然后在内存中进行值的替换，将替换的内容再反馈给界面，数据渲染完场之后，v-cloak 属性会被自动去除。
v-cloak的使用
- 首先，在差值语法所在的标签处加上v-cloak指令
<h3 v-cloak>{{ name }}</h3>
- 然后，在css中设置v-cloak的属性为display为none
<style type="text/css">
[v-cloak]{
display: none;
}
</style>
14、v-once
仅渲染元素和组件一次，并跳过之后的更新
在随后的重新渲染，元素/组件及其所有子项将被当作静态内容并跳过渲染。这可以用来优化更新时的性能。
- 该指令后面不需要跟任何表达式(比如之前的v-for后面是由跟表达式的)
- 该指令表示元素和组件(组件后面才会学习)只渲染一次，不会随着数据的改变而改变。
<!-- single element -->
<span v-once>This will never change: {{ msg }}</span>
<!-- the element have children -->
<div v-once>
<h1>comment</h1>
<p>{{ msg }}</p>
</div>
<!-- component -->
<my-component v-once :comment="msg"></my-component>
<!-- `v-for` directive -->
<ul>
<li v-for="i in list" v-once>{{ i }}</li>
</ul>
15、v-memo
官网对 v-memo 定义是这样的：
缓存一个模板的子树。在元素和组件上都可以使用。为了实现缓存，该指令需要传入一个固定长度的依赖值数组进行比较。如果数组里的每个值都与最后一次的渲染相同，那么整个子树的更新将被跳过
看起来有点绕，但实际上，很好理解。v-memo 所做的与我们现有的计算属性一样，只不过 v-memo 的对象是 DOM。
这个新指令将缓存它所控制的DOM部分，如果一个特定的值发生变化，只需运行更新并重新渲染。这些值是由我们自己手动设置。
16、v-is
已在 3.1.0 中废弃，改用:is
Vue3中，使用v-is指定组件。注意！！！v-is后是JavaScript字符串，双重引号！
注意：以下属于vue2中的语法！
vue中is的使用
在某些元素内部，有特定的包裹元素规范，不能包裹其他元素。比如ul内只能包含li，而不能使用自定义组件。也就是说，这样是不允许的：
<!-- 允许 -->
<ul>
<li></li>
</ul>
<!-- 不允许 -->
<ul>
<my-component></my-component>
</ul>
为了能够复用自定义的组件，需要使用is来指定组件：
<ul>
<li is="my-component"></li>
</ul>
