什么是 Vue？
Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面，无论任务是简单还是复杂。

1.开始

介绍

什么是 Vue

  1. Vue 是一款用于构建用户界面的 JavaScript 框架<br />    基于标准 HTML、CSS 和 JavaScript 构建<br />    提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面

渐进式框架

  1. Vue 被设计成具有灵活性和可逐步集成的特点，以适应不同需求场景<br />        增强静态的 HTML 而无需构建步骤<br />        在任何页面中作为 Web Components 嵌入<br />        单页应用 (SPA)<br />        全栈 / 服务端渲染 (SSR)<br />        Jamstack / 静态站点生成 (SSG)<br />        目标为桌面端、移动端、WebGL，甚至是命令行终端

单文件组件

  1. 单文件组件，也被称为 *.vue 文件，英文缩写 SFC<br />    Vue 的单文件组件会将一个组件的逻辑 (JavaScript)，模板 (HTML) 和样式 (CSS) 封装在同一个文件里

API 风格

  1. 选项式 API<br />        我们可以用包含多个选项的对象来描述组件的逻辑，例如 data、methods 和 mounted<br />        选项所定义的属性都会暴露在函数内部的 this 上<br />        this指向当前的组件实例<br />    组合式 API<br />        组合式 API 可以使用导入的 API 函数来描述组件逻辑<br />        在单文件组件中，组合式 API 通常会与<script setup>搭配使用<br />        setup attribute 标识用于告诉 Vue 需要在编译时进行转换，来减少使用组合式 API 时的样板代码<br />组合式 API 并不是函数式编程。组合式 API 是以 Vue 中数据可变的、细粒度的响应性系统为基础的，而函数式编程更强调数据不可变
  3. 选谁<br />        出于学习目的使用时，推荐采用自己更容易理解的方式<br />        出于生产目的使用时<br />            如果你不需要使用构建工具，或者只在低复杂度的场景中使用 Vue，可以采用选项式 API<br />            当你想用 Vue 构建更大更完整的应用时，推荐使用组合式 API 和单文件组

快速开始

采用构建工具

  1. 线上构建<br />        可以通过 StackBlitz 在线使用单文件组件尝试 Vue<br />        [https://vite.new/vue](https://vite.new/vue)<br />    本地构建<br />        命令行运行：npm init vue@latest<br />            这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具<br />        然后进入项目目录，分别执行npm install和npm run dev<br />        当你准备将应用发布到生产环境时，运行npm run build<br />            此命令会在 ./dist 文件夹中为你的应用创建一个生产环境的构建版本

不使用构建工具

1.在 HTML 文件中引入

  1. <script src='https://unpkg.com/vue@3'></script>
  3. <div id='app'>{{ message }}</div>
  5. <script>
  6.   Vue.createApp({
  7.     data() {
  8.       return {
  9.         message: "Hello Vue!";
  10.       }
  11.     }
  12.   }).mount("#app")
  13. </script>

该版本的所有 API 都暴露在了全局变量 Vue 上。

为保持一致性，可以直接在代码中导入 ‘vue’，例如

  1. <script type='importmap'>
  2.   {
  3.     'imports': {
  4.       'vue': 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
  5.     }
  6.   }
  7. </script>
  9. <div id='app'>{{ message }}</div>
  11. <script type='module'>
  12.   import { createApp } from "vue"
  14.   createApp({
  15.     data() {
  16.       return {
  17.         message: "Hello Vue"
  18.       }
  19.     }
  20.   }).mount("#app")
  21. </script>

注意点
importmap是一浏览器原生功能，目前只有基于 Chromium 的浏览器支持导入映射表
不支持导入映射表的浏览器，使用 es-module-shims 来进行 polyfill
基于导入映射表的配置仅用于学习

2.通过 HTTP 提供服务
我们可能需要将代码分割成单独的 JavaScript 文件，以便更容易管理

  1. <!-- index.html -->
  2. <script type='module'>
  3.   import { createApp } from "vue"
  4.   import MyComponent from "./my-component.js";
  6.   createApp(MyComponent).mount("#app")
  7. </script>
  9. // my-component.js
  10. export default {
  11.   data() {
  12.     return { count: 0 }
  13.   },
  14.   template: `<div>count is {{ count }}</div>`
  15. }

为了使其工作，需要通过 http:// 协议为你的 HTML 提供服
在 HTML 文件所在文件夹下运行 npx serve
也可以使用其他任何可以基于正确的 MIME 类型服务静态文件的 HTTP 服务器

下一步

  1. 继续阅读该指南<br />        该指南会带你了解框架的每个方面的细节<br />        [https://staging-cn.vuejs.org/guide/essentials/application.html](https://staging-cn.vuejs.org/guide/essentials/application.html)<br />    尝试教程<br />        适合喜欢边动手边学的读者<br />        [https://staging-cn.vuejs.org/tutorial/](https://staging-cn.vuejs.org/tutorial/)<br />    查看示例<br />        浏览核心功能和常见用户界面的示例<br />        [https://staging-cn.vuejs.org/examples/](https://staging-cn.vuejs.org/examples/)

2.基础

创建一个Vue应用

应用实例

每个 Vue 应用都是通过 createApp 函数创建一个新的 应用实例

  1. import { createApp } from 'vue'
  3. const app = createApp({
  4.   /* 根组件选项 */
  5. })

根组件

传入 createApp 的对象实际上是一个“根组件”，其他组件将作为根组件的子组件。
如果你使用单文件组件，根组件可从其他文件导入。

  1. import { createApp } from 'vue'
  2. // 从一个单文件组件中导入根组件
  3. import App from './App.vue'
  5. const app = createApp(App)

挂载应用

  1. 应用实例必须在调用了.mount() 方法后才会渲染出来<br />    mount 接收一个“容器”参数，可以是一个实际的 DOM 元素或是一个 CSS 选择器字符串<br />    mount在整个应用配置和资源注册完成后被调用<br />    返回值为根组件实例
  1. <div id="app"></div>
  3. app.mount('#app')

？DOM 中的根组件模板

在未采用构建流程的情况下使用 Vue 时，可以在挂载容器中直接书写根组件模板

  1. <div id="app">
  2.   <button @click="count++">{{ count }}</button>
  3. </div>
  5. import { createApp } from 'vue'
  7. const app = createApp({
  8.   data() {
  9.     return {
  10.       count: 0
  11.     }
  12.   }
  13. })
  15. app.mount('#app')

当根组件没有设置 template 选项时，Vue 将自动使用容器的 innerHTML 作为模板

应用配置

应用实例会暴露一个 .config 对象允许我们配置一些应用级的选项

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

应用实例还提供了一些方法来注册应用范围内可用的资源

  1. app.component('TodoDeleteButton', TodoDeleteButton)
  2. // 这使得 TodoDeleteButton 在应用的任何地方都是可用的。

多个应用实例

createApp API 允许多个 Vue 应用共存于同一个页面上，而且每个应用都拥有自己的用于配置和全局资源的作用域

  1. const app1 = createApp({
  2.   /* ... */
  3. })
  4. app1.mount('#container-1')
  6. const app2 = createApp({
  7.   /* ... */
  8. })
  9. app2.mount('#container-2')

3.深入组件

4.可重用性

5.内置组件

6.升级规模

7.最佳实践

8.TypeScript

9.进阶主题

核心库

Vue Router
Pinia