昨天我们讲了Vue的一生，今天来说说模板语法，看看要怎麽把vue instance中的资料变化渲染到画面上，gogogo ─=≡Σ((( つ＞＜)つ

Vue使用模板语法就像变魔法一样，将我们的资料与画面连动在一起，让html像是活过来一样，可以响应各种 vue instance的变化，让我们在vue instance中的逻辑可以随心所欲的显现在页面上ଘ(੭ˊᵕˋ)੭* ੈ✩‧₊˚

模板语法 Template Syntax

Vue.js使用基於Html的模板语法，允许开发者将DOM绑定至底层vue instance中的数据。
Vue会将模板编译成虚拟DOM渲染函数，并结合响应式系统，能计算出最少需要重新渲染那些组件，并把DOM的操作减少到最少。

Vue模板语法共分为两种:插值、指令，我们今天先来讲插值的部分!!

插值 Interpolations

文本 Text

数据绑定最常见的形式是使用Mustache语法，也就是双大括弧{{ }}

<span>Message: {{ msg }}</span>

Mustache标签会对应msg property 的值，只要msg property有了改变，插值中的内容都会跟着更新。

<div id="app">
    <p>Message: {{ msg }}</p>
</div>

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

出来的结果会是

但当我们打上vm.$data.msg = 'change msg'
原本Hello Vue!的地方就会变成change msg

v-once

如果想要执行一次性的插值，可以使用v-once这个指令，当data内容更新时，插值处的内容不会跟着改变。

<div id="app">
    <p>这里的讯息会跟着变: {{ msg }}</p>
    <p v-once>这里的讯息不会改变: {{ msg }}</p>
</div>

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

执行结果

原始HTML (Raw HTML)

v-html

当我们使用双大括号{{ }}的时候，资料会以文本的方式被读出来，所以如果我们要输出HTML的话就要使用v-html。
我们来用范例看看差别吧!

<div id="app">
        <p>{{ html }}</p>
        <p v-html='html'></p>
</div>

<script>
     var vm = new Vue({
         el: '#app',
         data: {
             html:'<span style="color: red">This should be red.</span>'
         }
     });
</script>

我们可以看到第一个{{html}}读出来之後就是底下的那一大串字，而当当我们使用v-html时他才会读出我们真正要显示出的东西!

注意!若v-html後面本来就有文字，执行後两者没办法作合并，所以原本的内容会被取代掉。

这边多补充一个v-text，他出来的结果也是普通文本，但跟v-html一样会取代掉本来的文字。

所以三个里面只有双大括号不会把原本的内容取代掉，也可以作比较多的变化

<div id="app">
    <p>{{ html }}我是本来的文字</p>
    <p v-text='html'>我是本来的文字</p>
    <p v-html='html'>我是本来的文字</p>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            html:'<span style="color: red">This should be red.</span>'
        }
    });
</script>