推广 热搜: 后台  帝国cms  DESTOON  位置  网站  帝国cms建站  Wordpress教程  MAC系统  内容  destoon模板 

vue.js框架介绍

   日期:2023-06-21     浏览:34    违规举报
 
  初识Vue.js

Vue 是一套用于构建用户界面的渐进式框架,也是一款 Web 应用框架,可创建复杂的单页应用。Vue 关注的核心是 MVC 模式中的视图层,同时,它也能方便地获取数据更新,并通过组件内部特定的方法实现视图与模型的交互。Vue 不仅易于上手,还便于与第三方库或既有项目整合,是当前最受欢迎的开源 Javascript 项目之一。2016 年的一项针对 Javascript 框架的调查表明,Vue 有着 89%的开发者满意度。在 GitHub 上,该项目平均每天能收获 95 颗星,为 GitHub 有史以来星标数第三多的项目。

Vue的首个公开版发布于2014 年 2 月 25 日,它的作者是一个名叫尤雨溪的美国华人。

尤雨溪出生于 1987 年 10 月 31 日,英文名 Evan You,网名尤小右,是一位优秀的前端工程师。尤雨溪作为 Vue Technology LLC 的创始人,一直致力于 Vue 的研究与开发。尤雨溪曾服务于 Meteor、谷歌,在为 AngularJS 工作之后,Vue 的作者尤雨溪开发出了 Vue 框架,并于 2013 年 12 月 8 日在 Hacker News、Echo JS 与 Reddit 的/r/javascript 版块发布了最早的版本。一天之内,Vue 就登上这三个网站的首页。他声称自己的思路是提取 Angular 中为自己所喜欢的部分,构建出一款相当轻量的框架。

简单介绍下Vue的重要发展节点:

2013年,在 Google 工作的尤雨溪,受到 Angular 的启发,开发出了一款轻量级框架,最初命名为 Seed 。

2013.12,更名为Vue(View的法语),图标颜色是代表勃勃生机的绿色,版本号是 0.6.0。

2014.01.24,Vue 正式对外发布,版本号是 0.8.0。

2014.02.25,0.9.0 发布,有了自己的代号:Animatrix,此后,重要的版本都会有自己的代号。

2015.06.13,0.12.0,代号Dragon Ball,Laravel 社区(一款流行的 PHP 框架的社区)首次使用 Vue,Vue 在 JS 社区也打响了知名度。

2015.10.26,1.0.0 Evangelion 是 Vue 历史上的第一个里程碑。同年,vue-router、vuex、vue-cli 相继发布,标志着 Vue从一个视图层库发展为一个渐进式框架。

2016.10.01,2.0.0 是第二个重要的里程碑,它吸收了 React 的虚拟 Dom 方案,还支持服务端渲染。自从Vue 2.0 发布之后,Vue 就成了前端领域的热门话题。

2019.02.05,Vue 发布了 2.6.0 ,这是一个承前启后的版本,在它之后,推出了 3.0.0。

2019.12.05,在万众期待中,尤雨溪公布了 Vue 3 源代码,此时的 Vue 3仍 处于 Alpha 版本。

2020.09.18,Vue.js 3.0 正式发布。

Vue的重要发展节点:

2013年,在 Google 工作的尤雨溪,受到 Angular 的启发,开发出了一款轻量级框架,最初命名为 Seed 。

2013.12,更名为Vue(View的法语),图标颜色是代表勃勃生机的绿色,版本号是 0.6.0。

2014.01.24,Vue 正式对外发布,版本号是 0.8.0。

2014.02.25,0.9.0 发布,有了自己的代号:Animatrix,此后,重要的版本都会有自己的代号。

2015.06.13,0.12.0,代号Dragon Ball,Laravel 社区(一款流行的 PHP 框架的社区)首次使用 Vue,Vue 在 JS 社区也打响了知名度。

2015.10.26,1.0.0 Evangelion 是 Vue 历史上的第一个里程碑。同年,vue-router、vuex、vue-cli 相继发布,标志着 Vue从一个视图层库发展为一个渐进式框架。

2016.10.01,2.0.0 是第二个重要的里程碑,它吸收了 React 的虚拟 Dom 方案,还支持服务端渲染。自从Vue 2.0 发布之后,Vue 就成了前端领域的热门话题。

2019.02.05,Vue 发布了 2.6.0 ,这是一个承前启后的版本,在它之后,推出了 3.0.0。

2019.12.05,在万众期待中,尤雨溪公布了 Vue 3 源代码,此时的 Vue 3仍 处于 Alpha 版本。

2020.09.18,Vue.js 3.0 正式发布。

Vue.js 核心理念

Vue.js(读音/vju:/,发音类似于view)是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。

Vue 的核心库只关注视图层,并且非常容易学习,也非常容易与其他库或已有项目整合。Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。

Vue.js 还提供了 MVVM 数据绑定和一个可组合的组件系统,具有简单、灵活的 API,其目标是通过尽可能简单的 API 实现响应式的数据绑定和可组合的视图组件。

我们也可以说 Vue.js 是一套响应式系统(Reactivity System)。数据模型层(Model)只是普通 Javascript 对象,如下图所示,{ }代表一个 Javascript 对象,修改它则更新相应的 HTML 片段(DOM),这些 HTML 片段也称为“视图(view)”。这会让状态管理变得非常简单且直观,可实现数据的双向绑定,所以我们也称之为响应式系统。

为什么使用 Vue.js

我们都知道完整的网页是由 DOM 组合与嵌套形成最基本的视图结构,再加上 CSS 样式的修饰,使用 Javascript 接受用户的交互请求,并通过事件机制来响应用户交互操作而形成的。

我们把最基本的视图结构(也就是 HTML DOM)拿出来,称为视图层。这个被称为视图层的部分就是 Vue 核心库关注的部分。

Vue.js 为什么关注视图层呢?因为一些页面元素非常多。结构庞大的网页如果使用传统开发方式,数据和视图会全部混合在 HTML 中,处理起来十分不易,并且结构之间还存在依赖或依存关系,代码上就会出现更多问题。

有过前端开发基础的读者都应当了解过 jQuery,jQuery 给予我们简洁的语法和跨平台的兼容性,极大地简化了 Javascript 开发人员遍历 HTML 文档、操作 DOM、事件处理等操作。

用过 jQuery 的读者都有体会,开始页面元素不多,有时会需要一层层地不断向上寻找父辈元素,如$('#xxx').parent().parent(),但后期修改页面结构,代码可能就会变得臃肿,如$('#xxx').parent().parent().parent(),随着产品升级的速度越来越快,修改变得越来越多,页面中相似的关联和嵌套 DOM 元素多得数不清,而 jQuery 选择器及 DOM 操作本身也存在性能缺失问题,想要修改无从下手。

总之,原本轻巧简洁的 jQuery 代码,在产品需求面前变得啰嗦冗长。

但是 Vue.js 解决了这些问题,这些问题将在 Vue 中消失。

Vue.js 的主要特点

Vue.js 是一个优秀的前端界面开发 Javascript 库,它之所以非常火,是因为有众多突出的特点,其中主要的特点有以下几个。

1) 轻量级的框架

Vue.js 能够自动追踪依赖的模板表达式和计算属性,提供 MVVM 数据绑定和一个可组合的组件系统,具有简单、灵活的 API,使读者更加容易理解,能够更快上手。

2) 双向数据绑定

声明式渲染是数据双向绑定的主要体现,同样也是 Vue.js 的核心,它允许采用简洁的模板语法将数据声明式渲染整合进 DOM。

3) 指令

Vue.js 与页面进行交互,主要就是通过内置指令来完成的,指令的作用是当其表达式的值改变时相应地将某些行为应用到 DOM 上。

4) 组件化

组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。

在 Vue 中,父子组件通过 props 传递通信,从父向子单向传递。子组件与父组件通信,通过触发事件通知父组件改变数据。这样就形成了一个基本的父子通信模式。

在开发中组件和 HTML、Javascript 等有非常紧密的关系时,可以根据实际的需要自定义组件,使开发变得更加便利,可大量减少代码编写量。

组件还支持热重载(hotreload)。当我们做了修改时,不会刷新页面,只是对组件本身进行立刻重载,不会影响整个应用当前的状态。CSS 也支持热重载。

5) 客户端路由

Vue-router 是 Vue.js 官方的路由插件,与 Vue.js 深度集成,用于构建单页面应用。Vue 单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来,传统的页面是通过超链接实现页面的切换和跳转的。

6) 状态管理

状态管理实际就是一个单向的数据流,State 驱动 View 的渲染,而用户对 View 进行操作产生 Action,使 State 产生变化,从而使 View 重新渲染,形成一个单独的组件。

Vue.js 有什么优势

Vue 与其他框架相比有什么优势呢?上面我们已经提到了 jQuery,还有其他的前端框架,如 React、Angular 等。相比较而言,Vue 最为轻量化,而且已经形成了完整的一套生态系统,可以快速迭代更新。

作为前端开发人员的首选入门框架,Vue 有很多优势:

Vue.js 可以进行组件化开发,使代码编写量大大减少,读者更加易于理解。

Vue.js 最突出的优势在于可以对数据进行双向绑定(在之后的编写中我们会明显地感觉到这个特点的便捷)。

使用 Vue.js 编写出来的界面效果本身就是响应式的,这使网页在各种设备上都能显示出非常好看的效果。

相比传统的页面通过超链接实现页面的切换和跳转,Vue 使用路由不会刷新页面。

说明:Vue必须在ES5版本以上的环境下使用,一些不支持ES5的旧浏览器中无法运行Vue。

Vue的应用

Vue的定位就是以低门槛起家,市场定位的主要用户自然是中小型企业,当然这不能代表Vue不适合于大型项目!虽然行业内很多人认为Vue不适合于大型项目,但是我认为就算Vue真的不适合大型项目,互联网之广阔,有着足够的空间给Vue的开发者去生存了。

尤雨溪在知乎上对Vue在国际上没影响力的部分回复如下:真要说大机构,GitLab 是 Vue 写的,最近上市了,160 亿美元市值,可还行?Wikimedia(Wikipedia 背后的基金会)全线转向 Vue,算大机构不?NASA 的火箭发射控制系统有部分界面用 Vue 写的,够高大上了么(Vue 的贡献者因此都拿到了 NASA 2020 火星任务的 GitHub 徽章)?Google 的求职系统 careers.google.com 是 Vue 写的,用它投过简历不?苹果 SwiftUI 的教程 Vue 写的,学原生开发的时候看过没?LV 美国官网 Nuxt/Vue 写的,买过几个没?你翻墙上 P 站解决生理需求的时候,Vue 的 logo 也会亮起来,这个流量又如何?

尤雨溪设计Vue的初衷是可以让那些像他一样非科班出身的人也可以简单的编写网页,不懂js的其他设计职业也可以参与其中。只是可能情况有点出乎意料,这玩意火了,而且现在还TND造成了"360行,行行转前端"的奇葩盛况。大量或少或无经验的从业者通过Vue找到了工作。个人认为这是符合尤雨溪的初衷的,因为很多没有任何前端知识的人只需要通过极短的时间(相对其他语言和框架的学习成本)就可以达到找个小公司上班的水平。对此我只能说呵呵了,哈哈哈。

总结:Vue是尤雨溪推出的前端开源框架,简单讲就是用于开发网站,特点是简单易学,能快速上手,目前广泛应用于中小企业,很多非计算机科班出身的同学通过Vue进入了计算机行业工作。

官网资料:https://cn.vuejs.org/v2/guide/index.html
免责声明:
1、本站所收集的部分公开资料来源于互联网,转载的目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。
2、本站部分作品内容是由网友自主投稿和发布、编辑整理上传,对此类内容本站仅提供交流平台,不为其版权负责,更不为其观点承担任何责任。
3、因行业及专业性有限,故未能核验会员发布内容的真实性及有效性,不为其负责,如有虚假或违规内容敬请准备材料图片发邮件到info@n360.cn举报,本站核实后积极配合删除。
4、如果您发现网站上有侵犯您的知识产权的作品,请与我们取得联系,我们会及时处理或删除。
 
打赏
 
更多>同类网站技术
0相关评论

推荐图文
推荐网站技术
点击排行
网站首页  |  关于我们  |  联系方式  |  使用协议  |  免责声明  |  版权隐私  |  信息发布规则  |  网站地图  |  排名推广  |  广告服务  |  积分换礼  |  网站留言  |  RSS订阅  |  违规举报  |  粤ICP备2020081222号
Powered By DESTOON