# 什么是 Vue.js？ Vue.js 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。 # Vue.js 是解决什么问题的？ 1. 页面局部刷新，响应速度快，不需要每次加载所有的css/js。 1. 前后端分离。 1. 单页面应用。 单页应用的精髓是点击任何链接都不会引起页面的整体刷新，只会通过JavaScript替换页面的局部内容。 # Vue.js 的两个核心 * **声明式渲染**：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。 * **响应性**：Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM。 # Vue.js 是渐进式框架 Vue 是一个框架，也是一个生态。其功能覆盖了大部分前端开发常见的需求。但 Web 世界是十分多样化的，不同的开发者在 Web 上构建的东西可能在形式和规模上会有很大的不同。考虑到这一点，Vue 的设计非常注重灵活性和“可以被逐步集成”这个特点。根据你的需求场景，你可以用不同的方式使用 Vue： * 无需构建步骤，渐进式增强静态的 HTML * 在任何页面中作为 Web Components 嵌入 * 单页应用 (SPA) * 全栈 / 服务端渲染 (SSR) * Jamstack / 静态站点生成 (SSG) * 开发桌面端、移动端、WebGL，甚至是命令行终端中的界面 # 单文件组件 在大多数启用了构建工具的 Vue 项目中，我们可以使用一种类似 HTML 格式的文件来书写 Vue 组件，它被称为**单文件组件**(也被称为`*.vue`文件，英文 Single-File Components，缩写为**SFC**)。顾名思义，Vue 的单文件组件会将一个组件的逻辑 (JavaScript)，模板 (HTML) 和样式 (CSS) 封装在同一个文件里。下面我们将用单文件组件的格式重写上面的计数器示例： # Vue.js 的两种代码方式（API风格） vue.js 3 有两种代码方式：Option API 和Composition API。 ## 选项式 API (Options API) 使用选项式 API，我们可以用包含多个选项的对象来描述组件的逻辑，例如`data`、`methods`和`mounted`。选项所定义的属性都会暴露在函数内部的`this`上，它会指向当前的组件实例。 ## 组合式 API (Composition API) 通过组合式 API，我们可以使用导入的 API 函数来描述组件逻辑。在单文件组件中，组合式 API 通常会与[`<script setup>`](https://cn.vuejs.org/api/sfc-script-setup.html)搭配使用。这个`setup`attribute 是一个标识，告诉 Vue 需要在编译时进行一些处理，让我们可以更简洁地使用组合式 API。比如，`<script setup>`中的导入和顶层变量/函数都能够在模板中直接使用。 # Webpack 的安装 npm install --save-dev webpack