vuejs官方文档之模板语法

vuejs使用了基于html的模板语法，允许开发者声明式的将dom绑定至底层vue实例的数据。所有vuejs的模板都是合法的html，所以能被遵循规范的浏览器和html解析器解析。

在底层的实现上，vue将模板编译成虚拟dom渲染函数，结合相应系统，vue能够智能的计算出最少需要重新渲染多少组件，并把dom操作次数减到最少。

如果你熟悉虚拟dom并且偏爱javascript的原始力量，你也可以不用模板，直接写渲染（render）函数，使用可选jsx语法。

插值

本文

数据绑定最常见的形式就是使用“mustache”语法（双大括号）的文本插值：

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

mustache标签将会被替代为对应数据对象上msg属性的值。无论何时，绑定的数据对象上msg属性发生了改变，插值处的内容都会更新。

通过使用v-once治理你，你也能执行一次性的差值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其他数据绑定：

<span v-once>这个将不会改变：{{msg}}</span>

原始html

双大括号会将数据解释为普通文本，而非html代码。为了输出真正的html，你需要使用v-html指令：

<div id="app-6">

<p>Using mustaches: {{ rawHtml }}</p>

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

</div>

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>

 

<script>

var app6 = new Vue({

el: '#app-6',

data: {

rawHtml: '<span style="color:red"> this is Vue!'

}

})

</script>

 

 

 这个span的内容将会被替代成为属性值rawhtml，直接作为html——会忽略解析属性值中的数据绑定。注意，你不能使用哦v-html来复合局部模板，因为vue不是基于字符串的模板引擎。

反之对于用户界面，组件更适合作为可重用和可组合的基本单位。

你的站点上动态渲染的任意html可能会非常危险，因为他很容易导致xss攻击。请只对可信内容使用html插值，绝不要对用户提供的内容使用插值。

特性

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表达式

迄今为止，在我们的模板中，我们一直都只绑定简单的属性键值。但实际上，对于所有的数据绑定，vuejs都提供了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为现有标签添加动态行为时，v-前缀很有帮助，然而，对于一些频繁用到的指令来说，就会感到使用繁琐。同时，在构建有vuejs管理所有模板的单页面应用程序（spa-single page application）时，v-前缀也变得没那么重要了。因为，vuejs为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>

 

他们看起可能与普通的html虐有不同，但：与@对于特姓名来说都是合法字符，所以支持vue.js的浏览器都