一、简介

一套用于构建用户界面的渐进式框架。

核心思想是数据驱动：数据映射视图，数据的修改会自动引起视图的改变。

双向数据绑定：数据的改变会引起视图的变化，视图的变化也会引起数据的变化，这就是双向数据绑定。

二、如何理解Vue渐进式框架

Vue框架本身是分层的设计：

  1. 核心，视图渲染
  2. 组件化
  3. 单页面路由
  4. 状态管理
  5. 构建系统

一开始不必使用上框架的全部知识，根据需要自行选择即可。

三、前端三大框架

框架名 出现时间 所属 一开始的特色
Angular 2009年 谷歌 指令系统、双向数据绑定
React 2013年 Facebook 虚拟DOM、组件化
Vue 2015年 尤玉溪 指令系统、双向数据绑定、虚拟DOM、组件化

四、MVC 、MVVM

都是一种架构思想。

1. MVC

M：模型（Model）
V: 视图（View）
C： 控制器（Controller）

各部分的通信方式

Vue - 001 - 简介 - 图1

  1. View 传送指定到 Controller
  2. Controller 完成业务逻辑后，要求 Model 改变状态
  3. Model 将新的数据发送到 View, 用户得到反馈

所有通信都是单向的。

2. MVVM

M：模型（Model）
V: 视图（View）
VM： 视图模型（ViewModel）

各部分的通信方式

Vue - 001 - 简介 - 图2

  1. View 与 Model 不发生联系，都通过 ViewModel 传递
  2. View 与 ViewModel 之间双向绑定：View 的变动，自动反映在 ViewModel ，反之亦然。

Angular、Vue 都采用了这种模式。

五、Hello Vue

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Document</title>
  6. </head>
  7. <body>
  8.   <!-- 
  10.     1. 定义一个挂载点
  11.     2. 引入 Vue js
  12.     3. 实例化 Vue
  14.    -->
  16.   <div id="app">
  17.     <h1>Hello Vue</h1>
  18.     <p>My name is {{ name }}</p>
  19.   </div>
  21.   <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
  22.   <script>
  23.     var vm = new Vue({
  24.       el: '#app',
  26.       data: {
  27.         name: '张三'
  28.       }
  29.     })
  30.   </script>
  31. </body>
  32. </html>

六、参考链接