Vue.js uses an HTML-based template syntax that allows developers to declaratively bind the DOM to the underlying Vue instance's data. All Vue.js templates are valid HTML, so they can be parsed by spec-compliant browsers and HTML parsers.
Under the hood, Vue compiles templates into virtual DOM rendering functions. Combined with the reactivity system, Vue can intelligently figure out how many components to re-render at least and minimize the number of DOM manipulations.
If you're familiar with virtual DOMs and prefer the raw power of JavaScript, you can also write render functions without templates , using the optional JSX syntax.
text
The most common form of data binding is text interpolation using "Mustache" syntax (double curly braces):
<span>Message: {{ msg }}</span>
|
The Mustache tag will be replaced with msg the value of the property on the corresponding data object. Whenever a msg property on the bound data object changes, the content at the interpolation is updated.
By using the v-once command , you can also perform one-shot interpolation, when the data changes, the content of the interpolation will not be updated. But be aware that this affects other data bindings on that node:
< span v-once > this will not change: {{ msg }} </ span > |
raw HTML
Double curly braces interpret the data as normal text, not HTML code. In order to output real HTML, you need to use the v-html directive:
<p>Using mustaches: {{ rawHtml }}</p> <p>Using v-html directive: <span v-html="rawHtml"></span></p> |
Using mustaches: <span style="color: red">This should be red.</span>
Using v-html directive: This should be red.
The span content of this will be replaced with the attribute value rawHtml, directly as HTML - ignoring the data binding in parsing the attribute value. Note that you cannot use v-html to composite partial templates, because Vue is not a string-based template engine. Conversely, for user interface (UI), components are better suited as reusable and composable basic units.
characteristic
Mustache 语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind 指令：
<div v-bind:id="dynamicId"></div>
|
在布尔特性的情况下，它们的存在即暗示为 true，v-bind 工作起来略有不同，在这个例子中：
<button v-bind:disabled="isButtonDisabled">Button</button>
|
如果 isButtonDisabled 的值是 null、undefined 或 false，则 disabled 特性甚至不会被包含在渲染出来的 <button> 元素中。
使用 JavaScript 表达式
迄今为止，在我们的模板中，我们一直都只绑定简单的属性键值。但实际上，对于所有的数据绑定，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 } }} |
模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 。你不应该在模板表达式中试图访问用户定义的全局变量。
指令
指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式(v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。回顾我们在介绍中看到的例子：
<p v-if="seen">现在你看到我了</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>
|
在这里参数是监听的事件名。我们也会更详细地讨论事件处理。
修饰符
修饰符 (Modifiers) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
<form v-on:submit.prevent="onSubmit">...</form>
|
在接下来对 v-on 和 v-for 等功能的探索中，你会看到修饰符的其它例子。
缩写
v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的特性。当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时，v- 前缀很有帮助，然而，对于一些频繁用到的指令来说，就会感到使用繁琐。同时，在构建由 Vue.js 管理所有模板的单页面应用程序 (SPA - single page application) 时，v- 前缀也变得没那么重要了。因此，Vue.js 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：
v-bind 缩写
<!-- 完整语法 --> <a v-bind:href="url">...</a> <!-- 缩写 --> <a :href="url">...</a> |
v-on 缩写
<!-- 完整语法 --> <a v-on:click="doSomething">...</a> <!-- 缩写 --> <a @click="doSomething">...</a> |
They may look slightly different from normal HTML, but : are @ legal characters for attribute names and parse correctly in all browsers that support Vue.js. Also, they don't appear in the final rendered markup. Abbreviation syntax is completely optional, but you'll be lucky to have them as you learn more about what they do.