什么是Vue

Vue是什么?

渐进式JavaScript 框架，易学易用，性能出色，适用场景丰富的 Web 前端框架。

使用Vue的方法

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

Vue的核心概念包括：

1. 响应式数据绑定：Vue.js提供了一个系统，可以将数据与DOM元素进行双向绑定。这意味着当数据发生变化时，Vue会自动更新DOM，反之亦然。
2. 组件系统：Vue有一个强大的组件系统，使开发人员可以创建可重用的自定义元素，这些元素可以封装单独的UI组件。
3. 指令：Vue指令是特殊的HTML属性，它们提供了在模板中直接操作DOM的方法。
4. 计算属性和侦听器：计算属性可以用于处理复杂逻辑并返回结果，侦听器则允许开发人员对特定数据或属性变化做出响应。
5. 模板系统：Vue使用基于HTML的模板语法，允许开发人员声明式地将已经渲染的DOM绑定到底层Vue实例的数据。
6. Vue Router：这是Vue.js的官方路由管理器。它与Vue实例一起使用，允许开发人员构建单页应用程序（SPA）。
7. Vuex：这是一个Vue.js的状态管理模式和库。它提供了一种集中存储来存储所有组件的状态，并且规定了一些规则保证状态以一种可预测的方式发生改变。

Vue的两个版本

在开发中，Vue有两个大版本可以选择 Vue2 和 Vue3，老项目一般都是 Vue2 的，而新项目一般都选择
Vue3 开发，Vue3包含了Vue2的内容，Vue也增加了许多特性。

书写风格

选项式API和组合式API

点击按钮累加数字案例：

<div id="app">
  <button @click="count++">
    Count is: {{ count }}
  </button>
</div>

选项式API(Vue2的风格)

使用选项式API，我们可以用包含多个选项的对象来描述组件的逻辑例如data 和 methods ，选项所定义的属性都会暴露在函数内部的this上，他会指向当前组件实例。

import { createApp } from 'vue'

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

组合式API(Vue3的风格)

import { createApp, ref } from 'vue'

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

用途

• 不需要使用构建工具，低复杂度场景下用，使用选项式（单文件时）
• 整个项目都打算用Vue来写时候用组合式API（更加推荐用组合式API）+单文本组件