Vue.js 模板语法

本章节将详细介绍 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>

本章完，都是一些比较简单的知识分享，敬请下次的分享。