1.模板语法

在底层的实现上， Vue 将模板编译成虚拟 DOM 渲染函数。如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量，你也可以不用模板，直接写渲染（render）函数，使用可选的 JSX 语法。

1.1插值

#文本    数据绑定最常见的形式就是使用 “Mustache” 语法（双大括号）的文本插值：<span>Message: {{ msg }}</span>

#纯html     双大括号会将数据解释为纯文本，而非 HTML 。为了输出真正的 HTML ，你需要使用 v-html 指令。

#属性    Mustache 不能在 HTML 属性中使用，应使用 v-bind指令。

#js表达式   这里每个绑定都只能包含单个表达式。  

<!--合格的表达式-->

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
 
<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}
1.2指令
指令（Directives）是带有 v- 前缀的特殊属性。指令属性的值预期是单一 JavaScript 表达式（除了 v-for，之后再讨论）。指令的职责就是当其表达式的值改变时相应地将某些行为应用到 DOM 上。

#参数    一些指令能接受一个“参数”，在指令后以冒号指明。

#修饰符     修饰符（Modifiers）是以半角句号 . 指明的特殊后缀，用于指出一个指定应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()。

1.3 Filters

#过滤器     Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。Vue 2.x 中，过滤器只能在 mustache 绑定和 v-bind 表达式（从 2.1.0 开始支持）中使用，因为过滤器设计目的就是用于文本转换。为了在其他指令中实现更复杂的数据变换，你应该使用计算属性。

<!-- in mustaches -->
{{ message | capitalize }}
 
<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>
1.4缩写
#v-bind     
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
#v-on
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
 
<!-- 缩写 -->
<a @click="doSomething"></a>
2.计算属性
2.1.1基础例子
<div id="example">
　　{{ message.split('').reverse().join('') }}
</div>

在这种情况下，模板不再简单和清晰。这个问题在你不止一次反向显示 message 的时候变得更加糟糕。这就是为什么任何复杂逻辑，你都应当使用计算属性。

<!--html-->

<div id="example">
　　<p>Original message: "{{ message }}"</p>
　　<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
<!--js-->
var vm = new Vue({
　　el: '#example',
　　data: {
　　message: 'Hello'
　　},
　　computed: {
　　　　// a computed getter
　　　　reversedMessage: function () {
　　　　// `this` points to the vm instance
　　　　return this.message.split('').reverse().join('')
　　　　}
　　}
})
2.1.2计算缓存 vs Methods
你可能已经注意到我们可以通过调用表达式中的method来达到同样的效果：<p>Reversed message: "{{ reverseMessage() }}"</p>
// in component
methods: {
　　reverseMessage: function () {
　　　　return this.message.split('').reverse().join('')
　　}
}
对于最终的结果，两种方式确实是相同的。然而，不同的是计算属性是基于它的依赖缓存。相比而言，每当重新渲染的时候，method 调用总会执行函数。
2.1.3计算属性 vs WatchedProperty
Vue.js 提供了一个方法 $watch ，它用于观察 Vue 实例上的数据变动。不过，通常更好的办法是使用计算属性而不是一个命令式的 $watch 回调。
2.1.4计算setter
计算属性默认只有一个getter，也可以提供一个setter
// ...
computed: {
　　fullName: {
　　// getter
　　get: function () {
　　　　return this.firstName + ' ' + this.lastName
　　},
　　// setter
　　set: function (newValue) {
　　　　var names = newValue.split(' ')
　　　　this.firstName = names[0]
　　　　this.lastName = names[names.length - 1]
　　　　}
　　}
}
2.2观察Watchers
虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的 watcher 。这是为什么 Vue 提供一个更通用的方法通过watch 选项，来响应数据的变化。当你想要在数据变化响应时，执行异步操作或开销较大的操作，这是很有用的。