vue第1篇前端的发展历史

news2024/12/23 4:28:29

一  vue的发展历史

1.1 vue

vue是一个渐进式的javascript框架,Vue 的核心库只关注视图层,方便与第三方库或既有项目整合。

1.2 前端知识核心快捷汇总

Soc原则:关注点分离原则

HTML + CSS + JS : 视图 : 刷新后端提供的数据展示给用户看。

网络通信 : axios

页面跳转 : vue-router

状态管理:vuex

Vue-UI : ICE , Element UI

1.3 网页三要素

1.HTML(结构):超文本标记语言(Hyper Text Markup Language),决定网页的结构和内容

2.CSS(表现):层叠样式表(Cascading Style Sheets),设定网页的表现样式。

3.JavaScript(行为):是一种弱类型脚本语言,其源码不需经过编译,而是由浏览器解释运行,用于控制网页的行为

1.4 js的分类

1.JQuery:大家熟知的JavaScript库,优点就是简化了DOM操作,缺点就是DOM操作太频繁,影响前端性能;在前端眼里使用它仅仅是为了兼容IE6,7,8;

2.Angular:Google收购的前端框架,由一群Java程序员开发,其特点是将后台的MVC模式搬到了前端并增加了模块化开发的理念,与微软合作,采用了TypeScript语法开发;对后台程序员友好,对前端程序员不太友好;最大的缺点是版本迭代不合理(如1代–>2 代,除了名字,基本就是两个东西;截止发表博客时已推出了Angular6)

3.React:Facebook 出品,一款高性能的JS前端框架;特点是提出了新概念 【虚拟DOM】用于减少真实 DOM 操作,在内存中模拟 DOM操作,有效的提升了前端渲染效率;缺点是使用复杂,因为需要额外学习一门【JSX】语言;

4.Vue:一款渐进式 JavaScript 框架,所谓渐进式就是逐步实现新特性的意思,如实现模块化开发、路由、状态管理等新特性。其特点是综合了 Angular(模块化)和React(虚拟 DOM) 的优点;

5.Axios:前端通信框架;因为 Vue 的边界很明确,就是为了处理 DOM,所以并不具备通信能力,此时就需要额外使用一个通信框架与服务器交互;当然也可以直接选择使用jQuery 提供的AJAX 通信功能;

1.5 前端的ui框架

1.Ant-Design:阿里巴巴出品,基于React的UI框架

2.ElementUI、iview、ice:饿了么出品,基于Vue的UI框架

3.BootStrap:Teitter推出的一个用于前端开发的开源工具包

4.AmazeUI:又叫“妹子UI”,一款HTML5跨屏前端框架

1.6三端同一

混合开发(Hybrid App)

主要目的是实现一套代码三端统一(PC、Android:.apk、iOS:.ipa)并能够调用到设备底层硬件(如:传感器、GPS、摄像头等),打包方式主要有以下两种:

1云打包:HBuild -> HBuildX,DCloud 出品;API Cloud

2本地打包: Cordova(前身是 PhoneGap)

微信小程序

详见微信官网,这里就是介绍一个方便微信小程序UI开发的框架:WeUI

1.7项目管理工具

1.NPM:项目综合管理工具,类似于Maven

2.YARN:NPM的替代方案,类似于Maven和Gradle的关系

1.8 主流前端ui框架

1.Vue.js

2.iview是一个强大的基于Vue的UI库,属于前端主流框架,选型时可考虑使用,主要特点是移动端支持较多

3.Element是饿了么前端开源维护的Vue UI组件库,属于前端主流框架,选型时可考虑使用,主要特点是桌面端支持较多

4.ice 飞冰是阿里巴巴团队基于React/Angular/Vue的中后台应用解决方案,主要组件还是以React为主, 截止2019年02月17日更新博客前对Vue的支持还不太完善,目前尚处于观望阶段

5.Vant UI是有赞前端团队基于有赞统一的规范实现的Vue组件库, 提供了-整套UI基础组件和业务组件

6.cube-ui是滴滴团队开发的基于Vue js实现的精致移动端组件库

7.Flutter是谷歌的移动端UI框架, 可在极短的时间内构建Android和iOS上高质量的原生级应用

8.mpvue是美团开发的一个使用Vue.js开发小程序的前端框架, 目前支持微信小程序、百度智能小程序,头条小程序和支付宝小程序。

9.WeUI是一套同微信原生视觉体验一致的基础样式库, 由微信官方设计团队为微信内网页和微信小程序量身设计, 令用户的使用感知更加统一

1.9 MV*模式

此处的MV*模式如下:

1.MVC(同步通信为主) :Model、View、Controller

2.MVP(异步通信为主) :Model、View、Presenter

3.MVVM(异步通信为主):Model、View、View Model为了降低前端开发复杂度,涌现了大量的前端框架,比如:Angular JSReactVue.jsEmber JS等, 这些框架总的原则是先按类型分层, 比如Templates、Controllers、Models, 然后再在层内做切分

1.10 mvvm模式

View层展现的不是Model层的数据, 而是ViewModel的数据, 由ViewModel负责与Model层交互, 这就完全解耦了View层和Model层, 这个解耦是至关重要的, 它是前后端分离方案实施的重要一环。  

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/964608.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

经管博士科研基础【16】一元二次函数的解的公式

1. 一元二次函数的形式 2. 一元二次函数的图形与性质 一元二次函数的图像是一条抛物线,图像定点公式为(-b/2a,4ac-b*b/4a),对称轴位直线x-b/2a。 3. 求根公式 形如ax*xb*xc0的一元二次方程,其求根公式为: 4. 韦达定理 如果x1和…

财报解读:份额企稳、均价上浮,小米高端化驶入正轨?

时隔半个月,在雷军那场颇有反响的以“成长”为主题的个人演讲之后,小米发布了今年二季度财报。二季报中亮眼的财务数据,为雷军的演讲提供了一份更加有力的注解,小米经过三年探索,似乎已经找到了高端化的诀窍&#xff0…

C++:日期类

学习目标: 加深对四个默认构造函数的理解: 1.构造函数 2.析构函数 3.拷贝构造 4.运算符重载 实现功能 1.比较日期的大小 2.日期-天数 3.前/后置,-- 这里基本会使用运算符重载 定义一个日期类 class Date { public://1.全缺省参数的构造函数Da…

Ubuntu的C++环境配置

文章目录 1. 如果没有配置C环境会有情况出现2. Ubuntu的C环境配置方法 上篇介绍了Ubuntu中安装和配置QtCreator,下来将会介绍C的相关内容。 C的简介此处不做介绍。 想要在Ubuntu上运行C程序,首先需要先配置好C环境。 1. 如果没有配置C环境会有情况出现…

WEB项目利用Eclipse打包成war包并部署在CentOS8

1、Eclipse把WEB项目打包成war包 2、Xftp上传war包到Linux中安装Tomcat的webapps目录 /usr/local/tomcat/apache-tomcat-9.0.80/webapps3、利用IP地址访问部署的项目 在CentOS中可用 ifconfig找到对应的IP地址 http://192.168.122.2:8080/CentOS-Web/index.html

基于SSM的物资管理系统的设计与实现(论文+源码)_kaic

【摘 要】此物资管理系统是针对生产型企业开发的。通过分析企业的实际管理工作中存在的问题,与管理系统开发的详细步骤及系统开发的原理,并利用计算机的运算速度快、存储容量大、处理逻辑问题强等优点,将管理工作与计算机结合起来。根据管理工…

【文心一言】学习笔记

学习资料 《听说文心一言App霸榜了,那必须来一波全方位实测了》 情感陪伴:文心一言 App 可以充当用户的情感树洞,提供知心姐姐、【暖男】等角色扮演,为用户提供情绪疏导、情感分析、约会建议等服务。 1. 模型属性 【提示词工具…

leetcode:1710. 卡车上的最大单元数(python3解法)

难度:简单 请你将一些箱子装在 一辆卡车 上。给你一个二维数组 boxTypes ,其中 boxTypes[i] [numberOfBoxesi, numberOfUnitsPerBoxi] : numberOfBoxesi 是类型 i 的箱子的数量。numberOfUnitsPerBoxi 是类型 i 每个箱子可以装载的单元数量。…

C++算法 —— 分治(2)归并

文章目录 1、排序数组2、数组中的逆序对3、计算右侧小于当前元素的个数4、翻转对 1、排序数组 排序数组 排序数组也可以用归并排序来做。 vector<int> tmp;//写成全局是因为如果在每一次小的排序中都创建一次&#xff0c;更消耗时间和空间&#xff0c;设置成全局的就更高…

ROS-4.创建发布者和订阅者

ros中非长连接的通信使用topic的方式&#xff0c;publisher向topic发布消息&#xff0c;subscriber订阅topic消息&#xff0c;对于非应答模式的通信适合使用该模式&#xff0c;如下图 接下来我们实现一个发布者和订阅者 1. 创建功能包 在实现订阅者和发布者的时候我们需要先…

oled--SSD1315驱动

OLED 接口方式&#xff08;由硬件电路确定&#xff09;&#xff1a;6800、8080、spi、i2c. 常见的驱动芯片&#xff1a;ssd1306、ssd1315。 oled屏幕的发光原理不同于lcd&#xff0c;上电后无法直接显示&#xff0c;需要初始化后才能正常显示。 SSD1315手册资料 SSD1315是一款…

微信小程序手机号快速验证组件调用方式

目录 一、测试环境 二、问题现象 三、总结 手机号验证组件&#xff08;包括快速验证组件和实时验证组件&#xff09;调用后无法对事件进行回调这个问题&#xff0c;先说结论&#xff0c;以下是正确的使用方式&#xff1a; <!-- 手机号快速验证组件 --> <button op…

第三章 图像到图像的映射

文章目录 第三章 图像到图像的映射3.1 单应性变换3.1.1 直接线性变换算法3.1.2 仿射变换 3.2 图像扭曲3.2.1 图像中的图像3.2.2 分段仿射扭曲3.2.3 图像配准 3.3 创建全景图3.3.1 RANSAC3.3.2 稳健的单应性矩阵估计3.3.3 拼接图像 第三章 图像到图像的映射 本章讲解…

Pandas数据分析基础—pandas自带函数map()/apply()/applymap()

文章目录 前言一、Series数据处理1、map()方法2、apply()方法3、applymap()方法总结 二、DataFrame数据处理1、map()方法2、apply()方法3、applymap()方法总结 三、map、apply、applymap三个函数区别 前言 在进行数据处理时&#xff0c;经常会对一个DataFrame展开逐行、逐列、…

three.js(二):webpack + three.js + ts

用webpackts 开发 three.js 项目 webpack 依旧是主流的模块打包工具;ts和three.js 是绝配&#xff0c;three.js本身就是用ts写的&#xff0c;ts可以为three 项目提前做好规则约束&#xff0c;使项目的开发更加顺畅。 1.创建一个目录&#xff0c;初始化 npm mkdir demo cd de…

【项目 计网8】4.23 TCP状态转换 4.24半关闭、端口复用

文章目录 4.23 TCP状态转换关于三次握手四次挥手 4.24半关闭、端口复用端口复用 4.23 TCP状态转换 2MSL(Maximum Segment Lifetime) 主动断开连接的一方&#xff0c;最后进入一个TIME_WAIT状态&#xff0c;这个状态会持续&#xff1a;2msl msl&#xff1a;官方建议&#xff1a;…

Linux 多进程解决客户端与服务器端通信

写一个服务器端用多进程处理并发&#xff0c;使两个以上的客户端可以同时连接服务器端得到响应。每当接受一个新的连接就fork产生一个子进程&#xff0c;让子进程去处理这个连接&#xff0c;父进程只用来接受连接。 与多线程相比的不同点&#xff1a;多线程如果其中一个线程操…

Kubernetes(K8s 1.28.x)部署---创建方式Docker(超详细)

目录 一、基础环境配置&#xff08;所有主机均要配置&#xff09; 1、配置IP地址和主机名、hosts解析 2、关闭防火墙、禁用SELinux 3、安装常用软件 4、配置时间同步 5、禁用Swap分区 6、修改linux的内核参数 7、配置ipvs功能 二、容器环境操作 1、定制软件源 2、安…

RocketMQ消息队列-@RocketMQMessageListener实现原理

使用Spring-RocketMQ时&#xff0c;只需要引入rocketmq-spring-boot-starter包&#xff0c;并且定义以下消费者&#xff0c;就可以很简单的实现消息消费 Component RocketMQMessageListener(topic "first-topic", consumerGroup "my-producer-group", s…

过滤器的应用-Filter

过滤器 1.工作原理 2.创建Filter 2.1通过注解的方式实现 //创建一个类&#xff0c;实现Filter接口 WebFilter(urlPatterns "/myfilter") //urlPatterns表示需要拦截的路径 public class MyFilter implements Filter {Overridepublic void doFilter(ServletReques…