本章节将详细介绍 Vue.js 模板语法，如果对 HTML +Css +JavaScript 有一定的了解，学习起来将信手拈来。
Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。在底层的实现上， Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。
插值
文本
文本插值是最常见的一种数据绑定方式，语法是使用双括号（Mustache）将变量包含。
实例
<div id="app">
<p>{{ message }}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello World! Vue'
}
})
</script>
上述 HTML 代码中的 message 与 script 中 data 的 message 属性绑定，两者数据同步，当我们更新data中对应的属性值时，无需操作 HTML，页面会自动更新数据。
我们也可以使用 v-once 指令，表示只执行一次插值，后面如果数据有改变，插值将不会更新。
实例
<div id="app">
<p v-once>{{ message }}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello World! Vue'
}
})
</script>
HTML
输出 HTML 代码，可以使用 v-html 指令。
实例
<div id="app">
<p v-once>{{ message }}</p>
<p v-html="html"></p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello World! 欢迎学习Vue',
html:'<font color="red">这是我的标题</font>'
}
})
</script>
上述代码会将 message 中的值作为 HTML 元素插入 <p></p> 中
注意：在页面上动态的渲染html是一件很危险的事情，因为它很容易导致 XSS 攻击 (跨站脚本攻击)。 在vue的官方文档也有说明这一点
属性
要给 HTML 元素绑定属性，不能直接使用文本插值，vue 有特定的指令 【v-bind】进行属性的绑定。
实例
<div id="app">
<h2 v-bind:class="value">v-bind</h2>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
value: "bind"
}
})
</script>
上述代码中，我们为 h2 标签添加了一个 class=“bind” 的属性。
属性的插值使用比较频繁，所以vue也提供了该指令的简写【:】，一个冒号，效果跟使用【v-bind:】一样。
实例
<div id="app">
<h2 v-bind:id="id" :class="v_class" :title="v_title">vue 多属性绑定</h2>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
id:"test_id",
v_class: "v_class",
v_title:"vue 的v-bind多属性绑定"
}
})
</script>
JavaScript 表达式
上述介绍的几种插值方式都是简单的键值绑定，但在实际开发中，部分值要根据一些规则进行处理，这时候可以使用 JavaScript 表达式来实现。
实例
<div id="app">
<h2 v-bind:id="id" :class="v_class" :title="v_title">vue 多属性绑定</h2>
<!-- toLowerCase(),将字母转换为小写 -->
<h2>{{name.toLowerCase()}}</h2> <!--这里返回为pzkloveyou -->
</div>
<script>
var app = new Vue({
el: "#app",
data: {
id:"test_id",
v_class: "v_class",
v_title:"vue 的v-bind多属性绑定",
name:'PZKLOVEYOU'
}
})
</script>
上述代码在输出时把大写的 PZKLOVEYOU 转换成了小写的 pzkloveyou。
注意：使用 JavaScript 表达式进行运算时，只能使用单个表达式或者链式调用，不能使用语句。
指令
指令指的是带有【v-】前缀的特殊属性，在插值中，我们已经使用了【v-html】和【v-bind】这两个指令。可以看出，指令的职责是当表达式的值改变时，响应式地作用于 DOM。
参数
<a v-bind:href="url"></a>
上述代码中 href 就是【v-bind】指令的参数，告知【v-bind】指令将 href 属性和 url 的值绑定在一起。
修饰符
修饰符（Modifiers）是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
<form v-on:submit.prevent="onSubmit"></form>
上述代码中，.prevent 是一个修饰符，告诉【v-on】指令对于触发的事件调用 event.preventDefault()。
更多关于修饰符的知识我们将在后续章节学习。
过滤器
对于一些要经过复杂计算才显示的插值，简单的表达式可能无法满足，这时可以使用vue的过滤器进行处理。 过滤器在插值和【v-bind】指令中使用，格式如下：
<!-- 在两个大括号中 -->
{{ name | myfilters }}
<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>
实例
<div id="app">
<h2>{{name | myfilter}}</h2>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
name: "pzk"
},
filters: {
myfilter(value) {
return value.split('').reverse().join(''); //函数返回的是kzp
}
}
})
</script>
上述代码中定义了一个myfilters的过滤器，功能是将插值进行反转后输出。
多个过滤器可以串联使用，下面实例是在一个插值中使用了两个过滤器：
实例
<div id="app">
<p>{{name | myfilter}}</p>
<p>{{name | myfilter1 | touppercase}}</p>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
name: "pzk"
},
filters: {
myfilter(value) {
return value.split('').reverse().join(''); //函数返回的是kzp
},
myfilter1(value) {
return value.split('').reverse().join(''); //函数返回的是kzp 同上，在这里只是做一个小小的区别
},
touppercase(value) {
return value.toUpperCase(); //函数返回的是KZP 字母变成大写
}
}
})
</script>
上述代码中过滤器从左到右依次执行，先将插值反转，然后再转换成大写输出。
缩写
对于【v-on】和【v-bind】这两个最常使用的指令，vue提供了简写。
v-bind
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
v-on
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>
本章完，都是一些比较简单的知识分享，敬请下次的分享。