Vue.js的模版语法是基于HTML的模版语法，允许开发者将声明了的DOM绑定到vue.js底层并渲染DOM结构。这篇文章让我们结合例子更加深入学习vue.js的模版语法内容。
一. 插值
1、插入文本
Vue.js最常用的是{{…}}大括号的形式进行文本插值。
实例：由于绑定了message字段，最终显示出来的信息是data里面对应message信息，html显示文本随message变化而变化。
<div id="app">
<p>{{message}}</p>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
message: 'hello world!'
}
})
</script>
2、插入HTML
Html只是本文的另外一种表达形式，既然可以绑定文本，那同行也可以绑定html，vue.js中用到v-html指令来标示绑定的是html格式的文本。
<p v-html="message"></p>
data: {
message: '<p>亲，上午好</p>'
}
3、插入属性
Vue.js指令以 v- 前缀标示，属性绑定的指令 v-bind:属性名, 简写为 :属性名。
简单的数据绑定是如下：直接绑定字符串
<p v-bind:class="'bg'">{{message}}</p>
虽然v-bind:class 支持string类型，但是vue.js不建议这样使用，因为string值是固定不变的，无法实现动态改变class的需求。 v-bind:class 支持数据变量，当变量值改变时，将同时更新class。v-bind:class指令的值限定为绑定表达式，如javascript表达式。
<p v-bind:class="bg">{{message}}</p>
<script>
new Vue({
el: '#app',
data: {
message: 'vue.js绑定属性',
bg:'bg-a'
}
})
</script>
同样的道理，既然v-bind:class指令绑定的可以是javascript表达式，那也可以是一个对象，一个数组。
4、插入表达式
Vue.js 的核心是一个响应的数据绑定系统，因此Vue.js 都提供了完全的 JavaScript 表达式支持。
例如：
<p :class="classA ? 'class-a' : 'class-b' ">{{5*3}}</p>
二. 指令
在vue.js的语法中，使用v-作为前缀的指令属性，执行vue.js中的特殊命令。指令用于在表达式的值改变时，将某些行为应用到 DOM 上。
<p v-show="seen">{{message}}</p>
<script>
new Vue({
el: '#app',
data: {
message: 'vue.js绑定属性',
seen:false
}
})
</script>
1、参数
参数在指令后以冒号指明，用于指明vue.js操作的是哪个DOM操作，以响应地更新 HTML。
例如：属性的绑定
<p v-bind:class="bg">{{message}}</p>2、修饰符
Vue.js修饰符是以半角句号 “.” 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。Vue.js的修饰符可以归纳为有“事件修饰符”和“按键修饰符”
例如：
<!-- 阻止单击事件doThis -->
<a v-on:click.stop="doThis"></a>
<!-- 修饰符可以串联-->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 按键修饰符-->
<input v-on:keyup.13="submit">
三. 用户输入
Vue.js可以通过input输入框和v-model异步双向数据绑定。
例如：
<p>{{ message }}</p>
<input v-model="message">
当v-model中有输入的时候，p标签中及时更新数据，当p标签中定义了数据时，v-model的值也是p中定义的数据，这就是vue.js的双向数据绑定。v-model 指令用来在表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。
四. 过滤器
Vue.js过滤器用于双花括号插值和v-bind表达式中。过滤器其实是一个函数名，接收前面的返回值进行相应的操作，过滤器是可以叠加的。比如：
<div id="app">
{{ message | capitalize }}
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'vue.js过滤器'
},
filters: {
capitalize: function (value) {
if (!value) return ''
return "1212"
}
}
})
</script>
过滤器函数接收的第一个值，本例中是message，后面过滤器接收前面过滤器的返回值。过滤器接受前面的返回的值后执行函数capitalize 。capitalize 是个带参函数，参数就是message的返回值。本例中的结果是把字符串装换位数字。
五. 缩写
Vue.js 为两个最为常用的指令提供了特别的缩写，分别是v-bind缩写
和v-on缩写，在同时进行多个绑定时改写成缩写的形式显得简洁和避免发生冲突。
1、v-bind缩写
例如：
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
2、v-on缩写
例如：
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>
以上就是vue.js前端框架中的模版语法的详细教程了解析，在整理这份教程的过程中我也重新学习了很多，对vue.js有个新的认识。希望这篇文章可以带给你思考。
