Skip to content

模板语法

插值

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

1
<span>Message: {{ msg }}</span>

Mustache 标签将会被替代为对应数据对象上 msg 属性的值。无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令：

1
2
<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<div id="app">
    <div>{{ name }}</div>
    <div v-text="name"></div>
    <div v-html="name"></div>
    <div>{{ name2 }}</div>
    <div v-text="name2"></div>
    <div v-html="name2"></div>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            name: "nocilantro",
            name2: "<h1>nocilantro</h1>"
        }
    })
</script>

对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<div id="app">
    <div>{{ name + ' hhh' }}</div>
    <div v-text="name + ' hhh'"></div>
    <div v-html="name"></div>
    <div>{{ name2 }}</div>
    <div v-text="name2"></div>
    <div v-html="name2 + ' wulalala'"></div>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            name: "nocilantro",
            name2: "<h1>nocilantro</h1>"
        }
    })
</script>

指令

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML 特性：

1
<a v-bind:href="url">...</a>

在这里 href 是参数，告知 v-bind 指令将该元素的 href 特性与表达式 url 的值绑定。

另一个例子是 v-on 指令，它用于监听 DOM 事件：

1
<a v-on:click="doSomething">...</a>

缩写

1
2
3
4
5
<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

1
2
3
4
5
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>