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

Mottle
533 阅读4分钟

精读 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>

在纯 JavaScript 驱动的版本中，模板字符串是由 Vue 编译引擎进行异步编译，一旦浏览的 Event Loop 存在延迟或等待时间过长，模板中的插值表达式{{...}} 就可能会没有被处理直接渲染到浏览器界面中，解决的办法就是事先在 HTML 中内联 [v-cloak]{display:none} 样式并结合 v-cloak 指令。

原始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>
avatar
文章
阅读
粉丝