学习vue3

一、入门

1.引入外部库

①直接将所有的js都通过script标签引入到html文件中，所有的js资源在web页面中都能通用。

②使用js引用js（ES6），模块导入与导出

2.模块是只读引用

这段话是在解释 Vue.js 中的概念和用法。
 
在 Vue.js 中，我们使用组件来构建应用程序。每个组件都是一个独立的、可复用的模块，它封装了特定的功能和样式，并可以嵌套和组合以构建复杂的应用。
 
在创建一个 Vue 应用程序时，我们需要传入一个对象给 `createApp` 函数，而这个对象实际上就是一个组件。这个组件充当了应用程序的根组件，也就是整个应用程序的入口点。
 
根组件是一个顶级的组件，它包含其他组件作为它的子组件。子组件可以嵌套在根组件内部，形成组件树的结构。这种组件的层次结构让我们能够将应用程序拆分为更小、更易于维护和重用的部分。
 
如果你使用的是单文件组件（Single File Component，.vue 后缀），那么你可以在一个文件中定义一个根组件，并在另一个文件中导入它。这种方式使得组件的代码更加清晰和模块化，可以方便地进行组件的管理和维护。
 
以下是一个简单的示例，展示了如何在单文件组件中定义根组件并进行导入：
 
```vue
<!-- App.vue -->
<template>
  <div>
    <h1>{{ message }}</h1>
    <ChildComponent />
  </div>
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello, Vue!'
    };
  }
};
</script>
```
 
```vue
<!-- ChildComponent.vue -->
<template>
  <div>
    <p>This is a child component.</p>
  </div>
</template>
 
<script>
export default {
  // 组件的逻辑和属性
};
</script>
```
 
在上面的例子中，`App.vue` 是根组件，它包含了一个 `<ChildComponent>` 组件作为它的子组件。通过使用 `import` 语句，在 `App.vue` 中可以直接导入并使用 `ChildComponent` 组件。
 
这样，我们就可以将应用程序拆分为多个组件，并在不同文件中进行管理和导入，使代码更加清晰和可维护。

3.引入一个组件（困惑）

这段话是在解释 Vue.js 中的概念和用法。
 
在 Vue.js 中，我们使用组件来构建应用程序。每个组件都是一个独立的、可复用的模块，它封装了特定的功能和样式，并可以嵌套和组合以构建复杂的应用。
 
在创建一个 Vue 应用程序时，我们需要传入一个对象给 `createApp` 函数，而这个对象实际上就是一个组件。这个组件充当了应用程序的根组件，也就是整个应用程序的入口点。
 
根组件是一个顶级的组件，它包含其他组件作为它的子组件。子组件可以嵌套在根组件内部，形成组件树的结构。这种组件的层次结构让我们能够将应用程序拆分为更小、更易于维护和重用的部分。
 
如果你使用的是单文件组件（Single File Component，.vue 后缀），那么你可以在一个文件中定义一个根组件，并在另一个文件中导入它。这种方式使得组件的代码更加清晰和模块化，可以方便地进行组件的管理和维护。
 
以下是一个简单的示例，展示了如何在单文件组件中定义根组件并进行导入：
 
```vue
<!-- App.vue -->
<template>
  <div>
    <h1>{{ message }}</h1>
    <ChildComponent />
  </div>
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello, Vue!'
    };
  }
};
</script>
```
 
```vue
<!-- ChildComponent.vue -->
<template>
  <div>
    <p>This is a child component.</p>
  </div>
</template>
 
<script>
export default {
  // 组件的逻辑和属性
};
</script>
```
 
在上面的例子中，`App.vue` 是根组件，它包含了一个 `<ChildComponent>` 组件作为它的子组件。通过使用 `import` 语句，在 `App.vue` 中可以直接导入并使用 `ChildComponent` 组件。
 
这样，我们就可以将应用程序拆分为多个组件，并在不同文件中进行管理和导入，使代码更加清晰和可维护。

4.挂载

在 Vue.js 中，容器元素指的是应用程序将要渲染到的 HTML 元素。
 
当我们创建一个 Vue 应用程序时，我们需要选择一个 HTML 元素来承载整个应用程序的内容。这个 HTML 元素就是容器元素，也可以被称为根元素或挂载元素。
 
在调用 `.mount()` 方法时，我们需要传入一个选择器（通常是一个 CSS 选择器）来选择容器元素。Vue.js 将会把根组件的内容渲染并插入到该容器元素中。
 
举个例子，假设我们有以下的 HTML 结构：
 
```html
<div id="app"></div>
```
 
这里的 `<div id="app"></div>` 就是我们选定的容器元素。我们可以使用 `#app` 作为选择器，并将其传递给 `.mount()` 方法，如下所示：
 
```javascript
const app = createApp(App);
app.mount('#app');
```
 
这样，应用程序的根组件将会被渲染到 `<div id="app"></div>` 这个容器元素中。
 
需要注意的是，容器元素本身并不是应用的一部分，它仅仅是一个承载应用内容的空白容器。Vue.js 会将根组件的内容渲染到容器元素内部，这样才能正确显示应用程序的界面。
 
因此，容器元素在应用配置和资源注册完成后调用 `.mount()` 方法时，才能正确地将组件渲染到容器元素中。此方法会返回根组件实例，而不是应用实例。

4.computed 计算属性

4.遇到的错误

1.

2.Vue实例中的this指代Vue实例，但是在这个项目中interval的this已经不再指代this

END：思维导图汇总