Vue学习（三）模板语法

模板语法

插值

文本

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

<div id="app">message:{{message}}</div>

Mustache标签将会被替代为对应数据对象上msg property的值。只要数据对象上msgproperty发生了改变，插值内容也会实时更新

通过使用v-once可以执行一次性插值，当数据改变时，插值处内容不会更新。但这会影响到该节点上的其它数据的绑定。

<!-- 这个不会发生改变 -->
<div id="app" v-once>message:{{message}}</div>

原始HTML

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

html：

    <div id="app">
      <div>message:{{message}}</div>
      <div>message:<span v-html="message"></span></div>
    </div>

js：

      var data = { message: `<span style="color:red">这是红色的字</span>` };
      var vm = new Vue({
        el: "#app",
        data: data,
      });

span内容将会被替换成为property值message，直接作为HTML–会忽略解析property值中的数据绑定。

Attribute

Mustache语法不能作用在HTML attribute上，遇到这种情况应该使用v-bind指令：

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

对于布尔attribute（它们只要存在就意味着值为true），v-bind工作起来略有不同，在这个例子中：

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

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

使用Javascript

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

{{ number + 1 }}

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

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

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

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。

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

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}

<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

指令

指令是带有v-前缀的特殊attribute。指令attribute的值预期是单个 JavaScript 表达式 (v-for 是例外情况)，指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

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

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

参数

一些指令能够接受一个"参数"，在指令名称之后用冒号表示。

例如，v-bind指令可以用于响应式地更新HTML attribute：

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

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

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

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

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

动态参数

从2.6.0开始，可以用方括号括起来的Javascript表达式作为一个指令的参数：

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

这里的attributeName会被作为一个Javascript表达式进行动态求值，求得的值将会作为最终的参数来使用。例如，如果你的 Vue 实例有一个 data property attributeName，其值为 "href"，那么这个绑定将等价于 v-bind:href。

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

<a v-on:[eventName]="doSomething"> ... </a>

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

对动态参数的值的约束

动态参数预期求出一个字符串，异常状况下的值为null，这个特殊的null值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。

对动态参数表达式的约束

某些字符，空格和引号在HTML attribute里是无效的。例如：

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

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

在DOM中使用模板时（直接在一个HTML文件里撰写模板），还需要避免使用大写字符命名键名，因为浏览器会把attribute全部转化为小写。

<!--
在 DOM 中使用模板时这段代码会被转换为 `v-bind:[someattr]`。
除非在实例中有一个名为“someattr”的 property，否则代码不会工作。
-->
<a v-bind:[someAttr]="value"> ... </a>

修饰符

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

event.preventDefault():

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

缩写

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>