Vue学习3（模板语法）

Vue.js使用了基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层Vue实例的数据。所有的Vue.js都是合法的HTML，所以能被遵循规范的浏览器和HTML解析器解析。
在底层的实现上，Vue将模板编译成虚拟DOM函数。结合响应系统，在应用状态改变时，Vue能够智能的计算出重新渲染组件的最小代价并应用到DOM上。
插值

---

文本

数据绑定最常见的形式就是使用“Mustache”语法（双大括号）的文本插值：

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

<div id="app">
    <span>Message: {{msg}}</span>
</div>
var app = new Vue({
    el: '#app',
    data: {
        msg: 'Hello Vue.js'
    }
})

Mustche标签将会被替代为对象数据对象上msg属性的值。无论何时，数据中的msg属性发生改变，插值处的内容就会更新。
通过使用v-once指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上所有数据的绑定。

<span v-once>这个值将不会改变：{{msg}}</span>

纯HTML

---

双大括号会将数据解析为纯文本，而非HTML。为了输出真正的HTML，你需要使用

v-html

指令。

<div id="app" v-html="message">

</div>

var app = new Vue({
    el: '#app',
    data: {
        message:<h1>Hello Vue</h1>"
    }
})

这个div的内容将被替代成属性值message，直接作为HTML–会忽略解析属性值中的数据绑定。注意：你不能使用v-html来符合局部模板，因为Vue不是基于字符串的模板引擎。反之，对于用户界面（UI），组件更适合作为可重用和可组合的基本单位。
特性

---

mustache语法不能用在HTML特性上，遇到这种情况应该用v-bind指令：

<div v-bind:id="dynamicId"></div>

这同样适合布尔类型特性，如果求值是false的值，则该特性将会被删除：

<button v-bind:disabled="isButtonDisabled">Button</button>

使用Javascript表达式
迄今为止，在我们的模板中，我们一直都只绑定简单的属性键值。但实际上，对于所有的数据绑定，Vue.js都提供了完全的javascrit表达式支持。

{{ number+1}}
{{ ok?Yes:No}}
{{ message.split('').reverse().join('')}}
<div v-bind:id=" 'list-' + id"></div>

这些表达式会在所属Vue实例的数据作用域下作为javascript被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效

//这是语句，不是表达式
{{ var a = 1 }}

流控制也不会生效，请用三元表达式
{{ if(ok){return message }}}