前面我们在标签身上用到了一个 v-on 的特殊属性来设置事件监听。实际上除了 v-on 以外，Vue 还提供了很多以 v- 开头的属性，我们把这些属性称为“指令”。

一、v-text 和 v-html

除了使用 {{}} 模板语法来实现数据渲染外，Vue 中还提供了 v-text 和 v-html指令来渲染数据。
示例代码：

<div id="app">
    <h1 v-text="msg"></h1>
    <h1 v-html="msg"></h1>
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data() {
            return {
                msg: '<a href="#">Hello</a>',
            }
        }
    })
</script>

其中，v-text 指令和 {{}} 模板语法一样，都是将数据当作普通文本字符串进行解析渲染。而v-html 则会解析数据中的 HTML 标签，并最终将其渲染成一个有效的 HTML 节点。
但是，v-text 和 v-html 都有一个相同的缺点，就是在解析渲染数据时，会将标签中已有的数据覆盖掉。
实例代码：

<div id="app">
    <h1 v-text="msg">world</h1>
    <h1 v-html="msg">world</h1>
    <h1>{{msg}} world</h1>
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data() {
            return {
                msg: 'Hello',
            }
        }
    })
</script>

数据渲染的三种方式及区别汇总

方法	是否解析 HTML 标签	是否覆盖标签内容
`{{}}`	否	否
`v-text`	否	是
`v-html`	是	是

二、v-show

Vue 中提供了 v-show 指令来控制元素的显示或隐藏，当属性值为 true 时，元素显示；属性值为 false 时，元素会自动添加 display: none 的内联样式实现隐藏。
说明：如果 v-show 的属性值不是布尔值，也会自动转换为布尔值后进行判断。
示例代码：

<div id="app">
    <!-- 直接设置布尔值 -->
    <h1 v-show="false">看不见我看不见我...</h1>
    <!-- 设置非布尔值，但数字 0 会自动转换为 false -->
    <h1 v-show="0">看不见我看不见我...</h1>
    <!-- 设置 data 中的动态数据 -->
    <h2 v-show="isShow">也看不见我...</h2>
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data() {
            return {
                isShow: false
            }
        }
    })
</script>

三、v-bind

通常 HTML 标签身上的属性，值都是普通字符串。例如：

<!-- href 属性 -->
<a href="http://www.woniuxy.com">蜗牛学苑</a>
<!-- class 属性 -->
<div class="box"></div>
<!-- src 属性 -->
<img src="http://www.woniuxy.com/page/img/logo-500px.png"/>

但是，如果我们希望属性的值不是一个固定的字符串，而是一个可以动态变化的值。就需要用到 Vue 提供的 v-bind 指令，来实现属性的动态绑定。
示例代码：

<div id="app">
    <a v-bind:href="link">蜗牛学苑</a>
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data() {
            return {
                link: 'http://www.woniuxy.com'
            }
        }
    })
</script>

通过 v-bind:属性名 设置的属性，都会变成动态属性，引号 "" 中的属性值不再是一个普通字符串，而是会被当作 JS 表达式进行解析。
例如上例中 href的属性值 link，就会被解析成 data 中的数据名。
同样的，我们还可以在动态属性的值中进行三目运算：

<div id="app">
    <h1 v-bind:class="index == 1 ? 'active': ''">这是动态的class</h1>
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data() {
            return {
                index: 1
            }
        }
    })
</script>

上例表示，当 data 中 index 的值为 1 时，就给 h1 设置一个 active 的 class，否则就不设置 class。
注意：当一个属性变成动态属性后，属性值自身的双引号 **""** 就只是一个格式，已经不具备字符串的功能。因此如果还需要设置字符串类型的属性值时，需要在双引号 **""** 中再添加单引号 **''**。

前端笔记

基础指令

一、v-text 和 v-html

二、v-show

三、v-bind