Vue | 04 模板语法

内容提要：

• 如何在HTML中插入值（包括插入纯文本、生成原生HTML、属性绑定v-bind、JavaScript表达式的使用）
• 指令（指令的表示方式、参数与修饰符的含义、写法、用法）
• 速记（速记的意义、使用场景、v-bind和v-on速记的写法）

---

Vue.js使用基于HTML的模板语法，该模板允许你将呈现的DOM绑定到Vue实例的数据之下。所有的Vue.js模板都对HTML有效，能够被遵守HTML规范的浏览器或HTML解析器解析。

在底层，Vue在虚拟DOM渲染函数里编辑模板。结合响应系统，当app的状态改变的时候，Vue能够智能的计算出最小的组件去重新渲染最终数量的DOM。

如果你熟悉虚拟DOM的原则和倾向于使用JavaScript的原生能力，你也能够直接写渲染函数 directly write render functions 来代替模板，使用可选的JSX支持。

插入值

文本

绑定文本的最基本形式是使用称为“Mustache”的两个花括号语法：

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

mustache标签将会被在data对象里面与msg一致的值替换。

v-once 指令不更新data的值

使用v-once指令执行一次插入值而不再执行数据的改变，但是在这个节点上的其他绑定也会受影响。

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

原生HTML—执行HTML标签

mustache标签以纯文本的形式解释数据，而不是HTML。为了输出HTML效果，需要使用v-html指令。

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

span的内容被rawHtml属性替换，被推断为HTML-数据绑定被忽略。注意不能使用v-html来编写模板语法，因为Vue不是一个基于字符串的模板引擎。相反，组件是UI复用和组合的基本单元。

在你的网站上随意动态渲染HTML是非常危险的，因为这容易导致 XSS vulnerabilities（简单点说就是容易被其它人动态注入脚本，使程序的安全性受到影响）。仅仅使用插入值可信任的内容而不要使用用户提供的内容。

属性

双括号语法不能用在HTML属性中使用。使用v-bind指令代替。

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

如果属性是一个布尔值，一般情况下true表示存在，v-bind稍稍有点不用,看一下这个例子：

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

if isButtonDisabled 的值为null,undefined or false ,disabled属性将不会被包含在渲染的元素中.即相当于没写这个属性。

使用JavaScript表达式

Vue不仅仅支持以属性key键的形式在模板中的简单绑定，而且，在所有的数据绑定中，支持强大的JavaScript表达式：

{{ number + 1 }}
{{ ok? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>

以上这些表达式将被看作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指令根据表达式的值是否为真，来删除/插入

元素。

参数

一些指令可以携带“参数”，用指令后面加冒号表示。如v-bind指令用于响应HTML属性的更新：

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

这里href是一个参数，它告诉v-bind指令把url表达式的值绑定到href属性。

另一个例子是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去应用动态行为给一些存在的标记的时候，它是有用的，但频繁的使用这些指令会让人觉得有点啰嗦。这时，当你构建 SPA （single-page application: Vue.js管理每一个模板）的时候，v-前缀的写法变简单是很必要的。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的浏览器都可以正确的解析它。另外，他们不会出现在最终被渲染的标记中。速记语法是可选的。