模板语法

Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

插值

$\color{blue}{文本}$
双大括号的文本插值：（msg为一个变量）

<span>插值文本是: {{ msg }}</span>

使用 $\color{green}{v-once指令}$ ，执行一次性插值（即当数据改变时，插值处的内容不会更新）

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

$\color{blue}{原始HTML}$
要输出HTML，需要使用 $\color{green}{v-html}$ 指令：

<p>html常量: {{ rawHtml }}</p>
<p>使用v-html指令: <span v-html="rawHtml"></span></p>

//属性申明代码
data() {
    return {
        rawHtml:"<span style='color:red'>我的span</span>",
      }
},

上述代码结果：

html常量: <span style='color:red'>我的span</span>
使用v-html指令:我的span

$\color{red}{注意：}$ 你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。

$\color{blue}{Attribute}$
模板语法不能作用在HTML的属性上，遇到这种情况应该使用 $\color{green}{v-bind}$ 指令：

动态绑定id

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

对于布尔 attribute (它们只要存在就意味着值为 true)，v-bind 工作起来略有不同，在这个例子中。
如果 isButtonDisabled 的值是 null、undefined或 false，则 disabled 属性甚至不会被包含在渲染出来的 <button> 元素中。

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

$\color{blue}{使用 JavaScript 表达式}$
除了绑定属性值，vue还提供了完全的js表达式支持：

{{ 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 } }}

指令

指令是带有 v-前缀的特殊属性，指令的职责是：当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。

<p v-if="seen">现在你看到我了</p>

//数据
data(){
  return{
      seen:true
  }
}

这里，v-if指令将根据表达式seen的值的真假来插入（移除）<p>元素。

$\color{blue}{参数}$
一些指令能够接受一个“参数”，在指令名称后用冒号表示。

例如：v-bind指令可以用于响应式地更新HTML 的属性

<a v-bind:href="url">这是个链接</a>

例如：v-on指令，用于监听DOM事件

<a v-on:click="doSomething">点击事件</a>

$\color{blue}{动态参数}$

$\color{orange}{2.6.0 新增}$
从 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数：

<!--
注意，参数表达式的写法存在一些约束，如之后的“对动态参数表达式的约束”章节所述。
-->
<a v-bind:[attributeName]="url"> ... </a>

这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。
例如，如果你的 Vue 实例有一个 data property attributeName，其值为 href，那么这个绑定将等价于v-bind:href。

同时，可以使用动态参数为一个动态的事件名绑定处理函数：

<a v-on:[eventName]="doSomething"> ... </a>

在这个示例中，当 eventName 的值为 "focus" 时，v-on:[eventName] 将等价于 v-on:focus。

$\color{blue}{修饰符}$
修饰符是以半角句号 $\color{red}{.}$ 指明的特殊后缀，用于支出一个指令应该以特殊方式绑定。

例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

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

缩写

v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的 attribute。当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时，v- 前缀很有帮助，然而，对于一些频繁用到的指令来说，就会感到使用繁琐。

$\color{blue}{v-bind缩写}$

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>

$\color{blue}{v-on缩写}$

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

模板语法

模板语法

插值

指令

缩写

推荐阅读更多精彩内容