Vue模板语法

插值

文本

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

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

无论何时，绑定的组件实例上msgproperty发生了改变，插值处的内容都会更新

通过使用v-once，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新

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

原始HTML

双大括号会将数据解释为普通文本，而非HTML代码。

为了输出真正的HTML，你需要使用v-html指令

<p>生成普通文本 {{rawHtml}}</p>
<p>生成真正的HTML <span v-html='rawHtml'></span></p>

Attribute

Mustache语法不能在HTML attribute 中使用，然后可以使用v-bind指令

<div v-bind:id = "dynamicId"></div>
<!--将div的id属性值与Vue的data的dynamicId绑定一起-->

使用JavaScript表达式

{{ number + 1 }}

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

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

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

指令

指令是带有v-前缀的特殊attribute

指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM

<p v-if='seen'>现在你看到我了</p>

这里，v-if指令将根据表达式seen的值的真假来插入/移除<p>元素

参数

一些指令能够接收一个“参数”，在指令名称之后以冒号表示

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

在这里herf是参数，v-bind指令将该元素hrefattribute与表达式url的值绑定

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

在这里参数是监听的事件名

动态参数

在指令参数中使用JavaScript表达式

<a v-bing:[attributeName]="url">...</a>

如果你的组件实例有一个data property attributeName,其值为herf,那么这个绑定将等价于v-bind:herf

这里的attributeName被作为一个JavaScript表达式进行动态求值，求得的值将会作为最终的参数来使用

同样的，你可以使用动态参数为一个动态的事件名绑定处理函数：

<a v-on:[eventName]='doSomethign'>....</a>

当eventName的值为focus时，v-on:[eventName]将等价于v-on:focus

修饰符

修饰符是以半角句号.指明的特殊后缀，用于指出一个指令一个以特殊方式绑定

.prevent修饰符告诉v-on指令对于触发的事件调用event.preventDefault:

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

缩写

v-bind缩写

<!--完整语法-->
<a v-bind:href="url">...</a>
<!--缩写-->
<a :href="url">...</a>
<!--动态参数缩写-->
<a :[key]="url">...</a>

v-on缩写

<!--完整语法-->
<a v-on:click="doSomething">...</a>
<!--缩写-->
<a @click = "doSomething">...</a>
<!--动态参数的缩写-->
<a @[event]="doSomething">...</a>

注意事项

对动态参数值约定

动态参数预期会求出一个字符串，null例外。这个特色的null值可以用于显式地移除绑定

任何其它非字符串类型的值都将会触发一个警告

对动态参数表达式约定

动态参数表达式有一些语法约束

某些字符，如空格和引号，放在HTML attribute 名里是无效的

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

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

在HTML文件里写模板的时候，还要避免使用大写字符来命名键名

因为浏览器会把attribute名全部强制转为小写:

<a v-bind:[someAttr]="value">...</a>
<!--它会被浏览器转换为v-bind:[someattr],除非在实例中有一个名为“someattr”的property，否则代码不会工作-->

JavaScript表达式

模板表达式都被放在沙盒中，只能访问一个受限的全局变量列表，如Maht和Date

你不应该在模板表达式中试图访问用户定义的全局变量