0x2 精读Vue官方文档 – 模板语法

精读 Vue 官方文档系列 ?

模板语法

Vue 模板采用了基于 HTML 的模板语法，底层会通过”渲染函数“将模板与响应式数据结合编译成”虚拟DOM“进行渲染。
如果你需要更自由灵活的模板能力，那么也可以不用 HTML 风格模板，而是直接编写”渲染函数(render)“，并且也可以使用可选的 JSX 语法。

例如一个标题插件，<heading level="3">Title text</heading> 如果使用模板加插槽(slot)的方式，那么便需要在模板中预先定义好 h1-h6 所有等级的标题与 slot 这种实现方式便显得模板非常不灵活。如果使用“渲染函数”的方式将带来无与伦比的灵活性，比如我们可以标签名是可以动态生成的 createElement('h' + level, this.$slot.default)。

插值

”插值“就是数据的输出，Vue 中将其称之为”数据绑定“，形象的理解就是把响应式数据输出到模板中进行展示。
Vue 中的插值采用的是 Mustache 语法(双大括号)风格，插值最终输出的结果一定是文本字符类型（虽然插值语法支持执行一些表达式，但结果总是文本类型）。

<p> {{msg.info}}</p>
复制代码

通过使用 v-once 指令，可以控制插值只执行一次(当响应式数据改变时，插值处的内容不会更新)。

<p v-once> {{msg.info}}</p>
<h3>{{msg.info}}</h3>
复制代码

原始HTML

插值表达式总是将内容作为普通文本输出，而非 HTML 代码，如果需要输出 HTML 代码，可以使用 v-html 指令：

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

为了防止 XSS 攻击，绝不要 使用该指令来输出用户提供的内容。

Attribute

插值表达式无法将响应式数据输出到 HTML-Attribute 上，如果需要将响应式数据绑定到 Attribute 上，则可以使用 v-bind 指令，并支持简写的方式使用：

<button v-bind:disabled="isDisabled"></button>
<button :disabled="isDisabled"></button>
复制代码

So~，那么如何为接收非响应式数据就是普通字符串的 Attribute 赋值呢？答案很简单，直接使用 HTML 标签属性赋值的方式即可：

<button type="button"></button>
复制代码

JavaScript 表达式

Vue 的插值语法（包含属性绑定 v-bind 指令）支持执行 JavaScript 表达式，但不支持 JavaScript 语句。

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>
复制代码

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析执行。在其中它只能访问 Vue 实例暴露的变量（例如响应式数据）以及已经加入到白名单的全局变量，你不应该在模板表达式中试图访问用户定义的全局变量。

指令

Vue 指令(Directives)本质是一个 HTML Attribute，名称上以 v-* 为前缀来起到一种视觉提示。
Vue 指令的值允许接收一个 JavaScript 表达式。
Vue 指令的作用就是根据响应式值的改变来连带的影响 DOM 的状态。

因此我们可以得出指令主要针对与作用的是底层的 DOM 对象。

参数

一些指令能够接收一个“参数”，其格式是在指令名称与参数名之间用 : 冒号隔开，并且参数还可以有拥有参数值。

<a v-bind:href="url"></a>
<button v-on:click="do()"></button>
复制代码

动态参数

Vue 指令的参数名可以是通过方括号括起来的变量或者是 JavaScript 表达式的值。

<a v-bind[attributeName]="url"></a>
<button v-on[eventName]="do()"></button>
复制代码

1. 注意表达式不能含有空格、引号，这些放在 HTML attribute 名里是无效的。
2. 注意参数名不能有大写字母，HTML标签的属性名会被浏览器自动转换成小写。
3. 推荐使用计算属性来替代表达式。

修饰符

修饰符(Modifer)是指令的附加后缀，用于指出一个指令应以特殊的方式来绑定，例如 .prevent 。

缩写

如果是在 SFC(单文件组件)中，v-on 可以缩写为 @，v-bind 可以为 : 。

<!--动态参数-->
<a :[key]="url"> ... </a>
<button :[event]="do">click</button>
复制代码