指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

v-if / v-show

根据表达式的值的真假来判断是否渲染元素；
v-if 是通过是否渲染元素来显示隐藏的；而 v-show 是通过 display 来显示隐藏的，即 v-show 无论怎样都会先渲染在页面上。相对来说 v-if 更加消耗性能，所以说通常需要经常进行切换显示的元素会用 v-show

1
2
3
4
5
6
7
// v-if
<p v-if='true'>会渲染在页面</p>
const see = false;
<p v-if='see'>不会渲染在页面</p>

// v-show
<span v-show='see'>通过display控制</span>		//see是false，所以span标签的display: none;

v-bind

用于响应式的更新 HTML attribute，给属性动态绑定值。
v-bind 可简写为 ‘ : ‘

1
2
3
let src = 'https://www.baidu.com';
<a v-bind:href='src'>跳转</a>
<a :href='src'>简写</a>

v-on

用于绑定事件处理程序,
v-on 可简写为 ‘@’

1
2
3
<button v-on:click='onClick'>点击</button>

<button @click='onClick'>简写</button>

v-html / v-text

更新元素的 innerHTML，v-tex 只能解析文本，v-html 能解析文本、html 标签、css、js

1
2
3
<p v-text='这是一个p标签'></p>

<p v-html='<i>可以解析html</i>'></p>