Vue.js框架快速入门简明教程（一）（模板语法和实例详解） _vue插值

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框架快速入门简明教程（一）（模板语法和实例详解）】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缩写
例如：