当前位置: 首页 > 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操作的复杂性。

相关文章:

什么是Vue

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

python 内置函数和多线程

以下是Python的一些内置函数。这些函数是Python语言提供的基本功能,可以在不需要导入任何其他模块的情况下直接使用。这些函数可以完成广泛的任务,例如数学运算,序列和集合操作,类型转换,文件操作等等。透彻理解这些函…...

【Spring】我抄袭了Spring,手写一套MySpring框架。。。

这篇博客实现了一个简单版本的Spring,主要包括Spring的Ioc和Aop功能 文章目录这篇博客实现了一个简单版本的Spring,主要包括Spring的Ioc和Aop功能🚀ComponentScan注解✈️Component注解🚁在spring中ioc容器的类是ApplicationConte…...

vue中的生命周期

前言 很多时候我们希望能在 vue 生命周期的过程中执行一些操作,生命周期钩子函数也因此诞生了。相信使用过 vue 框架的同学都知道,生命周期的钩子函数允许我们在实例的不同阶段执行各种操作,便于我们更好的控制和使用实例。 生命周期钩子函数…...

硬件原理图设计规范(二)

1、可编程逻辑器件 编号 级别 条目内容 备注 1 推荐 FPGA的LE资源利用率要保证在50%~80%之间,EPLD的MC资源的利用率要保证在50%~90%之间。对于FPGA中的锁相环、RAM、乘法器、DSP单元、CPU核等资源,经过精确预算,…...

复旦微ZYNQ7020全国产替代方案设计

现在国产化进度赶人,进口的芯片只做了个功能验证,马上就要换上国产的。国内现在已经做出来zynq的只有复旦微一家,已经在研制的有上海安路,还有成都华微(不排除深圳国威也在做,毕竟这个市场潜力很大&#xf…...

蓝桥杯真题——自动售水机

2012年第四届全国电子专业人才设计与技能大赛“自动售水机”设计任务书1. 系统框图接下来我们将任务分块: 1. 按键控制单元 设定按键 S7 为出水控制按键,当 S7 按下后,售水机持续出水(继电器接通,指示 灯 L10 点亮&…...

软件质量保证与测试 课程设计 测试报告 缺陷报告撰写方法

测 试 报 告 2020年 6月 1日 测试项目 程序员 测试人 测试阶段: □集成 √系统 □ 测试日志编号清单 1,2,3,4,5,6,7,8,9,10 遗留错误说明:(测试后仍然遗留下来未解决的错误及其说明) 1.系统界面不够友好&…...

vue2和vue3中路由的区别和写法?

前言:Vue 2 和 Vue 3 中路由的主要区别在于使用的路由库不同。在 Vue 2 中,通常使用 Vue Router 作为路由库;而在 Vue 3 中,Vue Router 仍然是官方推荐的路由库,但也可以选择使用新的路由库 - Vue Router Next。下面分…...

【数据结构】第四站:单链表力扣题(一)

目录 一、移除链表元素 二、链表的中间结点 三、链表中倒数第k个结点 四、反转链表 五、合并两个有序链表 六、分割链表 一、移除链表元素 题目描述:力扣 法一:直接循环依次判断 对于这个题目,我们最容易想到的一种思路就是&#xff0c…...

SAP BPC简介

BPC是SAP在financial application领域主推的产品,由于从原有产品线发展而来,产品本身有两个版本,分别是基于MS OLAP平台和Netweaver OLAP平台。 整个系统分为.net前台和abap后台。由于abap端的数据结构与.net数据结构的差异,所以没…...

Linux网络概述

写咋前面 今天,我们需要初步的认识一下Linux中网络的基本原理,只有大家对这个有一个初步的认识,后面我们学习起来才会更加的简单容易.计算机语言知识那么多,但是Linux不是.面试时,面试官总是会有问题难住你,我们后面需要看看书,这一点非常重要.我们现在谈的是脉络,.是框架.这些…...

Mybatis --- 获取参数值和查询功能

一、MyBatis的增删改查 1.1、新增 <!--int insertUser();--> <insert id"insertUser">insert into t_user values(null,admin,123456,23,男) </insert> 1.2、删除 <!--int deleteUser();--> <delete id"deleteUser">dele…...

【C++】C++入门,你必须要知道的知识

1.C关键字 &#x1f525;前言&#xff1a; C是在C的基础之上&#xff0c;容纳进去了面向对象编程思想&#xff0c;并增加了许多有用的库&#xff0c;以及编程范式等。熟悉C语言之后&#xff0c;对C学习有一定的帮助。今天的主要目标&#xff1a; 1️⃣ 补充C语言语法的不足&…...

spring(七):事务操作

spring&#xff08;七&#xff09;&#xff1a;事务操作前言一、什么是事务二、事务四个特性&#xff08;ACID&#xff09;三、事务操作&#xff08;搭建事务操作环境&#xff09;四、事务操作&#xff08;Spring 事务管理介绍&#xff09;五、事务操作&#xff08;注解声明式事…...

Word怎么转换成PDF文件格式?思路提供

PDF是一种通用的文件格式&#xff0c;它可以在不同操作系统和设备上保持一致的显示效果。在日常工作或学习中&#xff0c;我们常常需要将Word文档转换为PDF格式&#xff0c;以便更好地进行分享、存档或打印&#xff0c;毕竟Word文档则往往会因为不同版本的软件或者字体等原因而…...

HCIE-Cloud Computing LAB备考第二步:逐题攻破--第五题:规划--根据网络平面规划表,完成ensp中接入交换机SW1/2的配置

我是第五题规划题目的要求之一,需要从这里跳转过来,没看过题目的彭友,可以先跳转过去哈 解题:根据网络平面规划表,在两台交换机上对应的端口表填写服务器的网口号,完成ensp中接入交换机SW1/2的配置 答案 完成交换机端口表 第一:心中划分好“服务器接口表”,考试不需…...

【无标题】Perforce研讨会回顾 | Helix Core在芯片行业的应用实例:芯片项目的版本控制、持续集成及自动化

2023年2月28日&#xff0c;龙智联合全球领先的数字资产管理和DevSecOps工具厂商Perforce共同举办Perforce on Tour网络研讨会——“赋能‘大’研发&#xff0c;助力‘快’交付”。 研讨会上&#xff0c;在芯片行业有15年经验的Perforce Helix Core深度用户——何刚了带来精彩演…...

AdamW 优化器

Adam 优化器于 2014 年推出&#xff0c;其思想&#xff1a;既然知道某些参数移动得更快、更远&#xff0c;则每个参数不需要遵循相同的学习率&#xff0c;因为最近梯度的平方代表每一个权重可以得到多少信号&#xff0c;可以除以这个&#xff0c;确保即使是最迟钝的权重也有机会…...

手把手教你基于HTML、CSS搭建我的相册(上)

The sand accumulates to form a pagoda写在前面HTML是什么&#xff1f;CSS是什么&#xff1f;demo搭建写在最后写在前面 其实有过一些粉丝咨询前端该从什么开始学&#xff0c;那当然是我们的前端基础三件套开始学起&#xff0c;HTML、CSS、javaScript&#xff0c;前端的大部分…...

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间&#xff0c; 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点&#xff0c;不需要开启数据库闪回。…...

Unity3D中Gfx.WaitForPresent优化方案

前言 在Unity中&#xff0c;Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染&#xff08;即CPU被阻塞&#xff09;&#xff0c;这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案&#xff1a; 对惹&#xff0c;这里有一个游戏开发交流小组&…...

理解 MCP 工作流:使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

学习STC51单片机32(芯片为STC89C52RCRC)OLED显示屏2

每日一言 今天的每一份坚持&#xff0c;都是在为未来积攒底气。 案例&#xff1a;OLED显示一个A 这边观察到一个点&#xff0c;怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 &#xff1a; 如果代码里信号切换太快&#xff08;比如 SDA 刚变&#xff0c;SCL 立刻变&#…...

安卓基础(aar)

重新设置java21的环境&#xff0c;临时设置 $env:JAVA_HOME "D:\Android Studio\jbr" 查看当前环境变量 JAVA_HOME 的值 echo $env:JAVA_HOME 构建ARR文件 ./gradlew :private-lib:assembleRelease 目录是这样的&#xff1a; MyApp/ ├── app/ …...

LangFlow技术架构分析

&#x1f527; LangFlow 的可视化技术栈 前端节点编辑器 底层框架&#xff1a;基于 &#xff08;一个现代化的 React 节点绘图库&#xff09; 功能&#xff1a; 拖拽式构建 LangGraph 状态机 实时连线定义节点依赖关系 可视化调试循环和分支逻辑 与 LangGraph 的深…...

针对药品仓库的效期管理问题,如何利用WMS系统“破局”

案例&#xff1a; 某医药分销企业&#xff0c;主要经营各类药品的批发与零售。由于药品的特殊性&#xff0c;效期管理至关重要&#xff0c;但该企业一直面临效期问题的困扰。在未使用WMS系统之前&#xff0c;其药品入库、存储、出库等环节的效期管理主要依赖人工记录与检查。库…...

渗透实战PortSwigger Labs指南:自定义标签XSS和SVG XSS利用

阻止除自定义标签之外的所有标签 先输入一些标签测试&#xff0c;说是全部标签都被禁了 除了自定义的 自定义<my-tag onmouseoveralert(xss)> <my-tag idx onfocusalert(document.cookie) tabindex1> onfocus 当元素获得焦点时&#xff08;如通过点击或键盘导航&…...

python可视化:俄乌战争时间线关键节点与深层原因

俄乌战争时间线可视化分析&#xff1a;关键节点与深层原因 俄乌战争是21世纪欧洲最具影响力的地缘政治冲突之一&#xff0c;自2022年2月爆发以来已持续超过3年。 本文将通过Python可视化工具&#xff0c;系统分析这场战争的时间线、关键节点及其背后的深层原因&#xff0c;全面…...

解密鸿蒙系统的隐私护城河:从权限动态管控到生物数据加密的全链路防护

摘要 本文以健康管理应用为例&#xff0c;展示鸿蒙系统如何通过细粒度权限控制、动态权限授予、数据隔离和加密存储四大核心机制&#xff0c;实现复杂场景下的用户隐私保护。我们将通过完整的权限请求流程和敏感数据处理代码&#xff0c;演示鸿蒙系统如何平衡功能需求与隐私安…...