全面了解Vue内置指令（ 从API的角度认识Vue指令）

全面了解Vue内置指令（ 从API的角度认识Vue指令）

vue 指令是什么

vue指令本质上就是以 v- 开头的自定义属性。但是与我们日常使用的普通属性不一样的地方在于指令后引号中所使用的的是表达式，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。不同的指令可以实现不同的作用，根据实现的内容不同，vue的内置指令主要可以分为以下几个部分，共14条内置指令。

• 内容输出
• 逻辑处理
• 循环表达
• 绑定
• 其他

内容输出相关指令

内容输出指的是在模板中动态显示数据，一般情况下我们可以直接使用双大括号法进行数据输出。但是当界面渲染比较慢时，会显示双大括号，为此，vue提供了以下几种指令。

01 - v-text

<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>

说明：使用v-text指令会填充整个innerHTML，如果想要更新部分内容，还是需要使用插值表达式。

02 - v-html

• 作用：更新元素的innerHTML，默认情况下输出是不会作为html被解析的，防止xss攻击，如果需要解析，则可以使用v-html指令
• 说明：在单文件组件中，scoped的样式是不会作用在 v-html内部的，因为该部分的html没有被Vue的模板编译器进行处理。

<span v-html='html'></span>

03 - v-cloak

• 使用：不需要表达式，直接使用，但是需要配合css规则使用。

• 作用：为了解决数据没有挂载时，出现双大括号的问题

• 原理：可以隐藏未编译的Mustache标签直至实例准备完毕

  [v-cloak] { 
    display: none; 
  }
  

  <div v-cloak>
    {{ message }}
  </div>
  

04 - v-once

• 作用：只渲染元素和组件一次。之后数据变化后视图也不响应。当前组件及其子组件就作为了静态内容。
• 目的：当一些数据确定不会发生变化时，使用当前指令便于性能优化

<!-- 单个元素 --> 
<span v-once>This will never change: {{msg}}</span> 
<!-- 有子元素 --> 
<div v-once>  
    <h1>comment</h1>  
    <p>{{msg}}</p> 
</div> 
<!-- 组件 --> 
<my-component v-once :comment="msg"></my-component>
<!-- `v-for` 指令-->
<ul>  
  	<li v-for="i in list" v-once>{{i}}</li>
</ul>

05 - v-pre

• 作用：跳过当前元素及其子元素的元素编译

• 使用：不需要表达式，直接使用。当一些元素既没有指令也没有数据时，可以使用，当大量跳过此类节点时会加快编译过程。

  <span v-pre>{{ this will not be compiled }}</span>
  

逻辑处理相关指令

01 - v-show

• 接收：任何表达式
• 原理：根据表达式的值是否是一个 真值状态 来判断当前元素是隐藏还是显示（即切换display属性）
• 适用：如果一个组件/元素 变换比较频繁时，便于使用该指令。
• 限制：v-show指令不适用于 template 元素

<span v-show="isShow"></span>

02 - v-if

• 接收：任何表达式

• 原理：根据表达式的值是否是一个真值状态来判断是否渲染该元素，即有条件的渲染

• 使用技巧：如果想要有条件的渲染一组元素，但是不想要添加额外的元素，此时可以在 template标签上使用v-if，渲染结束后不会有 template标签

  <template v-if="ok">
      <h1>Title</h1>
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
  </template>
  

03 - v-else

• 作用：配合 v-if指令实现有条件渲染。

• 限制：必须在v-if 或者 v-else-if 之后使用，否则的话不会被识别

  <div v-if="Math.random() > 0.5">
    	if成立条件下显示
  </div>
  <div v-else>
     否则显示这些内容
  </div>
  

04 - v-else-if

• 作用：配合 v-if 使用

• 限制：和 v-else一样，必须在v-if之后使用

  <div v-if="type === 'A'">
    A
  </div>
  <div v-else-if="type === 'B'">
    B
  </div>
  <div v-else-if="type === 'C'">
    C
  </div>
  <div v-else>
    Not A/B/C
  </div>
  

循环列表相关指令

01 - v-for

• 预期：Array | Object | number | string | Iterable (2.6 新增)

• 作用：渲染列表

• 使用举例

  // 简单使用
  <div v-for='item in items'>
  	{{ item }}
  </div>
  

  // 使用索引
  <div v-for='(item , index) in items'>
    {{index}} : {{ item }}
  </div>
  

绑定

01 - v-bind

• 缩写：：
• 用法：动态的绑定一个或多个属性，或一个组件prop到表达式

02 - v-on

• 缩写：@
• 用法：绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略

03 - v-model

• 作用：在表单控件或者组件上创建双向绑定

• 使用：

  <input type='text' v-model='title'>
  

  数据 title 更新，视图中 input 的 value 就会更新。同时，当 input 中的 value 更新的时候，数据 title 也会更新，这就是我们说的 数据双向绑定 [与 React 中的受控组件类似]

其他

01 - v-slot

• 缩写：#
• 参数：参数名（当没有参数时，默认为 default）
• 用法：提供具名插槽或需要接prop的插槽