vue 模板语法

模板语法

Vue.js 容许开发者声明式地将DOM绑定至底层Vue实例的数据
在底层的实现上，Vue将模板编译成虚拟DOM渲染函数。结合响应系统，Vue可以只能地计算出最少须要从新玄滩多少组件，并把DOM操做次数减到最少

也可不用模板，直接写渲染（render）函数，使用可选的JSX语法

插值

---

**文本**
数据绑定: {{ }} > ` Message: {{ msg }} ` >
> // 不管什么时候，绑定的数据对象上的属性发生了改变，插值处的内容都会更新

• v-once指令，执行一次性的插值，当数据发生改变时，插值处的内筒不会更新。
  

原始HTML

• v-html指令，输出真正的HTML 例子：

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

复制代码

输出显示：

注意，不能使用v-html来符合局部模板，由于Vue不是基于字符串的模板引擎。
反之，对于用户界面（UI），组件更实用做为可重用和可组合的基本单位

你的站点上动态渲染的任意HTML可能会很是危险，由于它很容易致使XXS攻击。只对可信内容使用HTML插值，绝对不要对用户提供的内容使用插值

特性

模板表达式都被凡在沙盒中，只能访问全局变量的一个白名单，如Math和Date. 不该该在模板表达式中试图访问用户定义的全局变量

指令

---

指令（Directives）是带有` v-`前缀的特殊特性。指令特性的值预期是**单个JavaScript表达式**
` v-for`是例外状况

参数

一些指令可以接收一个“参数",在指令名称以后以冒号表示。

<a v-bind:href="url"> ...</a> 在这里href 是参数，告知v-bind指令将该元素的href特性与表达式url的值绑定。另外一个例子是v-on指令，它用于监听DOM事件： <a v-on:click="doFunction">...</a>

修饰符

修饰符（modifiers）是以半角句号.指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。 例如，.prevent修饰符告诉v-on指令对于触发的事件调用event.preventDefault():

<form v-on:submit.prevent="onSubmit">..</form>

缩写

---

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="onClick">...</a>

<!-- 缩写语法 -->
<a @click="onClick">...</a>

复制代码