Vue 是什么？

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

下面是一段示例代码，其功能用于实现一个简单的计数器：

import { createApp } from 'vue'

createApp({
  data() {
    return {
      count: 0
    }
  }
}).mount('#app')

<div id="app">
  <!-- 点击按钮对 count 变量执行加一操作， 并实时渲染到按钮上 -->
  <button @click="count++">
    Count is: {{ count }}
  </button>
</div>

上面的示例展示了 Vue 两个核心的功能点：

• 声明式：Vue 基于标准的 HTML 语法上做了一层拓展，我们可以通过声明式的描述 HTML 与 JavaScript 状态之间的关系，如示例中的插值语句 {{ count }}、点击事件 @click="count++"；
• 响应式渲染 ： Vue 会自动跟踪 JavaScript 状态，并实时更新 Dom 元素。无需再像 JQuery 那样手动更新 Dom 元素。

渐进式框架

Vue 是一个功能强大框架，也是一个生态。你可以用不同的方式来使用它：

• 无需构建步骤，渐进式增强静态的 HTML
• 在任何页面中作为 Web Components 嵌入
• 单页应用 (SPA)
• 全栈 / 服务端渲染 (SSR)
• Jamstack / 静态站点生成 (SSG)
• 开发桌面端、移动端、WebGL，甚至是命令行终端中的界面

怎么理解渐进式这个词？

你可以这样理解它： Vue 非常灵活，可以渐近式的适配不同的开发场景。举个栗子，比如老项目使用的 JQuery，而我又想使用 Vue, 新建页面时，仅需引入 Vue 的库，就可以通过它来开发了，无需构建步骤。由此可见，Vue 在设计上非常注重灵活性，我们 “可以被逐步集成” 它。

组件化

当我们通过构建工具来创建项目时，会看到工程目录中有以 .vue 为后缀的类似 HTML 的文件，它们就是 Vue 组件，文件内部会将一个组件的逻辑（JavaScript）, 模板（HTML) 和样式 （CSS）封装在一起。现在大致看一眼，后面小节会详细学习。