VUE 前端框架学习总结_vue前端框架知识-优快云博客

本文链接：https://blog.youkuaiyun.com/shiyu_951/article/details/134289819

本文介绍了Vue框架如何通过MVVM模式实现视图层的高效管理，包括数据双向绑定、前端三大框架对比、以及Vue与其他技术如axios和状态管理库的集成。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。
视图层即页面展示（给用户看的部分），刷新后台给的数据：HTML + CSS + JS

Vue 只负责视图层，其他前端部分有以下技术解决
网络通信 ： axios
页面跳转 ： vue-router
状态管理：vuex
Vue-UI : ICE , Element UI

一、前端设计模式（MVVM 模式）

MVVM 模式简介：
- MVVM 是 Model-View-ViewModel 的简写。它本质上就是 MVC 的改进版。MVVM 就是将其中的 View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当下流行的 MVVM 框架有：Vue.js、AngularJS。

什么是 MVVM 模式：
- MVVM 即模型-视图-视图模型。模型指的是后端传递的数据；视图指的是所看到的页面。视图模型是 MVVM 模式的核心，它是连接 View 和 Model 的桥梁。它有两个方向：一是将模型转化成视图，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将视图转化成模型，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。这两个方向都实现的，我们称之为数据的双向绑定。
  - Model : 模型层，在这里表示 JavaScript 对象，也就是对应 data 中的数据
  - View : 视图层,在这里表示DOM (HTML操作的元素)，也就是前端页面视图模板（页面）
  - ViewModel : 连接视图和数据的中间件，Vue.js 就是 MVVM 中的 ViewModel 层的实现者，在 MVVM 架构中，是不允许数据和视图直接通信的，只能通过 ViewModel 来通信，而 ViewModel 就是定义了一个Observer观察者。
    - ViewModel 能够观察到数据的变化，并对视图对应的内容进行更新
    - ViewModel 能够监听到视图的变化，并能够通知数据发生改变

MVVM 模式的数据双向绑定： ViewModel 同时监控 View 层数据和 Model 层数据，后端的 Model 层数据会通过 ViewModel 层对 View 层进行绑定，当 Model 层数据产生变化，View 层数据也同时刷新。

Vue.js 就是一个MVVM的实现者，他的核心就是实现了DOM监听与数据绑定

二、前端核心分析

1 Vue 框架简介

Vue 框架简介：Vue (读音/vju/, 类似于view)是一套用于构建用户界面的渐进式框架，发布于2014年2月。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库(如: vue-router: 跳转，vue-resource: 通信，vuex:管理)或既有项目整合

2 前端三要素

HTML (结构) :超文本标记语言(Hyper Text Markup Language) ，决定网页的结构和内容
CSS (表现) :层叠样式表(Cascading Style sheets) ，设定网页的表现样式
JavaScript (行为) :是一种弱类型脚本语言，其源代码不需经过编译，而是由浏览器解释运行,用于控制网页的行为

3 前端三大 JavaScript 框架 ( Angular、React、Vue)

Angular 框架 :
- Google 收购的前端框架，由一群Java程序员开发，其特点是将后台的MVC模式搬到了前端并增加了模块化开发的理念，与微软合作，采用TypeScript语法开发;对后台程序员友好，对前端程序员不太友好;最大的缺点是版本迭代不合理(如: 1代-> 2代，除了名字，基本就是两个东西;截止发表博客时已推出了Angular6)
React 框架 :
- Facebook出品，一款高性能的JS前端框架;特点是提出了新概念[虚拟DOM]用于减少真实DOM操作，在内存中模拟DOM操作，有效的提升了前端渲染效率;缺点是使用复杂，因为需要额外学习一门[JSX] 语言；
Vue 框架：
- Vue 是一款渐进式JavaScript框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性。其特点是综合了Angular (模块化)和React (虚拟DOM)的优点；
  - Axios 框架（搭配 Vue 使用）:
    - 前端通信框架;因为 Vue 的边界很明确，就是为了处理 DOM，所以并不具备通信能力，此时就需要额外使用一个通信框架与服务器交互;当然也可以直接选择使用 jQuery 提供的 AJAX 通信功能；

三、Vue 基础学习

CDN：
- CDN（内容分发网络）指请求资源的方式，即通过script头去请求对应的脚本资源的一种方式，项目里配置之后不需要通过npm包管理工具去下载配置的包。
  目的：将引用的外部js、css文件剥离开来，不编译到vendor.js中，而是用资源的形式引用，这样浏览器可以使用多个线程异步将vendor.js、外部的js等加载下来，达到加速首页展示效果。
Vue在线cdn:
- < script src=“https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js”>< /script>

1 Vue实现双向数据绑定：

Vue 中的 el 属性： 用于与页面表格进行绑定，当 model 层数据更新，此处表格数据也同时刷新
- el 属性的作用就是绑定id，用来指示vue编译器从什么地方开始解析 vue的语法，可以说是一个占位符。
  相当于一个容器，跟上面的div id = "app"做关联，从此以后上面div id = "app"里面的内容要通过vue来渲染,都要经过vue处理才能看得到上面div里面的内容。并且只能在使用 new 生成实例时才能配置 el 属性，而我们在组件中只是 export 一个配置对象，如果设置了 el 则会报错。
- 代码示例：
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

<div id = "app">
    
    {{message}}
</div>



<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>


<script>
    var  vm = new Vue({
        //1 数据绑定，绑定 div 标签，控制视图层显示的数据，视图层本身没有数据，通过 vm 对象将 模型层数据展示到视图层中
        el: "#app",
        //2 模拟 model 层数据
        data:{
            message: "Hello Vue!"
        }
    });
</script>

</body>
</html>
```
  - 用浏览器执行前端页面
  - 通过 F12 的控制台，将 model 层数据进行修改，校验 VM 层的数据双向绑定
    - 通过 vue 对象调用 model 层中的 message 属性，并进行自定义数据修改，完成在控制台回车执行
       现在数据和 DOM 已经被建立了关联，所有的东西都是响应式的。当使用控制台操作对象的属性时，会发现界面的数据也会实时更新。