认识 VueJS 框架

Vue.js - 渐进式 JavaScript 框架 | Vue.js :::warning ⚠️ 注意
本文档都是基于Vue3进行输出描述的！！！ :::

渐进式框架

我们打开Vue官方文档的时候，首页就能看到一个醒目的大字：渐进式JavaScript框架。

那到底什么是渐进式框架呢？
渐进式框架是Vue对比其他框架后，生成的特定名词，以下是前端三大框架的区别：
1、Angular 是一个综合性框架，一个开放的平台，它更加关注的是项目应用，适合大型项目的开发，因为框架内部的集成非常的完整。

2、React 是用于构建「用户界面」的JS库，更关注于「视图层」，重点在于如何把数据渲染到视图层。使用路由必须依赖 react-router ，react-router是一个单独的库，并不在React中集成。
3、Vue 也只关注于视图层，关于如何把数据渲染到页面，和React不同的是Vue把 Vue Router、Vuex、Nuxt 服务端渲染进行选择集成（你需要使用你就安装，不使用就不必安装，且没有太大的学习难度），Vue处于Angular和React之间。 :::info Vue和React都是自下而上进行开发，从最开始的视图层进行开发，先关注视图层，需要状态管理和路由你就安装集成，这就是渐进式！！！ ::: 而React相对Vue提供的API相对比较少，很多需求代码都需要我们自己去实现，这就是React上手比较困难的原因。

数据绑定和数据流

Vue另外两个重要的概念就是「数据绑定」和「数据流」。

• 数据绑定就是数据和视图渲染之间的关系。
  • React是单向数据绑定，通过event事件触发state来更改视图，只能通过事件去改变视图，视图无法去更改数据。
  • Vue是双向数据绑定，和Angular类似，通过v-model机制来实现视图变化更改数据。
• 数据流就是数据流向的方向，简单说就是父子组件数据按照什么方向流动。
  • React和Vue都是单向数据流，父组件传递数据给子组件作为props，子组件不能直接去更改props数据，只能emit出一个事件，通知父组件进行数据的更改！

创建 Vue 应用

可以通过cdn、vite和vue-cli来创建Vue项目，详见文档：
快速上手 | Vue.js :::info 因为本文档是Vue的深度学习，所以这里就不叙述Vue的基本使用啦，请查看Vue文档进行学习，文档已经写的非常清楚了。 :::