非常教程

Vue 2参考手册

指南 | Guide

4. Template Syntax(模板的语法)

Vue.js使用基于HTML的模板语法,允许您声明性地将渲染的DOM绑定到底层Vue实例的数据。所有Vue.js模板都是有效的HTML,可以通过符合规范的浏览器和HTML解析器进行解析。

引擎盖下,Vue将模板编译成虚拟DOM渲染函数。结合反应性系统,Vue能够智能地找出最少量的组件,以便在应用程序状态更改时重新呈现并应用最少量的DOM操作。

如果您熟悉虚拟DOM概念并喜欢JavaScript的原始力量,那么您还可以直接编写渲染函数而不是模板,并提供可选的JSX支持。

插补

文本

数据绑定的最基本形式是使用“Mustache”语法(双花括号)的文本插值:

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

胡须标签将被替换msg为相应数据对象上的属性值。只要数据对象的msg属性发生变化,它也会被更新。

您也可以使用v-once指令执行不更新数据更改的一次性插值,但请记住,这也会影响同一节点上的任何绑定:

<span v-once>This will never change: {{ msg }}</span>

原始HTML

double mustaches将数据解释为纯文本而不是HTML。为了输出真实的HTML,你需要使用v-html指令:

<div v-html="rawHtml"></div>

这些div的内容将被替换为rawHtml属性的值,被解释为普通的HTML - 数据绑定被忽略。请注意,您不能用v-html编写模板部分,因为Vue不是基于字符串的模板引擎。相反,组件被优先用作UI重用和组合的基本单元。

在您的网站上动态呈现任意HTML可能非常危险,因为它可能很容易导致XSS漏洞。只对受信任的内容使用HTML插值,而不要使用用户提供的内容。

属性

Mustaches不能在HTML属性中使用,而是使用v-bind指令:

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

它也适用于布尔属性 - 如果条件评估为虚假值,则该属性将被删除:

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

使用JavaScript表达式

到目前为止,我们只在我们的模板中绑定了简单的属性键。但是Vue.js实际上支持所有数据绑定中JavaScript表达式的全部功能:

{{ number + 1 }}

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

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

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

这些表达式将在所有者Vue实例的数据范围内评估为JavaScript。一个限制是每个绑定只能包含一个单一的表达,所以下面将工作:

<!-- this is a statement, not an expression: -->
{{ var a = 1 }}

<!-- flow control won't work either, use ternary expressions -->
{{ if (ok) { return message } }}

模板表达式是沙盒,只能访问诸如Math和的全局列表白名单Date。您不应该尝试访问模板表达式中的用户定义全局变量。

指令

指令是具有v-前缀的特殊属性。指令属性值应该是一个单独的JavaScript表达式(除了v-for后面将讨论的例外)。指令的工作是在其表达式的值发生变化时,对DOM反应性地应用副作用。我们来回顾一下我们在引言中看到的例子:

<p v-if="seen">Now you see me</p>

在这里,v-if指令会根据表达式 seen 值的真实性去除/插入元素<p>

参数

一些指令可以接受一个“参数”,在指令名称后面用冒号表示。例如,该v-bind指令用于反应性地更新HTML属性:

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

在这里href是参数,它告诉v-bind指令将元素的href属性绑定到表达式的url值。

另一个例子是v-on监听DOM事件的指令:

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

这里的参数是要听的事件名称。我们也会更详细地讨论事件处理。

修饰符

修饰符是用点表示的特殊后缀,表示应该以某种特殊方式绑定指令。例如,.prevent修饰符告诉v-on指令调用event.preventDefault()触发事件:

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

当我们探究这些功能时,稍后您将看到修饰符的其他关于v-onv-model的例子。

速记

v-前缀作为在你的模板识别Vue的特定属性的视觉线索。当您使用Vue.js将动态行为应用于某些现有标记时,这很有用,但对于某些常用指令可能会感到冗长。同时,需要对v-当你构建一个前缀变得不那么重要的SPA,其中Vue.js管理每个模板。因此,Vue.js为两个最常用的指令提供了特殊的简写:v-bind以及v-on

v-bind 速记

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

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

v-on 速记

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

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

他们可能看起来正常的HTML有点不同,但:@是属性名称的有效字符和所有Vue.js支持的浏览器能够正确地解析它。另外,它们不会出现在最终的渲染标记中。简写语法是完全可选的,但当您稍后了解其用法时,您可能会很感激它。

Vue 2

Vue.js 是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

主页 https://vuejs.org/
源码 https://github.com/vuejs/vue
版本 2
发布版本 2.5.2

Vue 2目录