Vue 模板语法

如果你熟悉虚拟DOM并且偏爱JavaScript的原始力量, 也可以不用模块, 直接写渲染函数, 使用可选的JSX语法.

1. 插值

(1) 文本

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

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

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

通过v-once指令, 也能执行一次性地插值, 当数据改变时, 据条件需处的内容不会更新.

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

(2) 原始HTML

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

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

但注意, 动态渲染任意html可能会非常危险, 因为它很容易导致xss攻击.

(3) 特性

mustache语法不能作用于html特性上, 遇到这种情况应该使用v-bind指令:

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

对于布尔特性, v-bind工作起来略有不同

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

如果isButtonDisabled的值是null, undefined或false, 则disabled特性甚至不会被包含在渲染出来的<button>元素中.

(4) 使用JavaScript表达式

{{ number + 1 }}

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

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

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

这些表达式会在所属Vue实例的数据作用域下作为JavaScript被解析, 有个限制就是, 每个绑定都只能包含单个表达式.

2. 指令

指令是带有v-前缀的特殊特性, 指令的职责是, 当表达式的值改变时, 将其产生的连带影响, 响应式地作用于DOM.

(1) 参数

一些指令能够接收一个"参数", 在指令名称之后以冒号表示.

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

(2) 动态参数

可以用方括号括起来的JavaScript表达式作为一个指令的参数:

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

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

(3) 修饰符

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

3. 缩写

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

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

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

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