松鼠乐园 松鼠乐园
  • 注册
  • 登录
  • 首页
  • 快捷入口
    • Vue
    • Tensorflow
    • Springboot
    • 语言类
      • CSS
      • ES5
      • ES6
      • Go
      • Java
      • Javascript
    • 工具类
      • Git
      • 工具推荐
    • 服务器&运维
      • Centos
      • Docker
      • Linux
      • Mac
      • MySQL
      • Nginx
      • Redis
      • Windows
    • 资源类
      • 论文
      • 书籍推荐
      • 后端资源
      • 前端资源
      • html网页模板
      • 代码
    • 性能优化
    • 测试
  • 重大新闻
  • 人工智能
  • 开源项目
  • Vue2.0从零开始
  • 广场
首页 › Vue › 从VUE到前端的粗浅理解

从VUE到前端的粗浅理解

迦娜王
3年前Vue
560 0 1

小学vue并且应用实战项目一段时间,网上各种大神大牛的分享文章读着让人受益匪浅啊,也算是一个阶段总结和理解,遂作下文。

VUE前世今身

vue的作者尤雨溪(Evan You),无锡人,复旦附中,本科毕业于Colgate University,后在Parsons设计学院获得Design & Technology艺术硕士学位,现任职于纽约Google Creative Lab。同时还加盟阿里巴巴Weex团队,作为技术顾问。2015年的时候花了两天时间,打造了一个HTML5版的Clear。再某群讨论的时候,说vue是他2014年的时候花了三天时间搭的框架。现在经过版本迭代官方现在2.x版本了。vue-cli已经到3.0版本了。

vue属于渐进式前端框架,这样你可以再现有的成品项目直接使用,也可以依托vue成熟的体系,讲vuex,vue-router,core之类的都应用进去。

前端思想变化

几年前,前端俗称切图仔。主要就是html css js。把设计给的效果图写成代码,调试好浏览器兼容性(那时候万恶的IE6啊,现在依然是万恶的IE啊),然后丢给后端,后端将PHP,JSP各种后端语言做嵌套。基本上不存在什么逻辑上问题,基本上就是写什么,显什么。不停的在设置这里多大,多高,多宽,什么颜色等等

后来有了JQ,可以方便的操作各种DOM,各种特效满天飞的东东如雨后春笋啊。前端开始分离层级了。有专门切图的和比较高级的专门写动效,插件的。普通前端写各种炫酷特效,只要去网站上现成的jq贴上去,ok,妥妥的。这时候,dom和里面的元素更好更容易的链接起来了。JQ可以说是一家独大的引领了一个前端时代啊。

随着最近几年更新,HTML CSS JS这三剑客也都各种鸟枪换炮。HTML=>HTML5 CSS=>CSS3 JS的es2,3=>es6。各种新技术层出不穷,浏览器大有想要统治一切的野心。谷歌就开发了云操作系统,所有的应用程序软件都可以在浏览器实现,虽然现在没有占据多少市场份额,但是对应的技术却…… 在浏览器上做网游、创作软件、各种3D、vr等等都可以再浏览器实现了(扯远了)

这时候三大前端框架火起来了,angular、react、vue。现在的前端框架思想变成MVVM架构。分离的更加彻底。其实类似于当初需要操作dom的部分,也不需要操心了。

演化过程:显示什么就是什么 =》 告诉你改啥就改啥 =》 你自己看着我,我改你自己跟着改。

angular、react、vue

三大框架比较,扒一段。不过这个都是去年的,现在其实中间界限已经越来越模糊了。

React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站, 并于 2013年 5 月开源。React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。

它有以下的特性:

1.声明式设计:React采用声明范式,可以轻松描述应用。

2.高效:React通过对DOM的模拟,最大限度地减少与DOM的交互。

3.灵活:React可以与已知的库或框架很好地配合。

优点:

1. 速度快:在UI渲染过程中,React通过在虚拟DOM中的微操作来实现对实际DOM的局部更新。

2. 跨浏览器兼容:虚拟DOM帮助我们解决了跨浏览器问题,它为我们提供了标准化的API,甚至在IE8中都是没问题的。

3. 模块化:为你程序编写独立的模块化UI组件,这样当某个或某些组件出现问题是,可以方便地进行隔离。

4. 单向数据流:Flux是一个用于在JavaScript应用中创建单向数据层的架构,它随着React视图库的开发而被Facebook概念化。

5. 同构、纯粹的javascript:因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行,预渲染你的应用有助于搜索引擎优化。

6.兼容性好:比如使用RequireJS来加载和打包,而Browserify和Webpack适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。

缺点:

React本身只是一个V而已,并不是一个完整的框架,所以如果是大型项目想要一套完整的框架的话,基本都需要加上ReactRouter和Flux才能写大型应用。

从VUE到前端的粗浅理解

Vue是尤雨溪编写的一个构建数据驱动的Web界面的库,准确来说不是一个框架,它聚焦在V(view)视图层。

它有以下的特性:

1.轻量级的框架

2.双向数据绑定

3.指令

4.插件化

优点:

1. 简单:官方文档很清晰,比 Angular 简单易学。

2. 快速:异步批处理方式更新 DOM。

3. 组合:用解耦的、可复用的组件组合你的应用程序。

4. 紧凑:~18kb min gzip,且无依赖。

5. 强大:表达式 无需声明依赖的可推导属性 (computed properties)。

6. 对模块友好:可以通过 NPM、Bower 或 Duo 安装,不强迫你所有的代码都遵循 Angular 的各种规定,使用场景更加灵活。

缺点:

1. 新生儿:Vue.js是一个新的项目,没有angular那么成熟。

2. 影响度不是很大:google了一下,有关于Vue.js多样性或者说丰富性少于其他一些有名的库。

3. 不支持IE8

从VUE到前端的粗浅理解

Angular是一款优秀的前端JS框架,已经被用于Google的多款产品当中。

它有以下的特性:

1.良好的应用程序结构

2.双向数据绑定

3.指令

4.HTML模板

5.可嵌入、注入和测试

优点:

1. 模板功能强大丰富,自带了极其丰富的angular指令。

2. 是一个比较完善的前端框架,包含服务,模板,数据双向绑定,模块化,路由,过滤器,依赖注入等所有功能;

3. 自定义指令,自定义指令后可以在项目中多次使用。

4. ng模块化比较大胆的引入了Java的一些东西(依赖注入),能够很容易的写出可复用的代码,对于敏捷开发的团队来说非常有帮助。

5. angularjs是互联网巨人谷歌开发,这也意味着他有一个坚实的基础和社区支持。

缺点:

1. angular 入门很容易 但深入后概念很多, 学习中较难理解.

2. 文档例子非常少, 官方的文档基本只写了api, 一个例子都没有, 很多时候具体怎么用都是google来的, 或直接问misko,angular的作者.

3. 对IE6/7 兼容不算特别好, 就是可以用jQuery自己手写代码解决一些.

4. 指令的应用的最佳实践教程少, angular其实很灵活, 如果不看一些作者的使用原则,很容易写出 四不像的代码, 例如js中还是像jQuery的思想有很多dom操作.

5. DI 依赖注入 如果代码压缩需要显示声明.

vue组件化

现在前端框架允许你将页面拆分成一个一个组件,每个组件都单独写你自己的html css js。

从VUE到前端的粗浅理解

写后端程序的有没有很熟悉。没错,前端也进入了可以拆分组件,面向对象的时代。当年后端程序员难道前端切好的图时候干的第一件事儿是啥,就是拆分,头部,尾部,侧边栏等等。现在这些都可以在前端做了。

前后端的关系

自动nodejs的出现,使用js脚本语言,也可以进行后端的搭建编写。便有人讲,前端一统天下了。曾经也和朋友讨论过这个问题,其实nodejs虽然使用js编写了服务端脚本,其实已经是后端内容了,只是语言不同而已。

再加上api思想的崛起,其实是前后端都变的专注。后端逐渐演变成一个数据中心,通过资源化、接口化的思想向外提供数据,在提供数据的同时,也根据项目的体量更加专注的去处理高并发、高性能的应对方案,分布式、负载均衡、虚拟化、微服务、消息阵列等等为后端提出更高的要求。前端拿到后端的数据之后,处理web端,APP端,小程序,移动端等多端的呈现问题,逐步演化出了更多新的岗位类型。在技术进步的时代,其实更加细分了职位需求。

文末

仅作思想上的理解,欢迎大牛大神来喷,无脑乱骂就请高抬贵足移步他处。

前端发展至今,对前端行业内的人员提出更高的需求。前端纷纷表示天天出新的技术已经学不过来了。

有人在群里面p了一张vue出4.0的消息,就让前端准备刷碗回家卖猪肉了。尤大神还亲自辟谣

从VUE到前端的粗浅理解

前端路上任重道远,且行且珍惜啊。

1
vue 跨域解决方法
上一篇
vue后台管理框架3——登录功能
下一篇
评论 (0)

请登录以参与评论。

现在登录
聚合文章
Servicios profesionales Organizaciones
1年前
在Gitee收获近 5k Star,更新后的Vue版RuoYi有哪些新变化?
1年前
vue3.x reactive、effect、computed、watch依赖关系及实现原理
1年前
Vue 3 新特性:在 Composition API 中使用 CSS Modules
1年前
标签
AI AI项目 css docker Drone Elaticsearch es5 es6 Geometry Go gru java Javascript jenkins lstm mysql mysql优化 mysql地理位置索引 mysql索引 mysql规范 mysql设计 mysql配置文件 mysql面试题 mysql高可用 nginx Redis redis性能 rnn SpringBoot Tensorflow tensorflow2.0 UI设计 vue vue3.0 vue原理 whistle ZooKeeper 开源项目 抓包工具 日志输出 机器学习 深度学习 神经网络 论文 面试题
1
相关文章
在Gitee收获近 5k Star,更新后的Vue版RuoYi有哪些新变化?
vue3.x reactive、effect、computed、watch依赖关系及实现原理
Vue 3 新特性:在 Composition API 中使用 CSS Modules
新手必看的前端项目去中心化和模块化思想
松鼠乐园

资源整合,创造价值

小伙伴
墨魇博客 无同创意
目录
重大新闻 Centos CSS Docker ES5 ES6 Go Java Javascript Linux Mac MySQL Nginx Redis Springboot Tensorflow Vue Vue2.x从零开始 Windows 书籍推荐 人工智能 前端资源 后端资源 壁纸 开源项目 测试 论文
Copyright © 2018-2022 松鼠乐园. Designed by nicetheme. 浙ICP备15039601号-4
  • 重大新闻
  • Centos
  • CSS
  • Docker
  • ES5
  • ES6
  • Go
  • Java
  • Javascript
  • Linux
  • Mac
  • MySQL
  • Nginx
  • Redis
  • Springboot
  • Tensorflow
  • Vue
  • Vue2.x从零开始
  • Windows
  • 书籍推荐
  • 人工智能
  • 前端资源
  • 后端资源
  • 壁纸
  • 开源项目
  • 测试
  • 论文
热门搜索
  • jetson nano
  • vue
  • java
  • mysql
  • 人工智能
  • 人脸识别
迦娜王
坚持才有希望
1224 文章
35 评论
242 喜欢
  • 1
  • 0
  • Top