【VUE2转VUE3学习笔记】-Day1:模板语法

VUE3学习笔记

VUE3组合式API
- [模板语法-Attribute 绑定(v-bind)](#模板语法-Attribute 绑定(v-bind))
- [指令 Directives](#指令 Directives)

VUE3组合式API

模板语法-Attribute 绑定(v-bind)

注意事项

如果绑定的值是 null 或者 undefined，那么该 attribute 将会从渲染的元素上移除，当 dynamicId 为真值或一个空字符串 (即 <div :id=""></div>) 时，元素会包含这个 id attribute。而当其为其他假值时 attribute 将被忽略；（移除的是元素上对应的attribute，而不是元素本身）

javascript 复制代码

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

同名简写；

javascript 复制代码

<!-- 与 :id="id" 相同 -->
<div :id></div>

<!-- 这也同样有效 -->
<div v-bind:id></div>

通过不带参数的 v-bind，动态绑定多个值；

javascript 复制代码

<div v-bind="objectOfAttrs"></div>

const objectOfAttrs = {
  id: 'container',
  class: 'wrapper',
  style: 'background-color:green'
}

使用 JavaScript 表达式:仅支持单一表达式,一个简单的判断方法是是否可以合法地写在 return 后面；在 Vue 模板内，JavaScript 表达式可以被使用在如下场景上：

在文本插值中 (双大括号)
在任何 Vue 指令 (以 v- 开头的特殊 attribute) attribute 的值中

javascript 复制代码

{{ number + 1 }}

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

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

<div :id="`list-${id}`"></div>

因此，下面的例子都是无效的：

javascript 复制代码

<!-- 这是一个语句，而非表达式 -->
{{ var a = 1 }}

<!-- 条件控制也不支持，请使用三元表达式 -->
{{ if (ok) { return message } }}

调用函数；

可以在绑定的表达式中使用一个组件暴露的方法

javascript 复制代码

<!-- 绑定在表达式中的方法在组件每次更新时都会被重新调用，因此不应该产生任何副作用，比如改变数据或触发异步操作。 -->

<time :title="toTitleDate(date)" :datetime="date">
  {{ formatDate(date) }}
</time>

动态参数；

同样在指令参数上也可以使用一个 JavaScript 表达式，需要包含在一对方括号内.

javascript 复制代码

<!--
动态参数中表达式的值应当是一个字符串，或者是 null。特殊值 null 意为显式移除该绑定。其他非字符串的值会触发警告。
-->
<a v-bind:[attributeName]="url"> ... </a>

<!-- 简写 -->
<a :[attributeName]="url"> ... </a>

-如果你的组件实例有一个数据属性 attributeName，其值为 "href"，那么这个绑定就等价于 v-bind:href

相似地，你还可以将一个函数绑定到动态的事件名称上：

javascript 复制代码

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

<!-- 简写 -->
<a @[eventName]="doSomething"> ... </a>

在此示例中，当 eventName 的值是 "focus" 时，v-on: $eventName$ 就等价于 v-on:focus

当使用 DOM 内嵌模板 (直接写在 HTML 文件里的模板) 时,我们需要避免在名称中使用大写字母，因为浏览器会强制将其转换为小写. 单文件组件内的模板不受此限制

javascript 复制代码

<a :[someAttr]="value"> ... </a>

上面的例子将会在 DOM 内嵌模板中被转换为 : $someattr$ 。如果你的组件拥有 "someAttr" 属性而非 "someattr"，这段代码将不会工作。单文件组件内的模板不受此限制。

完整的指令语法；

Name:指令名，使用简写时可省略；Argument:参数；Modifiers:修饰符；Value：值

指令 Directives

指令是带有 v- 前缀的特殊 attribute,例如上面的Attribute 绑定（v-bind）
指令 attribute 的期望值为一个 JavaScript 表达式
指令的任务是在其表达式的值变化时响应式地更新 DOM