Vue2.5笔记：Vue中的模版

我们在上一篇说到如何把 Vue 实例中的数据显示到视图中，就会需要用到我们的模版，我们只是简单的使用了一些，模版其实还有很多其他的特性。今天我们就来看看模版的其他特性。

模版语法

Vue 中的模版是基于 HTML 的模版语法，所有的 Vue 模版都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。这也非常符合 Vue 的易用的特点减少开发者的学习成本。

在底层实现上，Vue 将模版编译成虚拟 DOM 渲染函数，结合响应式系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

但是如果你是 React 的开发者或者你熟悉虚拟 DOM 并且偏爱原生 Javascript，你完全可以不使用模版，而是直接使用渲染函数（render）或者使用 JSX 语法。

<div id="root">
    <h1>超帅的 {{name}}</h1>
</div>
<script>
    var vm = new Vue({
        el: '#root',
        data: {
            name: 'Modeng'
        }
    });
</script>

可以看到我们想要的效果显示出来了，在这里我们用到了模版最常见的数据绑定形式 “Mustache”语法 (双大括号) 语法，Mustache 标签将会被数据中相对应的属性替换，并且绑定的对象的属性发生了改变，差值处的内容也会响应的改变。

开心一刻：Mustache 的中文意思是胡子，但是我怎么看 {{ }} 这个也不像胡子啊，不知道老外怎么起的这个名字。

有人可能会想到 Mustache 语法是不是也可以绑定 HTML 元素的属性呢？

<h1 id="{{id}}"></h1>

其实这里是不能这么做的，Mustache 语法不能用来绑定 HTML 元素的属性，那如果我们需要绑定元素的属性 Vue 给我们提供了一个指令方法 v-bind利用这个我们可以进行元素属性的绑定。

上面说到只要修改我们绑定的数据差值绑定的内容也会跟着替换，不过 Vue 中给我们提供了一个指令可以改变这一特性，我们可以通过使用 v-once 指令当数据改变时我们的内容也不会被替换。

表达式

模版中不仅仅可以进行简单的数据绑定操作，我们还可以在模版中进行简单的 Javascript 表达式。

<div id="root">
    <h1>超帅的 {{name}} 仅仅只有 {{age + 1}} 岁</h1>
</div>
<script>
    var vm = new Vue({
        el: '#root',
        data: {
            name: 'Modeng',
            age: 14
        }
    });
</script>

这里支持＋、－、＊、／四个运算方法；除了运算方法之外，我们还可以使用 三元表达式 我们来看看一个例子

<div id="root">
    <h1>超帅的 {{name}} {{ realAge > 18 ? '不是' : '是' }} 未成年 </h1>

    <h1>超帅的 {{name}} {{ fakeAge > 18 ? '不是' : '是' }} 未成年 </h1>
</div>
<script>
    var vm = new Vue({
        el: '#root',
        data: {
            name: 'Modeng',
            realAge: 14,
            fakeAge: 20
        }
    });
</script>

既然我们用到了三元表达式 我们肯定会想到 if 语句，但是 Vue 只提供我们在模版中使用比较简单的表达式（单个表达式），如果你的逻辑比较复杂，你不应该在模版中进行，而且应该在我们的实例的方法内进行。

下面我们继续看一个例子，我们如何利用它进行字符的反转效果。

<div id="root">
    <h1>{{ name }} </h1>
    <h1>{{ name.split("").reverse().join("") }} </h1>
</div>
<script>
    var vm = new Vue({
        el: '#root',
        data: {
            name: 'Modeng'
        }
    });
</script>

我们可以看到 Mustache 语法非常的强大，上面的表达式我们只是使用了一个方面，我们还可以进行很多方面的应用。

Vue 中除了使用 Mustache 语法（ {{ }} ）将数据插入到模版中，我们还可以使用两个指令 v-text 和 v-html 进行数据到插入。

我们在使用模版的时候不仅仅只有数据的插入有时候我们也会根据一定的条件进行模版渲染，这时候我们就可以用 v-if 和 v-show，不仅如此我们还会经常进行列表和模版的循环我们会用到 v-for 指令。这些在后续的章节中我们会一一说到。

模版的渲染

在文章的一开始我们已经提到，Vue 的模版是基于 HTML 的，我们也可以使用虚拟 DOM 和 JSX 语法。

从上面的图中我们看到 Vue 的整个模版的渲染过程，首先我们的模版编译为AST（抽象语法树），再由 AST 生成渲染函数，由渲染函数结合数据生成 Virtual DOM 树，之后对Virtual DOM 进行 diff 和 path之后生成新的 UI

总结

本文主要进行来模版语法的介绍，我们不仅仅可以使用它将数据插入在模版中，还可以进行简单的表达式的计算。我们也简单的叙述了模版编译的整个流程。当然了模版渲染的过程中还有很多的细节我们没有说明，但是一点也不影响我们对于项目的开发与使用 Vue 如果你对整个渲染的细节非常感兴趣也可以自信查阅资料进行了解。

本文原创文章发布于微信公众号：Modeng。关注并回复 「前端书籍」百本经典技术书籍免费领取，你懂的！

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有