常用内置指令

  • v-if 判断不符合条件不进行渲染
  • v-else
  • v-text
  • v-html
  • v-show 不符合条件元素 display：none
  • v-for 循环遍历
  • v-model 双向绑定
  • v-bind 动态赋值 简化 :
  • v-on 事件绑定 简化@ 事件对象穿回来 $event

v-once

这个指令让视图只渲染一次，将来就算相应的数据发生变化，也不会重新渲染。该指令主要在希望静态显示不需要更新数据的时候使用。

v-html

这个指令主要在需要操作原始 HTML 的时候使用。

v-bind

该指令在需要绑定 HTML 标签属性的时候使用。为了方便，该指令还有一个缩写:，例如:class=”myClass”就相当于 v-bind:class=”myClass”。

v-on

该指令主要用于绑定事件处理程序。该指令有缩写@，例如@click=”onClick”就相当于 v-on:click=”onClick”。

v-show、v-if、v-else 和 v-else-if

这几个指令主要用于条件渲染，将在后面进行介绍。

v-for

该指令用于渲染整个列表，将在后面进行介绍。

v-model

该指令可以让页面元素和数据进行双向绑定。默认情况下数据和页面元素是单向绑定的，使用该指令可以让其变成双向绑定。该指令主要用于处理表单等场景。

v-show & v-if 区别？

表现：
v-show 通过 css 的 display 属性控制组件、元素的显隐
v-if 通过插入、移除 dom 控制组件、元素的显影
性能：
v-show 有更多的初始化消耗
v-if 有更多的切换消耗

文本插值 & 表达式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
  <div>
    // 文本插值、模板语法
    {{ htext }}
    // 表达式就是通过{{}}进行一些运算 （加减乘除求模求余过滤器）
    {{ htext + "666" }}
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      stext: "乌鸡哥",
      htext: "<h3>乌鸡哥</h3>",
    };
  },
};
</script>

v-text & v-html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
  <div>
 		// 原样输出
    <div v-text="htext"></div>
    // 解析htext中的标签
    <div v-html="htext"></div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      htext: "<h3>乌鸡哥</h3>",
    };
  }
};
</script>