Vue-模版绑定指令语法/什么是Vue组件

目录

文本插值

原始HTML中指令

什么是 Vue组件 ？

Attribute绑定

布尔型Attribute

动态绑定多个值

使用JS表达式

仅支持单一表达式

调用函数

受限的全局访问（沙盒化）

Directives指令

Arguments参数

动态参数

动态参数值的限制

动态参数语法的限制

修师符Modifiers

---

注：本文以 Vue 技术文档为基础，加上了许多基础注释和个人项目实例以及个人理解

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

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

如果你对虚拟DOM的概念比较熟悉，并且偏好直接使用 JS，可以结合可选的 JSX 支持直接手写渲染函数而不采用模版，但是这不会享受到和模版同等级别的编译时优化

文本插值

最基本的 数据绑定 形式是文本插值，通过胡子语法传入动态数据（就是我之前说的 花括号）

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

大括号标签会被替换为相应组件实例中 msg 属性的值，每次 msg 属性更改时它会动态更新

原始HTML中指令

在HTML原始标签中双大括号会被数据解释为纯文本，而不是响应式数据绑定，如果想渲染带格式的内容（HTML格式的富文本），就需要 指令 对其进行渲染

需要保留 HTML 格式的场景

例如下面的 rawHtml 是 <p style="color: red;">This should be red</p>

（这里的 style 属性是內联样式就是直接编写 CSS样式 的一种方式，但是一般不这样做，原因和HTML和JS不写一起一样，就是为了提高项目的可维护性）

<p>Using text interpolation: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

显示的是

Using text interpolation: <span style="color: red">This should be red.</span>Using v-html directive: This should be red.

第二句的 This should be red 是红色的 

这里的 v-html 就是一个指令，指令由 v- 作为前缀，表明它们是一些由 Vue 提供的特殊 attribute标志，它们将为渲染的 DOM 应用特殊的响应式行为。在上面的例子中，我们在当前组件实例上，将此元素的 innerHTML 与 rawHtml 属性保持同步

span 的内容会被替换为 rawHtml 属性的值，插值为纯 HTML --数据绑定会被忽略。

注意⚠️：不要用 v-html 作为拼接组合模版，因为 Vue 不是基于字符串的模版引擎，会导致 XSS攻击（详情见 XSS脚本攻击-DDoS僵王博士-SQL注入-考试周前的邮件-CSDN博客 ）

（ 什么叫不是基于字符串的模版引擎？

        传统字符串模版引擎（如EJS、JSP、Handlebars）的工作方式是将HTML字符串和数据变量进行字符串拼接后，一次性渲染完整的HTML字符串，将生成的HTML字符串插入DOM、设置为某个元素的innerHTML

        而 Vue 是将模版预编译成渲染函数，执行渲染函数生成虚拟DOM，当数据变化时只更新变化部分的虚拟DOM（就是我们之前说的响应式更新），然后将新旧对比（diff算法），最小化实际的DOM操作

）

在使用 Vue 时应当使用组件作为UI重用和组合的基本单元

什么是 Vue组件 ？

Vue组件 是基于 JS对象 的、增强型的对象

基于JS对象是指：使用 JS对象 语法定义

超越普通对象：因为 Vue框架为它提供了额外的功能

        1.由Vue框架管理生命周期

        2.自动集成了响应式系统：最小化实际操作

        3.可声明式复用：在每次使用组件时，Vue会创建独立的实例

        4.支持父子通信

        5.具有特殊选项，如 props / emits / template（编译成渲染函数）

// 模板不是简单字符串，而是会被编译成渲染函数
template: `<div class="news-item">{{item.title}}</div>`

Attribute绑定

对于HTML attribute如果是双括号的话，HTML还是会当纯文本，如果想要响应式渲染，就得用    v-bind

（ HTML attribute 是指 HTML标签 中的属性，比如

src ：指定外部资源的 URL路径

alt ：替代文本（辅助障碍人群、SEO）

width、height：宽和高

class ：CSS类名，用于应用CSS样式

等）

<!-- 错误：在attribute中使用双大括号 -->
<img src="{{ userInfo.avatar }}" alt="用户头像">
<a href="{{ newsLink }}">查看详情</a>

<!-- 正确：使用v-bind指令 -->
<img v-bind:src="userInfo.avatar" alt="用户头像"><!-- 或使用简写形式 -->
<img :src="userInfo.avatar" alt="用户头像">
<a :href="newsLink">查看详情</a>

这样我们就通过 v-bind 指令将 元素的src属性 和 组件的userInfo.avatar属性 进行了绑定（如果绑定的值是 null 或 undefined ，那么该attribute将会从渲染的元素上移除）

注意在每个需要动态同步的属性前面都需要 v-bind: 或 : （有点像法语多个从句每个从句前面都需要que）

上面的 : 可以进一步简写：当 attribute 名称和绑定的 JS值名称相同时，例如

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

（这得在 Vue3.4 版本及以上）

布尔型Attribute

布尔型 attribute 依据 true /false 来决定 attribute 是否应该在该元素上

例如 disable 

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

当 isButtonDistable 属性为假值时，这个按钮虽然仍然存在，但是会处于禁用状态：变成灰色

（比如 false、0、""空字符串、 null、undefined、Nan非数字 ）

像在我的项目创业平台中就有

<button :disabled="loading.stats" @click="fetchStats">刷新统计数据</button>

动态绑定多个值

如果你的 JS对象是带有多个属性的，例如

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

那么我们可以通过 不带参数的v-bind 将他们绑定到一个元素上

在我的项目里面有例子

// 在Vue组件中
const buttonAttrs = Vue.reactive({disabled: loading.stats,title: '点击刷新数据',class: {'refresh-button': true, 'is-loading': loading.stats}
});// 在模板中
// <button v-bind="buttonAttrs" @click="fetchStats">刷新</button>

<!-- 单独绑定方式 -->
<div :id="objectOfAttrs.id" :class="objectOfAttrs.class" :style="objectOfAttrs.style">
</div><!-- 对象绑定方式 -->
<div v-bind="objectOfAttrs"></div>

这么一看肯定是绑定对象方式比单独一个个绑定更方便

使用JS表达式

在上面我们只说了在模版中绑定一些简单的属性名，其实在 Vue 中所有的数据绑定都支持完整的JS表达式，比如

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

        第一个是简单的数学运算表达式

        第二个是三元条件表达式

        第三个是字符串反转（这些函数名和Python的一模一样）

        第四个是JS的模版字符串语法：通过反引号 ' 允许在字符串 ${ } 中插入表达式，例如当 id 属性为5的时候，会动态传入id中，显示的就是 list-5

在Vue模版内，JS表达式可以应用于：

        1.文本插值：双大括号中（上面的前三个）

        2.任何 Vue指令的attribute属性的值中（第四个）

仅支持单一表达式

每个绑定仅支持单一表达式，也就是一段能被求值的JS代码

一个简单的判断方法是能否合法地写在return后面

无效的例子有

<!-- 这是一个语句，而非表达式 -->
{{ var a = 1 }}<!-- 条件控制也不支持，请使用三元表达式 -->
{{ if (ok) { return message } }}

调用函数

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

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

这段代码使用了 HTML5 的新标签 <time>，通过 datetime 属性提供标准时间，而且增强了 SEO

这样就实现了动态绑定 titile 属性，当用户将鼠标悬停在事件上时，调用 toTitleDate 函数处理 data 变量，显示给用户实际的文本内容，方便 SEO 和 阅读

在我的创业平台项目中有

// 新闻数据中的发布时间
const newsData = [{id: 1,title: '2025年创业趋势报告：AI和绿色科技领跑',publishTime: '2025-05-05',// ...}
];// 洞察分析数据中的发布时间
const insightsData = [{id: 101,category: '行业分析',title: '医疗健康科技创业机会与挑战',publishTime: '2025-05-06'}
];

可以在项目中使用

<!-- 新闻列表中 -->
<div v-for="item in newsList" :key="item.id" class="news-item"><h3>{{ item.title }}</h3><p>{{ item.summary }}</p><time :datetime="item.publishTime" :title="formatFullDate(item.publishTime)">{{ formatRelativeDate(item.publishTime) }}</time>
</div>

用 v-for 进行循环遍历元素，并将函数作用在元素上 

注意：绑定在表达式中的方法在组件每次更新都会被重新调用，因此被调用的、绑定在表达式中的函数不应该产生任何副作用，例如改变数值、触发异步等操作，防止重复执行、性能问题、不可预测的结果

// 不好的做法 - 在模板表达式中使用的方法产生副作用
const formatWithSideEffect = (date) => {userInfo.value.lastViewedDate = new Date(); // 修改状态 - 副作用!saveToLocalStorage(date); // 调用外部API - 副作用!return new Date(date).toLocaleDateString();
};// 在模板中: {{ formatWithSideEffect(item.publishTime) }}

// 好的做法 - 纯函数，无副作用
const formatDate = (date) => {return new Date(date).toLocaleDateString();
};// 在模板中: {{ formatDate(item.publishTime) }}

 

受限的全局访问（沙盒化）

模版中的表达式将被沙盒化

（ 沙盒化Sandboxing 是一种安全机制，用于限制代码的执行环境和能力，防止它访问或影响它不应该接触的资源）

Vue 中的沙盒化是指 Vue模版不能直接访问像 window、document、localStorage 这样的全局对象，仅能访问到：

        1.显式暴露的组件数据和方法（通过 setup 返回或 data / methods 定义）

        2.白名单中的安全全局对象，如 Math，Date，Array、Obejct、String等内置类型，Infinity、underfined、NaN等全局常量

如果想要添加能访问的全局对象

        法1.可以在 app.config.globalProperties 上显式地添加它们，例如

app.config.globalProperties.$auth = window.Auth;

        法2.在组件方法中访问并暴露，例如

const saveUserPreference = (preference) => {localStorage.setItem('userPreference', preference);
};// 在模板中使用事件处理器
// <button @click="saveUserPreference('dark-mode')">设置暗色模式</button>

Directives指令

前面介绍过了，指令是带有 v- 前缀的特殊attribute，例如之前讲的 v-html 和 v-bind

指令 attribute 的期望值一般为一个 JS表达式，指令的任务是在表达式的值变化时，响应式 地更新DOM，以 v-if 为例

<p v-if="seen">Now you see me</p>

会根据seen值的真假，决定是否插入这个 <p> 元素，进而影响DOM树

Arguments参数

某些指令会需要参数，例如

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

这里的href就是一个参数（超链接目标），它告诉了 v-bind 指令将表达式 url 的值绑定到元素的 href attribute 上

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

这里我们要监听的事件名称是 click ，v-on 的缩写是 @ 字符

动态参数

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

<!--
注意，参数表达式有一些约束，
参见下面“动态参数值的限制”与“动态参数语法的限制”章节的解释
-->
<a v-bind:[attributeName]="url"> ... </a><!-- 简写 -->
<a :[attributeName]="url"> ... </a>

这里的 attributeName 会作为一个 JS 表达式被动态执行，计算得到的值会作为最终参数

相似的，我们还可以将一个函数绑定到动态事件上

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

动态参数值的限制

参数的值一个是一个字符串，或者是 null（就是上面讲的显式一出该绑定）

动态参数语法的限制

动态参数表达式因为某些字符的缘故有一些语法限制，比如空格和引号，在 HTML attribute 名称中都是不合法的

<!-- 这会触发一个编译器警告 -->
<a :['foo' + bar]="value"> ... </a>

如果需要传入一个复杂的动态参数，推荐使用计算属性替换复杂的表达式

当使用 DOM 内嵌模版（在上一次讲的，并非写单文件，而是直接在HTML文件里写模版）时，我们需要避免在名称使用大写字母

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

这个例子会将 DOM 内嵌模版转为 :[someattr] ，如果你的组件拥有的是 "somattr" 属性，那么由于区分大小写会导致无法工作，但是单文件组件就不受限制

修师符Modifiers

修饰符是以点开头的特殊后缀，表明指令需要以一些特殊的方式绑定，例如 .prevent 修饰符会告知 v-on 指令对触发的事件调用 event.preventDefault( )

<form @submit.prevent="onSubmit">...</form>

完整的指令语法如下