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。关注并回复 「1024」领取程序员大礼包