Vue 2 发布于2016年， 已于2023年12月31日停止维护
什么是 Vue？
Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套 声明式 的、组件化 的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。
什么是单文件组件？
每个 .vue 文件都是一个单文件组件（Single-File Components，缩写为 SFC），可以直接称之为组件，它的内部结构由三部分构成：
<template>
<!-- 编写组件模板 -->
</template>
<script>
// 声明变量编写js逻辑代码
</script>
<style>
/* 编写样式 */
</style>
什么是模板？
模板对应的是 .vue 文件 template 部分。
声明式渲染和响应性
简而言之，声明式渲染允许我们通过Vue语法在模版上绑定数据和方法，通过响应性在改变的数据后页面也会更新。
文档提供了一组代码示例：
import { createApp, ref } from 'vue'
createApp({
setup() {
return {
count: ref(0)
}
}
}).mount('#app')
<div id="app">
<button @click="count++">
Count is: {{ count }}
</button>
</div>
什么是声明式渲染？
声明式渲染：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。
大概就是Vue提供了 .vue 文件（SFC）的形式来编写组件，我们可以直接在模板中通过Vue特定的语法在需要的位置绑定数据和方法，通过响应性自动更新DOM，不需要我们再像写原生HTML和JavaScript那样获取DOM后更新innerHTML。
<!--index.html-->
<!--button标签的内容1是静态数据-->
<button onclick="increment"> 1 <button>
<template>
<!--App.vue-->
<!--我们直接声明了 button 的内容是个变量-->
<button @click="count++"> {{ count }} </button>
</template>
上面静态的1和下面count变量，可能就是最直观的解释 "使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系"
什么是响应性？
响应性：Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM。
像上述代码示例一样，我们点击按钮会触发 count++ ，同时Vue也知道 count 发生改变，并且每次都会去将最新的值渲染到按钮内部对应位置，页面上内容也会同步更新。
什么是渐进式框架？
它是一个可以与你共同成长、适应你不同需求的框架。
刚开始你可以在HTML项目中引入Vue编写部分内容，后期也可以直接使用Vue搭配其他库 (vue-router、 pinia、 vitejs) 来编写整个项目。
组合式API和选项式API
建议大家了解选项式，多使用组合式API。
