从Vue.js窥探前端行业

近年来前端开发趋势

1.旧浏览器逐渐淘汰,移动端需求增加:

旧浏览器主要指的是IE6-IE8,它是不支持ES5特性的;IE9+、chrome、sarafi、firefox对ES5是完全支持的,移动端大部分浏览器是基于webkit内核,所以ES5在移动端也是全面支持的,因此vue可以在移动端以及现代浏览器中大显身手。

2.前端交互越来越多,功能越来越复杂:

现在的前端可谓是包罗万象,比如高大上的技术库和框架、酷炫的运营活动页面、H5小游戏,当然前端技术的应用在更多具有商业价值的应用上,比如下图。

3.架构从传统后台MVC向REST API+ 前端 MV*(MVC、MVP、MVVM) 迁移

在传统的MVC下,当前前端和后端发生数据交互后会刷新整个页面,从而导致比较差的用户体验。因此我们通过Ajax的方式和后端REST API作通讯,异步的刷新页面的某个区块,来优化和提升体验,同时把MVC拿到前端来做

回到顶部(go to top)

MVVM框架

1.MVVM框架基本概念:它主要包括各部分View、ViewModel、Model,如下图。在MVVM架构下,视图和数据是不能直接通讯的,它会通过ViewModel这个中间件来通讯。ViewModel起的是一个观察者的职位:当数据变化,ViewModel观察到变化,并通知视图做相应的更新;而用户操作视图,ViewModel也能监听到变化,然后通知数据做改动,从而实现了数据的双向绑定。

2.MVVM框架的应用场景

MVVM框架针对具有复杂交互逻辑的前端应用,它提供了基础的架构抽象,并且通过Ajax数据持久化,保证前端用户体验。

所以MVVM框架的好处显而易见:当前端对数据进行操作的时候,可以通过Ajax请求对数据持久化,而不必刷新整个页面,只需改变dom里需要改变的那部分数据内容。特别是在移动端,刷新页面的代价太昂贵。虽然有些资源会被缓存,但是页面的dom、css、js都会被浏览器重新解析一遍,因此移动端页面通常会被做成SPA单页应用。由此在这基础上诞生了很多MVVM框架,比如Angular.js、react.js、vue.js。

回到顶部(go to top)

Vuejs以及其生态

vue.js是由国内的大牛尤雨溪为主要开发的,它起初是个人项目,在2014年初开源就受到广泛关注。起初尤大神把它定位是一个视图库而非框架,但随着vue-router,vue-resource等第三方库的发展,Vuejs逐渐成长为一个框架。

1.它是一个轻量级MVVM框架(只有20来kb)

2.核心思想

①数据驱动:数据(model)改变驱动视图(view)自动更新,DOM是数据的一种自然映射

②组件化:扩展HTML元素,封装可重用的代码

4.github超过35K+的star数,社区完善

回到顶部(go to top)

Vue vs Angular React

Vue官网已对各个主流框架进行了比较详细的对比分析(中文版地址),下面进行简单地总结下;

Vue.js更轻量,gzip后大小只有20k+。Angular有56K,React有44K。

Vue.js相对来说学习曲线比较平稳。

Vue.js吸取了两家之长,借鉴了Angular的指令和react的组件化。

时间: 2024-12-15 12:33:37

从Vue.js窥探前端行业的相关文章

Vue.js前端MVVM框架实战篇

相信大家对vue.js这个前端框架有了一定的了解.想必也想把Vue急切的运用在项目中,看看它的魅力到底有多大?别急,今天我会满足大家的想法. 我们一起来看看“Webpack+Vue”的开发模式相比以往老项目(Gulp+jQuery)的开发模式的魅力在哪里. 一.配置开发环境 1.先安装Node和Webpack 2.建立一个文件夹为:Vue-project,然后初始化生成package.json.运行以下指令: npm init 初始化完成后,添加项目开发所依赖的包 "dependencies&q

什么是Vue.js

VUE.JS 什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App, Vue语法也是可以用于进行手机App开发的,需要借助于Weex) Vue.js 是前端的主流框架之一,和Angular.js.React.js 一起,并成为前端三大主流框架! Vue.js 是一套构建用户界面的框架,只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合.(Vue有配套的第三方类库,可以整合起来做大型项目的开发) 前端的

轻量级MVVM框架Vue.js快速上手(MVVM、SEO单页面应用)

轻量级MVVM框架Vue.js快速上手(MVVM.SEO单页面应用.×××服务器端渲染.Nuxt.js) 网盘地址:https://pan.baidu.com/s/1LkhepNpGAtRjrxp_CVJNIg 密码: d483备用地址(腾讯微云):https://share.weiyun.com/5tTLqQk 密码:pxezuj Vue.js是一套构建用户界面的轻量级MVVM框架,与其他重量级框架不同的是, Vue.js 的核心库只关注视图层,并且非常容易学习,很容易与其它前端技术或已有的项

【前端】Vue.js经典开源项目汇总

Vue.js经典开源项目汇总 原文链接:http://www.cnblogs.com/huyong/p/6517949.html Vue是什么? Vue.js(读音 /vju?/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用. Vue.js 的目标是通过

前端开发之走进Vue.js

Vue.js作为目前最热门最具前景的前端框架之一,其提供了一种帮助我们快速构建并开发前端项目的新的思维模式.本文旨在帮助大家认识Vue.js,了解Vue.js的开发流程,并进一步理解如何通过Vue.js来构建一个中大型的前端项目,同时做好相应的部署与优化工作. 文章将以PPT图片附加文字介绍的形式展开,不会涉及知识点的具体代码,点到为止.有兴趣的同学可以查看相应的文档进行了解. Vue.js简介 从上图的介绍中我们不难发现Vue.js是一款轻量级的以数据驱动的前端JS框架,其和jQuery最大的

Vue.js:轻量高效的前端组件化方案(转载)

摘要:Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.在前端纷繁复杂的生态中,Vue.js有幸受到一定程度的关注,目前在GitHub上已经有5000+的star.本文将从各方面对Vue.js做一个深入的介绍. Vue.js 是我在2014年2月开源的一个前端开发库,通过简洁的 API 提供高效的数据绑定和灵活的组件系统.在前端纷繁复杂的生态中,Vue.js有幸受到一定程度的关注,目前在 GitHub上已经有5000+的star.本文将从各方面对Vue.js做一个深入的介绍. 开发

前端开发工具vue.js开发实践总结

最近有很长时间没有更新博客了,换了公司,全部的心思都放在项目上了.通过这次项目的上线,让我感受最深的是前后端分离后,前端页面的模块化管理,以及前端页面的数据邦定.在接触vue.js之前,我之前端要用到的dom结构,都是通过拼接字符串的方式进行输出的.这种方式最大的痛点是拼接很麻烦,也不是很直观,几乎无法复用,和数据紧密的偶合在一起,维护不方便,太多太多的问题.在同事的推荐下,开始接触vue.js这个开源项目.如果你不知道什么是vue,那么请看这里的介绍http://vuejs.org/. vue

一款简单而不失强大的前端框架——【Vue.js的详细入门教程①】

↓— Vue.js框架魅力 —↓ 前言   Vue.js 是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.Vue 只关注视图层并且采用自底向上增量开发的设计. Vue.js作为一个后起的前端框架,借鉴了Angular .React等现代前端框架/库的诸多特点,取得了相当不错的成绩.Vue.js 自身不是一个全能框架——它只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.另一方面,在与相关工具和支

Vue.js高仿饿了么外卖App 前端框架Vue.js 1.0升级2.0

课程目录:第1章 课程简介介绍课程的学习目标和学习内容.第2章 Vuejs介绍从前端开发趋势分析开始,引入 MVVM 开发框架和 Vue.js,接着对比流行框架Angular 和 React,最后详细介绍 Vue.js 的核心思想-数据驱动和组件化.第3章 Vue-cli 开启 Vuejs 项目介绍 Vue 项目的脚手架,如何安装,对脚手架生成的目录文件做介绍,介绍 Vue 组件的编写方法,最后运行 demo 项目并介绍 webpack 构建脚本来说明 demo 的运行原理.第4章 项目实战-准