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-on
和v-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支持的浏览器能够正确地解析它。另外,它们不会出现在最终的渲染标记中。简写语法是完全可选的,但当您稍后了解其用法时,您可能会很感激它。
指南 | Guide相关
Vue.js 是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
主页 | https://vuejs.org/ |
源码 | https://github.com/vuejs/vue |
版本 | 2 |
发布版本 | 2.5.2 |