概述
Vue.js使用了基于HTML的模版语法，允许开发者声明式地将DOM绑定至底层Vue实例的数据。
Vue示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello Vue.js</title>
</head>
<body>
<!-- view -->
<div id="app">
<!-- 简单的文本插值 -->
<p>{{message}}</p>
<!-- 使用JavaScript表达式 -->
<p>{{message.toUpperCase()}}</p>
<!-- 以普通文本形式输出HTML代码 -->
<p>{{spanHtml}}</p>
<!-- 输出HTML代码 -->
<p v-html="spanHtml"></p>
<!-- 使用v-bind指令对HTML元素的属性进行绑定 -->
<a v-bind:href="url">新浪网</a>
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
message: "Hello Vue.js",
url: "http://www.sina.com.cn/",
spanHtml: "<span style='color : red'>HTML元素，以红色字体显示</span>"
}
})
</script>
</body>
</html>
Vue实例
在一个使用Vue.js框架的页面应用程序中，至少要创建一个Vue实例，语法为new Vue()，Vue实例充当了MVVM模式中的ViewModel。在创建Vue实例时，需要传入一个选项对象，该对象可以包含数据、方法、组件生命周期钩子等。
- 在上述代码示例中，将Vue实例赋给了变量vm，在实际开发中并不需要如此，这里只是为了便于后面内容的讲解
在选项对象中，通过el属性绑定要渲染的View，el: '#app'表示该Vue实例将挂载到<div id="app">...</div>这个元素；data属性指定一个Model，所有的数据都在该数据对象中定义。
除了使用el属性指定Vue实例要挂载的元素外，还可以使用vm.$mount()方法手动挂载Vue实例
使用vm.$mount()方法返回实例本身
var vm = new Vue({...})
vm.$mount('#app')
// 或者
var vm = new Vue({...}).$mount('#app')
定义了Vue实例后，就可以通过插值来进行数据绑定了。
插值
数据绑定最常见的形式就是使用Mustache语法（双花括号）的文本插值。
Mustache标签会被替换为Vue实例中数据对象上的属性值。当绑定的数据对象的值发生变化，插值处的内容就会被更新。
使用Chrome浏览器，查看上述代码，结果显示如下图：
切换到Console窗口，输入vm.message = "welcome you"，执行后内容发生同步更新，结果显示如下图：
如果绑定的数据中包含HTML代码，那么使用Mustache语法（双花括号）将把HTML代码以普通文本的方式进行输出，也就是说，Vue内部对HTML代码进行了字符转移。例如上述代码中，在数据对象中定义了spanHtml属性，其值是一段HTML代码，因此在页面渲染{{spanHtml}}时会直接输出HTML代码。
如果要输出真正的HTML代码，以便浏览器能够正常解析，需要使用v-html指令。——关于指令，可以参考“Vue学习——指令(一)”这一系列
Mustache语法不能作用于HTML元素的属性上，要解决HTML元素属性值的绑定问题，需要使用v-bind指令。
使用v-bind指令将url属性和<a>元素的href属性进行了绑定。因此可以在Chrome浏览器的控制台窗口中改变url的值。
除了绑定简单的属性值外，对于所有的数据绑定，Vue.js还提供了完全的JavaScript表达式支持。
这些表达式会在所属Vue实例的数据作用域下作为JavaScript被解析。但是要注意的是，每个绑定都只能包含单个表达式
在插值语法中使用JavaScript表达式示例
<!-- 以下表达式可以正常使用 -->
{{a + b}}
{{isLogin ? username : 'not login'}}
{{message.split('').reverse().join('')}}
<div v-bind:id="'list-' + id"></div>
<!-- 以下情况不会生效 -->
<!-- 这是语句，不是表达式 -->
{{var a = 1}}
<!-- if语句也不会失效，可以使用三元表达式来代替 -->
{{if (ok) {return message} }}
