Vue3之模板语法

Vue.js使用基于HTML的模板语法，允许开发者声名式地将DOM绑定至底层组件实例的数据。所有Vue.js的模板都是合法的HTML，所以能被遵循规范的浏览器和HTML解析器解析。
在底层的实现上，Vue将模板编译成虚拟DOM渲染函数。结合响应性系统，Vue能够智能地计算出最少需要重新渲染多少组件，并把DOM操作次数减到最少。

插值

文本

最常见的数据绑定形式就是使用文本插值“Mustache”:

<span>Message: {{ msg }}</span>
复制代码

Mustache标签将会被替代为对应组件实例中msgproperty的值，另外，msgproperty只要发生了改变，插值处的内容也会随着更新。
如果你只想执行一次插值，当数据改变时，插值处的内容想再被更新时，可以使用v-once指令。但是需要注意这样会影响到该节点上的其他数据绑定：

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

原始HTML

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

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

Attribute

HTML attribute，可以使用v-bind指令：

<div v-bind:id="dynamicId"></div>
复制代码

如果绑定的值是null或undefined，那么该attribute将不会被包含在渲染的元素上。

使用JavaScript表达式

在模板中，Vue.js都提供了完全的JavaScript表达式支持。

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

这些表达式会在当前活动实例的数据作用域下作为JavaScript被解析。有个限制就是，每个绑定都只能包含单个表达式，下面的例子都不会生效：

<!-- 这是语句，不是表达式：-->
{{ var a = 1 }}

<!-- 流程控制也不会生效，请使用三元表达式 -->
{{ if(ok) { return message }}}
复制代码

指令

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

参数

有的指令能够接受一个“参数”，在指令名称后面以冒号表示。

<a v-bind:href="url">...</a>
复制代码

在这里href是参数，告知v-bind指令将该元素的hrefattribute与表达式url的值绑定。
另一个是用于监听DOM事件的v-on指令：

<a v-on:click="doSomething">...</a>
复制代码

动态参数

用方括号括起来，在指令参数中使用JavaScript表达式：

<a v-bind:[attributeName]="url"> ... </a>
复制代码

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

<a v-on:[eventName]="doSomething"> ... </a>
复制代码

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

缩写

v-bind缩写

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

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

<!-- 动态参数的缩写 -->
<a :[key]="url"> ... </a>
复制代码

v-on缩写

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

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

<!-- 动态参数的缩写 -->
<a @[event]="doSomething"> ... </a>
复制代码

注意事项

对动态参数值约定

动态参数预期会求出一个字符串，当动态参数为null时，会被显性的移除绑定，另外，任何其他非字符串类型值都将会触发一个警告。

对动态参数表达式约定

动态参数表达式有一些语法约束，因为某些字符，如空格和引号，放在HTML attribute名里是无效的。例如：

<!-- 这会触发一个编译警告 -->
<a v-bind:['foo' + bar]="value"> ... </a>
复制代码

解决的办法是使用没有空格或引号的表达式，或用计算属性替代这种复杂表达式。

JavaScript表达式

模板表达式都放在沙盒中，只能访问一个受限列表，如Math和Date。你不应该在模板表达式中试图访问用户定义的全局变量。