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

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有个新的认识。希望这篇文章可以带给你思考。