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支持的浏览器能够正确地解析它。另外，它们不会出现在最终的渲染标记中。简写语法是完全可选的，但当您稍后了解其用法时，您可能会很感激它。
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
