【Vue】模板语法

文本插值

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

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

原始 HTML

双大括号会将数据解释为纯文本，而不是 HTML。若想插入 HTML，需要使用 v-html 指令

Attribute 绑定

arrtibute：HTML 标签上的属性

要响应式地绑定一个 attribute，应该使用 v-bind 指令

    // 绑定一个 attribute
    <div v-bind:id="dynamicId"></div>
    
    <div :id="dynamicId"></div> // 简写语法，两者效果一致
    
    <div :id></div> // 同名简写  => :id="id"
    
    // 绑定多个 attribute
    <div v-bind="objectOfAttrs"></div> // objectOfAttrs是一个对象

绑定表达式

    // 单一表达式
    {{ number + 1 }}
    {{ ok ? 'YES' : 'NO' }}
    {{ message.split('').reverse().join('') }}
    <div :id="`list-${id}`"></div>
    // 调用函数
    <time :title="toTitleDate(date)" :datetime="date">
      {{ formatDate(date) }}
    </time>

受限的全局访问

解释

这段话描述了 Vue 模板的一个安全机制，目的是防止模板中的表达式访问到不该访问的东西，从而避免潜在的安全风险或意外错误。

我们可以把它拆解成三层意思：

1. 默认白名单（安全沙盒） ：Vue 模板中的表达式（比如 {{ message }} 或 :disabled="isDisabled"）不能访问所有的全局对象（如 window, document）。它只能访问一个 Vue 预设好的“白名单”里的全局对象，例如 Math, Date, Array, JSON 等 JavaScript 内置对象。
2. 禁止访问的内容：这意味着你不能直接在模板里使用 window 上的自定义属性。例如，如果你在全局挂了一个 window.mySecretKey = 'abc123'，在模板里写 {{ window.mySecretKey }} 是无效的，什么都不会显示。
3. 如何显式暴露（解决方案） ：如果你确实需要在模板中使用某个自定义的全局属性/方法，Vue 提供了官方的通道：app.config.globalProperties。你可以把需要全局访问的东西挂载到这里，这样它们就可以在所有组件的模板和实例中使用了。

举例

例子 1：默认行为（无法访问 window 自定义属性）

步骤 1：在 main.js 中设置一个 window 属性

import { createApp } from 'vue'
import App from './App.vue'

// 假设我们有一个全局配置对象挂在了 window 上
window.APP_VERSION = 'v1.2.3';

const app = createApp(App);
app.mount('#app');

步骤 2：在组件模板中尝试访问它 (App.vue)

<template>
  <div>
    <h1>我的应用</h1>
    <!-- 这行不会正常工作，不会显示任何内容 -->
    <p>版本号: {{ window.APP_VERSION }}</p> 
  </div>
</template>

页面上“版本号：”后面会是空的。因为 window 不在 Vue 模板的全局访问白名单内，APP_VERSION 属性自然也无法被访问。控制台可能会有一个警告，提示你 window 是未定义的。

例子 2：使用 app.config.globalProperties 正确暴露

步骤 1：在 main.js 中配置全局属性

import { createApp } from 'vue'
import App from './App.vue'

// 1. 我们想全局使用的值或方法
const GLOBALS = {
  version: 'v1.2.3',
  apiUrl: 'https://api.myapp.com',
  // 一个全局工具函数
  formatDate(date) {
    return new Date(date).toLocaleDateString();
  }
};

const app = createApp(App);

// 2. ！！！关键步骤：将需要的属性附加到全局属性上
// 方法一：逐个添加
app.config.globalProperties.$version = GLOBALS.version;
app.config.globalProperties.$formatDate = GLOBALS.formatDate;

// 方法二：更推荐，使用 Object.assign 批量添加
// 习惯上给全局属性加一个 `$` 前缀，以区别于组件自身的属性
Object.assign(app.config.globalProperties, {
  $version: GLOBALS.version,
  $apiUrl: GLOBALS.apiUrl,
  $formatDate: GLOBALS.formatDate
});

app.mount('#app');

步骤 2：在组件中使用它们 (App.vue)

 <template>
  <div>
    <h1>我的应用</h1>
    <!-- 现在可以正常访问了 -->
    <p>版本号: {{ $version }}</p> 
    <p>API地址: {{ $apiUrl }}</p>
    <p>今天的日期: {{ $formatDate(new Date()) }}</p>
  </div>
</template>

<script>
export default {
  // 在组件的 JS 中也可以通过 `this` 访问
  mounted() {
    console.log('App Version is:', this.$version);
    console.log('API URL is:', this.$apiUrl);
  }
}
</script>

现在所有内容都会按预期显示和工作。你成功地将自定义的全局属性注入到了每一个 Vue 组件中。

结论：在 Vue 应用中，为了在模板和组件中共享全局属性或方法，永远应该优先使用 app.config.globalProperties，而不是向 window 对象添加属性。