模板语法
Vue.js使用了基于HTML的模板语法，允许开发者申明式地将DOM绑定至底层Vue实例的数据，所有的模板都是合法的HTML，所以能被遵循规范的浏览器和HTML解析。
在底层的实现上，Vue将模板编译成虚拟DOM渲染函数，结合响应系统，Vue能够智能地计算出最少需要重新渲染多少组件，并把DOM的操作次数减到最少。从一定层面上提高了DOM的操作效率。
插值
#文本
数据绑定最常用的形式就是使用“Mustache”语法（双括号）的文本差值：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<script src="vue.js"></script>
</head>
<body>
<div id='app'>
{{msg}}
<!-- 采用左右双大括号的方式实现文本差值 -->
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app', //为重要的属性之一，元素。采用id选择器指向app
data: {
msg:'hi vue!',
}
})
</script>
</body>
</html>
用v-once的命令可以实现一次性差值的处理。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<script src="vue.js"></script>
</head>
<body>
<div id='app' v-once>
{{msg}}
<!-- 采用左右双大括号的方式实现文本差值 -->
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app', //为重要的属性之一，元素。采用id选择器指向app
data: {
msg:'hi vue!',
}
})
vm.msg = 'change'; //在v-once的命令下，视图中的值不会发生改变！
</script>
</body>
</html>
#原始HTML
双大括号会将数据解释为普通文本，而非HTML代码，你需要使用v-html指令：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<script src="vue.js"></script>
</head>
<body>
<div id='app' v-once>
<p>Using mustaches:{{rawHtml}} </p>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data: {
rawHtml:'<span style="color:red">this is should be red </span>'
}
})
</script>
</body>
</html>
其的结果将输出一串文本字符串：
若想输出的为html元素而不是如上的文本，可是使用v-html对其进行修改，其需添加在标签下,在这里我们将它加在p标签下：
<div id='app' v-once>
<p v-html="rawHtml">Using mustaches:{{rawHtml}} </p>
</div>
即可将其转换为html标记语言，其的输出结果如下：
#特性
Mustache语法不能作用在HTML特性上，此时可以使用v-bind命令。
其的格式为 v-bind：属性=“”，既可以动态的添加某个是属性。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<script src="vue.js"></script>
</head>
<body>
<div id='app'>
<div v-bind:class="color">
test...
<!-- 语法：v-bind：属性="" -->
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data: {
color:"red",
}
})
vm.color = 'blue';
</script>
<style type="text/css">
.red{color:red;}
.blue{
color:blue;
font-size: 100px;
}
</style>
</body>
</html>
#使用javascript表达式
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<script src="vue.js"></script>
</head>
<body>
<div id='app'>
<p>{{number+1}}</p>
<!-- 运算 -->
<p>{{ok ? 'yes':'no'}}</p>
<!-- 三目运算 -->
<p>{{message.split('').reverse().join('')}}</p>
<!-- 较为复杂的函数运算 -->
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data: {
number:0,
ok: true,
message:'yang',
}
})
</script>
</body>
</html>
Vue.js可以完全支持javascript中的表达式。
