2-Vue-模板语法

二、模板语法

插值

文本

最常见的就是双括号进行文本插值，其实就是 Mustache 语法。

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

而我们这个标签很会被替代为对应数据对象上 msg property 的值，绑定的数据对象上 msg property 发生了改变，插值处的内容都会更新。

当然这里我们可以使用 v-once 指令，也能执行一次性插值，当数据改变时，插值处的内容不会更新

<span v-once>这个将不会改变：{{ msg }}</span>

原始 HTML

我们的双大括号会将里面的数据解释为普通文本，而不是 HTML 代码，所以如果想要真正的 html 代码，我们需要使用 v-html 指令。

<p>
    Using mustaches: {{ rawHtml}}
</p>

<p>
    Using v-html directive: <span v-html="rawHtml"></span>
</p>

Attribute

由于 Mustache 语法不能作用在 HTML attribute 上，这个时候应该使用 v-bind 指令。

<div v-bind:id="dynamicId">
    
</div>

但是对于布尔型 attribute，只要存在就意味着值为 true，所以 v-bind 的用法会有些不同

<button v-bind:disabled="isButtonDisabled">
    Button
</button>

// 如果 isButtonDisbled 的值是 null、undefined 或 false，则 disabled attribute 甚至不会被包含在渲染出来的 button 元素中。

使用 JS 表达式

在我们的模板中，我们一直都只绑定简单的 property 键值。但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。

比如说下面这些：

{{ number + 1 }}

{{ ok ? 'YES' : 'NO'}}

{{ message.split('').reverse().join('')}}

<div v-bind:id="'list-' + id">
    
</div>

有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

{{ var a = 1 }}

{{ if (ok) {return message} }}

指令

参数

一个指令能够接收一个 参数，在指令名称之后以冒号表示。例如：v-bind 指令可以响应式的更新 HTML attribute

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

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

再比如： v-on 指令，用于监听 DOM 事件

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

参数是监听的事件名。

动态参数

动态参数表达式有一些语法约束，因为某些字符，如空格和引号，放在 HTML attribute 名里是无效的。例如：

<!-- 这会触发一个编译警告 -->
<a v-bind:['foo' + bar]="value"> ... </a>

// 变通的办法是使用没有空格或引号的表达式，或用计算属性替代这种复杂表达式。

修饰符

修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

<form v-on:submit.prevent="onSubmit">
    ...
</form>

缩写

v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的 attribute。

v-bind 缩写

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

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

<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>

v-on 缩写

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

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

<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>