vue3 随手笔记3--基础--模板语法--JavaScript 表达式

朝朝暮暮an

已于 2025-06-30 11:09:28 修改

阅读量642

点赞数 29

CC 4.0 BY-SA版权

分类专栏： vue3 自学随手笔记文章标签：笔记 javascript 开发语言

于 2025-06-27 16:25:06 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43837395/article/details/148954967

vue3 自学随手笔记专栏收录该内容

12 篇文章

订阅专栏

方法一：通过 app.config.globalProperties

方法二：使用 defineProps 或 Composition API 显式传递数据

最佳实践建议

总结

可参考vue官网官方文档模板语法 | Vue.js

（很多内容为vue官方文档，只是一个搬运工，自己给自己的笔记。对于自己补充部分，纯属是自己是小白，官方文档部分内容看不懂，所以，自查了一些内容，给自己的笔记）

如果发现有错误的或者补充可以评价留言或者私信给我感谢

JavaScript 表达式

1. 运算表达式

你可以直接在模板中使用加减乘除、字符串拼接等。

<p>{{ 2 + 2 }}</p>
<p>{{ 'Hello, ' + name }}</p>

2. 逻辑表达式

支持 &&, ||, ! 等逻辑运算符。

<p v-if="user.isLoggedIn && user.isAdmin">管理员</p>

3. 三元运算符

用于条件判断。

<p>{{ age >= 18 ? '成年' : '未成年' }}</p>

4. 函数调用

可以调用方法或返回值的函数。

<p>{{ formatDate(date) }}</p>

vue官网给出的demo

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

逐行解析

1. <time> 标签简介

<time> 是 HTML5 引入的一个语义化标签，表示日期或时间。它可以包含机器可读的时间/日期，便于浏览器、搜索引擎或脚本识别和处理。

2. 属性详解

:title="toTitleDate(date)"

:title 是 v-bind:title 的缩写。
当鼠标悬停在元素上时，会显示 title 提示。
toTitleDate(date) 是一个方法（或 computed 函数），用于将 date 转换为适合展示的标题格式，比如 "2025年6月27日星期五"。

:datetime="date"

datetime 是 <time> 标签的标准属性，值必须是合法的日期时间字符串（如 ISO 8601 格式："2025-06-27T15:30:00"）。
这个属性让机器可以理解时间内容，对 SEO 和无障碍访问很有帮助。

3. 插值表达式 {{ formatDate(date) }}

使用 formatDate(date) 方法将 date 格式化为用户友好的格式，例如 "2025-06-27" 或 "刚刚"。
渲染在页面上作为 <time> 标签的内容。

示例说明

假设你的 date 数据如下：

const date = ref('2025-06-27T15:30:00')

JS 中的方法定义如下：

function toTitleDate(dateStr) {
  const date = new Date(dateStr)
  return date.toLocaleString() // 输出类似 "2025/6/27 下午3:30:00"
}

function formatDate(dateStr) {
  const date = new Date(dateStr)
  return `${date.getFullYear()}-${String(date.getMonth()+1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
}

渲染后的 HTML 将是：

<time title="2025/6/27 下午3:30:00" datetime="2025-06-27T15:30:00">
  2025-06-27
</time>

总结

属性/内容	作用
`<time>`	语义化时间标签，有助于 SEO 和无障碍访问
`:title`	鼠标悬停时显示完整时间
`:datetime`	提供机器可读的时间格式
`{{ formatDate(date) }}`	显示给用户看的格式化时间

5. 对象和数组字面量

可以创建临时对象或数组。

<div :class="{ active: isActive, error: hasError }"></div>
<div :style="[ { color: 'red' }, { fontSize: '14px' } ]"></div>

Vue 模板中不支持的表达式

虽然 Vue 支持 JS 表达式，但它 不支持完整的 JavaScript 语句，以下写法会报错：

表达式	是否允许	原因
`let a = 1`	❌	不允许声明变量
`if (...) {...}`	❌	不允许控制流语句
`for (...) {...}`	❌	不允许循环语句
`const x = () => {}`	❌	不允许函数定义
`a++` / `b--`	❌	不允许修改状态的表达式

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

受限的全局访问

模板中的表达式将被沙盒化，仅能够访问到有限的全局对象列表。该列表中会暴露常用的内置全局对象，比如 Math 和 Date。

没有显式包含在列表中的全局对象将不能在模板内表达式中访问，例如用户附加在 window 上的属性。然而，你也可以自行在 app.config.globalProperties 上显式地添加它们，供所有的 Vue 表达式使用。

什么是“模板表达式中的沙盒化”？

在 Vue 3 的模板中（即 <template> 部分），你可以使用 JavaScript 表达式进行动态绑定和插值渲染，例如：

{{ Math.random() }}
<div :style="{ fontSize: size + 'px' }"></div>

但为了安全性和性能考虑，Vue 限制了你在模板中可以访问的全局对象，也就是所谓的 沙盒机制（sandboxing）。

默认允许访问的全局对象

Vue 模板中默认允许访问以下内置的 JavaScript 全局对象（白名单）：

对象名	描述
`Math`	数学运算函数，如 `Math.random()`
`Date`	时间相关操作，如 `new Date()`
`JSON`	JSON 解析与序列化，如 `JSON.stringify(obj)`
`RegExp`	正则表达式构造函数
`fetch`	浏览器原生网络请求方法

示例：

<p>当前时间戳：{{ Date.now() }}</p>
<p>随机数：{{ Math.random() }}</p>

不允许访问的全局对象

所有未在白名单中的全局变量或函数都不能直接在模板中使用。
尤其是像 window, document, location, eval 等敏感对象都被禁止访问。

<!-- 报错：无法访问 window -->
<p>{{ window.location.href }}</p>

<!-- 报错：不允许执行 eval -->
<p>{{ eval('1+1') }}</p>

这样做是为了防止：

意外修改 DOM 或全局状态
XSS 攻击风险
性能问题（频繁访问全局变量）

如何添加自定义全局属性到模板中可用？

如果你确实需要在模板中使用一些全局变量或工具函数（比如 $http、utils、config 等），可以通过设置：

方法一：通过 `app.config.globalProperties`

// main.js 或 main.ts
const app = createApp(App)

// 添加一个全局属性 $myUtils
app.config.globalProperties.$myUtils = {
  formatPrice(price) {
    return `¥${price.toFixed(2)}`
  }
}

app.mount('#app')

然后在模板中使用：

<p>商品价格：{{ $myUtils.formatPrice(99.5) }}</p>

注意：这种方式只适用于 选项式 API（Options API），不适用于 <script setup>。

方法二：使用 `defineProps` 或 Composition API 显式传递数据

如果你使用的是 <script setup>，推荐使用显式传参的方式：

<script setup>
import { formatPrice } from '@/utils'

const price = ref(99.5)
</script>

<template>
  <p>商品价格：{{ formatPrice(price) }}</p>
</template>

或者使用依赖注入（provide/inject）来共享工具函数。

最佳实践建议

场景	推荐做法
使用 `Math` / `Date` 等	直接使用即可 ✅
使用自定义工具函数	在 `setup()` 中引入或通过 `globalProperties` 注入
访问 `window` / `document`	应避免在模板中使用，建议在 `setup()` 或生命周期钩子中处理
安全性	不要暴露危险的方法（如 `eval`）给模板使用
可维护性	保持模板简洁，复杂逻辑放在 `methods` 或 `computed` 中