当前位置: 首页 > news >正文

什么是Vue

✅作者简介:CSDN一位小博主,正在学习前端,欢迎大家一起来交流学习🏆
📃个人主页:白月光777的CSDN博客
🔥系列专栏:Vue从入门到进阶
💬个人格言:但行好事,莫问前程

在这里插入图片描述

什么是Vue

  • Vue.js简介
  • Vue.js的发展历程
  • 主要应用场景
  • Vue.js的优点
  • Vue.js的核心思想
  • Vue与React、Angular比较
  • MVVM框架概述

Vue.js简介

Vue.js(简称Vue)是一套用于构建用户界面的渐进式框架
构建用户界面:即指用于前端开发
渐进式框架:通俗地说就是没必要弄懂Vue的每一个部件和功能就能够使用Vue。只需要从核心功能开始学习,逐渐扩展,掌握多少用多少,也可以把Vue很方便地和其他已有项目或框架相结合。

Vue.js的发展历程

Vue已成为全世界有较大影响的一个开源框架,作者是尤雨溪,曾就职于Google,由于工作中大量接触开源的Java项目而走上开源之路。Vue.js的发展历程如下:
◾2013年12月8日在GitHub上发布了0.6版本
◾2015年10月正式发布了1.0版本
◾2016年10月正式发布了2.0版本
◾2019年12月14日发布了Vue2.6.11版
每个版本的更新日志见GitHub官网

主要应用场景

Vue一般用于开发单页面应用程序(Single Page Application,SPA
单页面应用程序,就是只有一个HTML页面的应用,用户与应用程序交互时,动态更新该页面的Web应用程序,例如手机APP大多数为SPA,由系统的后端管理系统。

Vue.js的优点

易用:只要有HTML、CSS、JavaScript的基础,就可以阅读官网教程开始构建应用
灵活:Vue有不断繁荣的生态系统,可以在一个库和一套完整框架之间自如伸缩。这也是渐进式框架的体现
高效:Vue的运行大小只有28KB,具有超快模拟DOM,以及最省心的优化

Vue.js的核心思想

数据驱动:DOM的渲染、显示、隐藏、等均由数据的状态控制。当我们决定在项目中属于Vue时,需要转变思路,将操作DOM转化为操作数据。因此,写Vue时,尽量不要有操作DOM的代码出现。
组件化:通过扩展HTML元素。封装可重复使用的代码。

Vue与React、Angular比较

Vue、React和Angular都是用于搭建用户界面的JavaScript库
Augular:2009年诞生,起源于个人开发,后来被Google收购,其核心技术为指令和数据技术
React:2013年5月开源,起源于Faceboook的内部项目,其核心技术为组件化和虚拟DOM技术
Vue:吸收了上面两个框架的技术优点,即借鉴了Augular的指令和React的组件化。,可谓后起之秀,其更轻量、更易上手、学习成本低。
Vue不支持IE8及以下版本,因为Vue使用了IE8无法模拟的ECMAScript5特性。

MVVM框架概述

Vue、React、Angular都是MVVM框架,要理解MVVM框架,首先应了解MVC(Model-View-Controller
MVC是一种表现模式。它将软件的UI部分的设计拆分成三个主要部分。分别是Model、View和Controller。MVC的核心是控制器,它负责处理浏览器传送过来的所有请求,并决定要将什么内容响应给浏览器
Model:即模型,用于存储数据的组件。
View:即视图,根据Model数据进行内容展示的组件
Controller:即控制器,接收并处理用户指令,并返回内容。
MVVM(Model-View-ViewModel)本质上就是MVC的改进版,其核心是ViewModel,它提供了对于Model和View的双向数据绑定,通过ViewMode连接View和Model。确保视图与数据的一致性,而这个过程是框架(Vue)自动完成的,无须手动干预。MVVC框架如下图所示。Model即普通的JavaScript对象也就是数据部分。View即前端展示页面,也就是DOM元素。ViewModel即用于双向绑定数据与页面,也就是Vue实例

在这里插入图片描述
MVVC的核心思想:MVVC属于响应式编程模型,当改变View中的数据时,Model中的数据也跟着改变;当改变Model中的数据时,Vue中的数据也随之改变。这样可避免直接操作DOM,降低DOM操作的复杂性。

相关文章:

  • [图像识别]关于cv2库无法安装的故障问题解决,全网最全解决方案!本人亲身测试,参考了stackoverflow、51CTO等博客文章总结而成
  • 菜鸟刷题Day5
  • 22 k8s常用命令
  • 接口的定义和实现
  • 蓝桥杯冲刺 - week1
  • windows微服务部署
  • 深入了解JVM:Java程序背后的核心原理
  • 【新星计划2023】SQL SERVER (01) -- 基础知识
  • 【Node.js】身份认证,Cookie和Session的认证机制,express中使用session认证和JWT认证
  • 算法基础-回溯算法
  • SpringBoot整合Flink(施耐德PLC物联网信息采集)
  • vue3 组件篇 Message
  • clip精读
  • 超级实用,解密云原生监控技术,使用prometheus轻松搞定redis监控
  • MyBatis高频面试题
  • 【前端学习】-粗谈选择器
  • 2017前端实习生面试总结
  • codis proxy处理流程
  • ES6语法详解(一)
  • hadoop集群管理系统搭建规划说明
  • JavaScript 奇技淫巧
  • JavaScript的使用你知道几种?(上)
  • learning koa2.x
  • PHP 7 修改了什么呢 -- 2
  • python大佬养成计划----difflib模块
  • Vue源码解析(二)Vue的双向绑定讲解及实现
  • 从零开始在ubuntu上搭建node开发环境
  • 力扣(LeetCode)56
  • 如何选择开源的机器学习框架?
  • 微信开源mars源码分析1—上层samples分析
  • 写给高年级小学生看的《Bash 指南》
  • 看到一个关于网页设计的文章分享过来!大家看看!
  • No resource identifier found for attribute,RxJava之zip操作符
  • 测评:对于写作的人来说,Markdown是你最好的朋友 ...
  • 东超科技获得千万级Pre-A轮融资,投资方为中科创星 ...
  • #、%和$符号在OGNL表达式中经常出现
  • (04)odoo视图操作
  • (1)(1.11) SiK Radio v2(一)
  • (3)STL算法之搜索
  • (笔记)Kotlin——Android封装ViewBinding之二 优化
  • (附程序)AD采集中的10种经典软件滤波程序优缺点分析
  • (四)TensorRT | 基于 GPU 端的 Python 推理
  • (原创) cocos2dx使用Curl连接网络(客户端)
  • (转)编辑寄语:因为爱心,所以美丽
  • .bat文件调用java类的main方法
  • .NET BackgroundWorker
  • .NET Core 控制台程序读 appsettings.json 、注依赖、配日志、设 IOptions
  • .NET Core6.0 MVC+layui+SqlSugar 简单增删改查
  • .NET 使用配置文件
  • .Net调用Java编写的WebServices返回值为Null的解决方法(SoapUI工具测试有返回值)
  • .net中的Queue和Stack
  • /etc/fstab 只读无法修改的解决办法
  • /proc/stat文件详解(翻译)
  • @FeignClient注解,fallback和fallbackFactory
  • @RestController注解的使用