Vue 模板语法第一式 —— 插值

上一回：Vue 的初阶黑魔法 —— 模板语法

书接上文，上一回我们讲到了 Vue 的黑魔法 —— 模板语法，可是我们只是解释了什么是模板语法。关于 Vue 的模板语法要怎么使用，具体又包含哪些内容，我们如今是一律不知。那么接下来，就让我们慢慢走进 Vue 的模板语法，首先要来说的就是模板语法的第一式 —— 插值。

---

什么是插值

那么问题来了，什么是插值啊？每次遇到一个新的概念，心都好累！关键是 Vue 官方并无给出解释，而是直接给了具体的用法而已。

上一回我们讲到模板语法的时候，说了模板语法经过 Vue 框架就能够绑定到对应 Vue 实例的数据内容。换句话讲，模板语法就是把 Vue 实例的数据展现在 HTML 网页中。而如今我们说的插值，就是把这些数据展现文本内容、浏览器解析后的结果、HTML 标签属性之类的。

好比下面这段代码示例，就是把数据展现成文本内容的：

<div id="app">
    <h2>{{ message }}</h2>
</div>
<script src="scripts/vue.js"></script>
<script>
    // 建立Vue的实例对象
    var app = new Vue({
        el: '#app',
        data: {
            // 存储在Vue的实例对象中
            message: '前端课湛'
        }
    });
</script>
复制代码

上面这段代码中的 {{ message }} 就是插值了。

Vue 模板语法的插值有几种用法呢？一共是四种：

1. 文本插值
2. HTML 插值
3. v-bind 指令
4. 表达式

接下来，我们分别地来讲一说吧。

文本插值

说到这文本插值啊，它但是 Vue 实现数据绑定中最多见的一种形式。不只如此，文本插值还有一个名字，叫作“Mustache”语法。又是个新概念，心太累了！说白了，就是一对花括号的写法，就像 {{ message }} 这种就是文本插值了。其实很简单吧？！

<div id="app">
    <h2>{{ message }}</h2>
</div>
<script src="scripts/vue.js"></script>
<script>
    // 建立Vue的实例对象
    var app = new Vue({
        el: '#app',
        data: {
            // 存储在Vue的实例对象中
            message: '前端课湛'
        }
    });
</script>
复制代码

刚刚用到的这段代码就是文本插值的示例代码啦。不过，这块须要注意一下哈！就是 Vue 实例中的 message 的值变化的时候，对应插值处也会跟着更新。好比，上面这段代码运行以后，我们在浏览器的控制台来改变 message 的值，插值处也会改变的。

若是想要插值处不跟着数据变化而变化的话，我们也是有办法的。Vue 提供了 v-once 指令，这个指令就能够不让插值处跟着数据变化二变化了。

这时候你可能会吐槽了，心真尼玛累！咋又来个新概念，啥是指令啊？简单来讲，指令就是 Vue 提供的 HTML 标签的自定义属性，你能够先这么理解。

闲言少叙，书归正传。

上面那段代码示例，我们只须要在对应的标签中定义 v-once 指令就好了。就像下面这样示儿的：

<div id="app">
    <h2 v-once>{{ message }}</h2>
</div>
<script src="scripts/vue.js"></script>
<script>
    // 建立Vue的实例对象
    var app = new Vue({
        el: '#app',
        data: {
            // 存储在Vue的实例对象中
            message: '前端课湛'
        }
    });
</script>
复制代码

上面这段代码有兴趣你本身运行去吧，本身看看效果。

HTML 插值

文本插值说明白了以后，我们来看看 HTML 插值吧。说到这个 HTML 插值吧，我是以为就是加强版的文本插值。为啥这么说呢？由于文本插值只能把文本展现在插值处，可是若是数据自己就是一段 HTML 代码呢？文本插值就会原封不动地把这段 HTML 代码展现出来。不信？咱来试试：

<div id="app">
    {{ message }}
</div>
<script src="scripts/vue.js"></script>
<script>
    // 建立Vue的实例对象
    var app = new Vue({
        el: '#app',
        data: {
            // 存储在Vue的实例对象中
            message: '<span style="color: lightcoral">前端课湛</span>'
        }
    });
</script>
复制代码

上面这段代码示例中的数据就是 <span style="color: lightcoral">前端课湛</span> 这样一段 HTML 代码，文本插值会把这段 HTML 代码原封不动地展现出来。

这个时候，要想浏览器去解析这段 HTML 代码的话，就须要使用 Vue 提供的 HTML 插值了。这个 HTML 插值其实就是 v-html 指令。

<div id="app">
    <span v-html=message></span>
</div>
<script src="scripts/vue.js"></script>
<script>
    // 建立Vue的实例对象
    var app = new Vue({
        el: '#app',
        data: {
            // 存储在Vue的实例对象中
            message: '<span style="color: lightcoral">前端课湛</span>'
        }
    });
</script>
复制代码

这样修改代码以后，运行的时候浏览器就会解析这段 HTML 代码了。

HTML 插值在使用的时候也须要注意一个问题，就是 HTML 插值可能会引发 XSS 攻击。啥？这一回心真真尼玛累啊！XSS 攻击咱就不解释了，好奇的话自行百度吧。

因此，啥意思呢？就是要告诉你啊，若是你要用 HTML 插值的话，那这个数据是不能交给用户提供的。否则，就很危险了！

v-bind 指令

讲到这儿啊，你是否是以为 Vue 的模板语法仍是挺强大的？但是还不够呢！HTML 标签还有属性呢，这个能不能也一样实现绑定到 Vue 实例的数据呢？答案是确定的。不是确定的咱说它干啥，真是的。

那具体怎么来实现呢？这就须要用到 Vue 的 v-bind 指令啦。废话很少说，我们来看一段示例代码吧。

<div id="app">
  <span v-bind:title="message"></span>
</div>
<script src="scripts/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      message: 'this is message.'
    }
  });
</script>
复制代码

上面这段代码运行以后，就会把数据绑定到 v-bind 指令的 title 属性上。

牛掰吧？！如今文本内容、HTML 代码解析，还有 HTML 标签的属性都有了。

表达式

不只如此呢！Vue 还容许使用 JavaScript 表达式呢。关于啥是 JavaScript 的表达式，若是你知不道的话，那你为啥要学 Vue 呢？！拉出去枪毙五分钟，再从新去补 JavaScript 基础去！

好比下面这些都是 JavaScript 表达式：

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>
复制代码

这里还要说一个须要注意的地方，Vue 支持表达式是有个限制的，就是每一个数据的绑定只能支持单个表达式。换句话讲，多个表达式或者语句啥的都不支持呢！

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}

<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}
复制代码

好吧！一会儿说了这么多，这下你也该满意了吧？！