Vue 基础

模板语法

Vue 使用一种基于 HTML 的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML，可以被符合规范的浏览器和 HTML 解析器解析。

在底层机制中，Vue 会将模板编译成高度优化的 JavaScript 代码。结合响应式系统，当应用状态变更时，Vue 能够智能地推导出需要重新渲染的组件的最少数量，并应用最少的 DOM 操作。

文本插值

最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法 (即双大括号)：

?

1	<span>Message: {{ msg }}</span>

　　双大括号标签会被替换为相应组件实例中 msg 属性的值。同时每次 msg 属性更改时它也会同步更新。

原始 HTML

想插入 HTML，你需要使用 v-html 指令：

?

1 2 3 4 5 6 7 8 9 10

<template>   <h2>原始HTML</h2>   <p>Using text interpolation: {{ rawHtml }}</p>   <p>Using v-html directive: <span v-html="rawHtml"></span></p> </template>   <script setup> import { ref } from 'vue'; const rawHtml=ref('<p style="color:red">字体红色</p>') </script>

 

Attribute 绑定

双大括号不能在 HTML attributes 中使用。想要响应式地绑定一个 attribute，应该使用 v-bind 指令：

?

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

简写

因为 v-bind 非常常用，我们提供了特定的简写语法：

?

1	<div :id="dynamicId"></div>

布尔型 Attribute

布尔型 attribute 依据 true / false 值来决定 attribute 是否应该存在于该元素上。disabled 就是最常见的例子之一。

v-bind 在这种场景下的行为略有不同：

当为 true 时，按钮可正常点击，反之则置灰

?

1	<button :disabled="isButtonDisabled">Button</button>

　　当 isButtonDisabled 为真值或一个空字符串 (即 <button disabled="">) 时，元素会包含这个 disabled attribute。而当其为其他假值时 attribute 将被忽略。

使用 JavaScript 表达式

Vue 实际上在所有的数据绑定中都支持完整的 JavaScript 表达式：

?

1 2 3 4 5 6 7

{{ number + 1 }}   {{ ok ? 'YES' : 'NO' }}   {{ message.split('').reverse().join('') }}   <div :id="`list-${id}`"></div>

　　这些表达式都会被作为 JavaScript ，以当前组件实例为作用域解析执行。

 

在 Vue 模板内，JavaScript 表达式可以被使用在如下场景上：

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

调用函数

?

1 2 3

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

指令

?

1 2 3 4

<a v-bind:href="url"> ... </a>   <!-- 简写 --> <a :href="url"> ... </a>

事件

?

1 2 3 4

<a v-on:click="doSomething"> ... </a>   <!-- 简写 --> <a @click="doSomething"> ... </a>