目录详解：

简单解释：

详细解释：

.vscode

public

assets

compents

router

views

app.vue

package.json

package-lock.json

区别

探究文档

应用配置​

语法合集

插值表达式​

V- HTML（易造成xss漏洞）​

V-bind

简写​

同名简写 （vue3.4+）​

V-bind(布尔类型)​

多值绑定

JS使用

调用函数​

受限的全局访问​

V-on

动态参数

限制

---

目录详解：

接下来让我们先了解vite创建的目录各部分的作用。

简单解释：

由day2日记中我们创建的应用为参考。

详细解释：

.vscode

在VSCode中，.vscode目录下的extensions.json文件是用来配置推荐的扩展插件的。这个配置文件告诉VSCode当你打开这个项目时，它应该推荐你安装哪些扩展以获得更好的开发体验。

public

public文件夹主要用于存放那些不需要通过模块打包系统处理的静态资源。这些资源将被直接复制到构建输出的目录中，并且不会经过任何转换或优化，它们会被原样保留。

assets

对于需要动态处理或模块化导入的资源（如样式表、脚本文件等），应该放在src目录下，而不是public目录。因为public目录中的文件不会被Vite的构建过程所影响，所以它们不会被压缩、转换或添加哈希值，这可能会影响缓存策略和性能优化。

compents

提供一个组件模板，基本不使用

router

路由，day2日记中自行创建

views

视图集，day2日记中自行创建

app.vue

一般用来渲染路由

package.json

package.json文件是Node.js项目的核心配置文件，它包含以下信息：

• 项目元数据，比如项目名称、版本、描述、作者、许可证等。
• 项目的依赖列表（dependencies），包括运行项目所需的第三方模块。
• 开发依赖列表（devDependencies），这些是开发过程中需要的工具和库，但并不包含在最终发布的包中。
• 脚本命令，定义了可以运行的npm脚本，如构建、测试、启动服务器等。
• 其他配置信息，如仓库URL、关键词、贡献者等。

package-lock.json

package-lock.json文件是由npm在版本5及以上版本中引入的，其目的是为了确保项目的依赖树在不同环境中是一致的。package-lock.json包含以下信息：

• 依赖树的精确版本和来源，包括每个依赖及其子依赖的确切版本。
• 安装依赖时使用的npm版本和操作系统信息。
• 安装过程中的任何警告或错误信息。

区别

• 可重复性：package-lock.json确保了无论谁在哪台机器上运行npm install，得到的node_modules目录的内容都是一样的，提供了可重复的构建环境。
• 安装速度：package-lock.json中存储的依赖信息可以帮助加速npm install过程，因为它避免了重新解析依赖树的需要。
• 更新管理：package-lock.json锁定了依赖的版本，如果你想更新依赖，你需要先更新package.json中的版本范围，然后重新运行npm install来更新package-lock.json。
• 源代码控制：package-lock.json应该被纳入版本控制系统，以保证团队成员之间的依赖一致性。

---

探究文档

接下来，让我们继续探究vue3文档。（！仅会探究比较难懂的部分，其余简单部分或与vue2无异则不做探究，请自行查看文档！）

应用配置​

【笔记：（应用：层级分析：项目-应用-组件,多个vue组件组成一个vue应用实例）】应用实例会暴露一个 .config 对象允许我们配置一些应用级的选项，例如定义一个应用级的错误处理器，用来捕获所有子组件上的错误：

js

app.config.errorHandler = (err) => {
  /* 处理错误 */
}

【笔记：（你可以在里面编写自己的错误逻辑，和报错提醒，以便于更好的处理错误）】

应用实例还提供了一些方法来注册应用范围内可用的资源，例如注册一个组件：

js

app.component('TodoDeleteButton', TodoDeleteButton)

这使得 TodoDeleteButton 在应用的任何地方都是可用的。我们会在指南的后续章节中讨论关于组件和其他资源的注册。你也可以在 API 参考中浏览应用实例 API 的完整列表。

确保在挂载应用实例之前完成所有应用配置！

---

语法合集

插值表达式​

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

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

双大括号标签会被替换为相应组件实例中 msg 属性的值。且双向绑定，同步改变。

---

V- HTML（易造成xss漏洞）​

【笔记：（xss漏洞：

XSS（Cross-Site Scripting）漏洞，即跨站脚本攻击，类似于sql注入，是一种常见的Web安全问题。

eg：假设一个网站允许用户发布评论，如果网站直接将用户的评论内容通过v-html指令渲染到页面上，而没有进行适当的转义处理或过滤，那么攻击者就可以在评论中插入恶意的JavaScript代码。当其他用户浏览这个含有恶意代码的评论时，他们的浏览器就会执行这段代码，导致XSS攻击发生。）】

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

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

---

V-bind

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

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

v-bind 指令指示 Vue 将元素的 id  与组件的 dynamicId 属性保持一致。如果绑定的值是 null 或者 undefined，那么指令无效移除。

简写​

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

同名简写 （vue3.4+）​

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

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

V-bind(布尔类型)​

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

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

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

多值绑定

如果你有像这样的一个包含多个值的 JavaScript 对象：

data() {
  return {
    objectOfAttrs: {
      id: 'container',
      class: 'wrapper'
    }
  }
}

通过不带参数的 v-bind，你可以将它们绑定到单个元素上：

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

---

JS使用

数据绑定仅支持单一表达式（也就是一段能够被求值的 JavaScript 代码）。

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

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

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

---

调用函数​

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

【笔记：（组件暴露（仅在同组件）：

在Vue.js中，组件可以暴露（export）方法、计算属性（computed properties）、数据属性（data properties）等，以便在其他组件或模板中使用。当我们在一个组件内部定义了某个方法或属性，并希望在该组件的模板或其它组件中调用它时，我们就需要将这些方法或属性“暴露”出来。

eg：在一个名为MyComponent.vue的组件中，我们可以定义一个方法formatDate来格式化日期：

1<script>
2export default {
3  methods: {
4    formatDate(date) {
5      // 这里是你的日期格式化逻辑
6      return date.toLocaleDateString();
7    }
8  }
9}
10</script>

然后，在该组件的模板中，我们就可以直接使用这个方法：

1<template>
2  <div>
3    <time>{{ formatDate(new Date()) }}</time>
4  </div>
5</template>

）】

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

---

受限的全局访问​

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

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

【笔记：（

常见处理对象：math和date

eg：

在模板中你可以直接使用如下表达式：

1<span>{{ Math.sqrt(16) }}</span>

这将显示4，因为Math.sqrt是允许在模板表达式中直接调用的函数之一。

然而，如果有一些自定义的全局变量或函数，例如你可能在window上附加了一些属性或函数，这些默认情况下是无法在模板表达式中访问的。

1// 假设你在全局作用域（可能是你的主JS文件中）添加了以下代码：
2window.myFunction = function() { return 'Hello, world!'; }

然后试图在模板中使用它：

1<span>{{ myFunction() }}</span>

这将不会工作，因为myFunction不在允许的全局对象列表中。为了解决这个问题，你可以在app.config.globalProperties上添加这个函数，使得它可以在所有Vue表达式中访问。

1import { createApp } from 'vue';
2
3const app = createApp(App);
4
5// 添加自定义的全局属性或方法
6app.config.globalProperties.$myFunction = function() {
7  return 'Hello, world!';
8};
9
10app.mount('#app');

现在，在模板中你可以通过$myFunction()来调用这个函数：

1<span>{{ $myFunction() }}</span>

这样，你就可以在保证应用安全性的同时，灵活地使用更多的全局对象和函数了。

）】

---

V-on

它将监听 DOM 事件：

<a v-on:click="doSomething"> ... </a>

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

动态参数

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

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

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

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

限制

1：动态参数中，表达式的值如果为null则是未绑定，其他非字符串则会报错。

2：动态参数中，表达式中的空格和引号均为非法字符。

3：html内嵌模板中，大写字母会被浏览器强制为小写字母。