Vue2.5笔记：Vue中的模版

六小登登

发布于 2018-10-11 15:57:24

4910

发布于 2018-10-11 15:57:24

文章被收录于专栏：Modeng的专栏

我们在上一篇说到如何把 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>