Vue基础指令

经过前面几节内容的学习，相信大家已经初识 Vue，本节讲解的是 Vue 基础指令，通过基础指令可以掌握更多渲染数据的方法，实现数据的双向绑定。

v-cloak指令

v-cloak 指令的作用是在 Vue 数据渲染完成之前，隐藏源代码，当快速刷新页面或者网速较慢时，Vue 不能立即渲染数据，此时看到的页面如图 1-3 所示。

Figure 1. 图1-3　Vue数据渲染之前

当网速过慢时，浏览器显示的是 Vue 的源代码，对于用户来说，这是一种不友好的展现形式。所以在实现 Vue 项目之前，我们需要使用 v-cloak 指令，代码如下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 注释二：样式控制隐藏 */
        /* 属性选择器，只要使用了 v-cloak 属性的元素，使用下面样式 */
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
    <!-- 注释一：根节点使用 v-cloak -->
    <div id="app" v-cloak>
        {{ msg }}<br>
        {{ obj.name }}<br>
        {{ f1() }}<br>
        {{ num > 10 ? '大于10' : '小于10' }}
    </div>

    <!-- 安装 Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                // 字符串
                msg: 'Hello World',
                // 对象
                obj: {
                    name: '张三'
                },
                // 函数
                f1: function () {
                    return 1 + 1;
                },
                num: 15
            }
        });
    </script>
</body>
</html>

上述代码有两处注释。

注释一表示在 Vue 控制的根节点使用 v-cloak 指令。
注释二表示使用 CSS 样式控制 Vue 源码的隐藏。

v-cloak 原理：由于快速刷新页面或者网速原因，导致 Vue.js 没有生效，在生效之前，只要是添加了 v-cloak 指令的元素，都会隐藏（样式设置），当 Vue.js 加载完毕，所做的第一件事就是将页面中的 v-cloak 指令删掉，所以数据又可以正常显示了。

v-text指令

作用：渲染 data 中的属性值。

前文讲过使用插值表达式渲染 data 中的属性值，本节讲解渲染数据的另外一种方式，即使用 v-text 指令。渲染 msg 属性的代码如下。

M 层代码如下。

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: 'Hello World'
        }
    });
</script>

视图层代码如下。

<div id="app" v-cloak>
    <!-- 第一种渲染方法 -->
    <h1>{{ msg }}</h1>

    <!-- 第二种渲染方法 -->
    <h1 v-text="msg"></h1>
</div>

运行代码，发现用两种方式渲染数据的运行结果相同，如图 1-4 所示。

Figure 2. 图1-4　插值表达式渲染和v-text指令渲染的运行结果

v-html指令

作用：渲染富文本。

上一节讲解的 v-text 指令只能渲染普通的字符串，而不能渲染复杂数据（如富文本）。本节讲解用 v-html 指令渲染富文本，代码如下。

M 层代码如下。

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: '<h1>Hello World</h1>'
        }
    });
</script>

视图层代码如下。

<div id="app" v-cloak>
    <div v-html="msg"></div>
</div>

运行代码，发现 M 层中 msg 属性的 h1 标签会被解析，如图 1-5 所示。

Figure 3. 图1-5　v-html渲染结果

下面总结一下插值表达式、v-text、v-html 的相同点和不同点。

相同点：都可以渲染 M 层中的数据。
不同点：
- 插值表达式和 v-text 不能渲染富文本。
- v-text 和 v-html 在视图层不能继续添加文本内容，而插值表达式可以继续添加文本。

下面通过插值表达式、v-text、v-html 进行渲染，代码如下。

<div id="app" v-cloak>
    <div>
        <h1>{{ msg }} 此处文本正常显示</h1>
    </div>
    <div v-html="msg">此处文本不显示</div>
    <div v-text="msg">此处文本不显示</div>
</div>

运行结果如图 1-6 所示。

Figure 4. 图1-6　插值表达式、v-text、v-html渲染结果

结论：只有插值表达式中的文本可以正常显示，使用 v-text 和 v-html 渲染的数据会覆盖原标签中的内容。

v-bind指令

作用：元素属性绑定。

v-bind 是比较重要的一个指令，用于元素的属性绑定。以上几节中 M 层的数据直接渲染到元素中，本节讲解的是把 M 层的数据渲染到元素的属性中，例如 div 有 title 属性，把 M 层数据渲染到 title 属性中，代码如下。

M 层代码如下。

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: 'Hello World'
        }
    });
</script>

视图层代码如下。

<div id="app" v-cloak>
    <div title="msg">
        <h1>{{ msg }}</h1>
    </div>
</div>

此时当鼠标移动到 div 元素，title 属性显示的是字符串 “msg”，并不能渲染 M 层的 “Hello World”，运行结果如图 1-7 所示。

Figure 5. 图1-7　title属性渲染结果1

正确的做法应该是使用 v-bind 指令绑定属性，代码如下。

<div id="app" v-cloak>
    <div v-bind:title="msg">
        <h1>{{ msg }}</h1>
    </div>
</div>

运行结果如图 1-8 所示。

Figure 6. 图1-8　title属性渲染结果2

当元素中的属性使用了 v-bind 指令时，后面的值就是变量，Vue 会到 M 层中找这个变量，若找到了就渲染内容，若找不到就会报错。

常用的属性绑定还有 img 标签中的 src 属性、a 标签中的 href 属性等，代码如下。

M 层代码如下。

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: 'Hello World',
            logo: 'images/logo.jpg',
            link: 'http://www.baidu.com'
        }
    });
</script>

视图层代码如下。

<div id="app" v-cloak>
    <div v-bind:title="msg">
        <h1>{{ msg }}</h1>
        <img v-bind:src="logo">
        <a v-bind:href="link">百度</a>
    </div>
</div>

v-bind 可以简写成 “:”，所以上述代码中的 src 属性和 href 属性可以分别简写为 “:src” 和 “:href”，代码如下。

<div id="app" v-cloak>
    <div v-bind:title="msg">
        <h1>{{ msg }}</h1>
        <img :src="logo">
        <a :href="link">百度</a>
    </div>
</div>

v-on指令

作用：元素事件绑定。

v-on 指令同样是 Vue 中的重要指令，用于元素事件的绑定，现在有一个简单的需求，单击 “单击” 按钮时，控制台输出 “Hello World”，原生的 JS 代码如下。

视图层代码如下。

<div id="app" v-cloak>
    <input type="button" value="单击" id="btn">
</div>

JS 代码如下。

<script>
    document.getElementById('btn').onclick = function () {
        console.log('Hello World');
    };
</script>

当单击 “单击” 按钮时，控制台可正常输出 “Hello World”，但是上述代码有个缺点，即其功能是通过操作 DOM 元素实现的，这和 Vue 的理念冲突，Vue 不建议操作 DOM 元素，所以应该使用 v-on 事件绑定指令，代码如下。

视图层代码如下。

<div id="app" v-cloak>
    <input type="button" value="单击" v-on:click="show">
</div>

JS 代码如下。

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: 'Hello World'
        },
        methods: {
            show() {
                console.log('Hello World');
            }
        }
    });
</script>

单击 “单击” 按钮时，控制台同样会输出 “Hello World”，这一次我们并没有操作 DOM 元素。分析上述代码，发现在配置对象中新增了 methods 属性，methods 属性用来存放方法。

视图层中，通过 v-on 指令给按钮绑定了单击事件。当单击按钮时，会到 methods 属性中找 show 方法，若找到 show 方法就执行，若找不到 show 方法就报错。

本节的重点是要理解 methods 属性是用来存放方法的，v-on 是用来绑定事件的。

除了单击事件，常见的事件还有鼠标移动事件，下面将上述案例的需求修改成：当鼠标经过按钮时，控制台输出 “HelloWorld”，代码如下。

<div id="app" v-cloak>
    <input type="button" value="单击" @mouseover="show">
</div>

JS 代码如下。

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: 'Hello World'
        },
        methods: {
            show() {
                console.log('Hello World');
            }
        }
    });
</script>

从上述代码可以看出，v-on 指令可以简写成 “@”。