志在指尖
用双手敲打未来

Vue(vue.js框架是什么)

Vue

Vue.js(读音/vju?/,类似于view)是一套构建用户界面的渐进式结构。与其他重量级结构不同的是,Vue选用自底向上增量开发的规划。Vue的核心库只重视视图层,而且十分简略学习,十分简略与其它库或已有项目整合。另一方面,Vue完全有能力驱动选用单文件组件和Vue生态系统支撑的库开发的复杂单页应用。
Vue.js的目标是经过尽可能简略的API实现响应的数据绑定和组合的视图组件。
如果你是有经验的前端开发者,想知道Vue.js与其它库/结构的区别,检查对比其它结构。Vue

vue.js框架是什么

“大白话,讲编程”系列又回来了,这个系列咱们一同学习的是Vue.js基础常识。你没看错,是基础常识。所以,哪怕你入行不久,相信你在的大白话风格下,也能学会。
但还是希望你有开发过html,css,javascript的项目经验,假如你连一点项目经验都没有,亦或许你早已把握Vue.js的常识,那么这个系列不适合你当时的学习阶段。
1、学习目标
经过这一节,你会学会:
(1)现在前端技能运用的趋势
(2)什么是MVVM
(3)Vue.js的长处
(4)Vue.js的两大中心
(5)Vue.js的适用场景
2、诞生布景
近几年来,得益于手机设备的普及和性能的提高,移动端的web需求大量增加,产生了一种叫webapp的东西,也就是移动端的网页运用。
它们功用越来越复杂,交互也越来越酷炫,功用与效果越来越接近于原生的APP。比方下面这些:
前端Vue.js结构
前端Vue.js结构前端Vue.js结构
这种webapp它们不仅仅像h5营销网页相同有酷炫的效果,它们还有复杂的点击、输入、下拉选择,视图切换等复杂的交互。在这样的业务需求下,咱们还是沿袭PC端的开发方案,难免会不太适宜。比方:视图切换。
在PC端,视图切换咱们会用标签进行页面的跳转,但假如在移动端,那就歇菜了,你会遇到这样的画面:
前端Vue.js结构
(比及花儿都谢了)
这个时候用户只能等…..3秒,5秒,8秒…….很难想象,在一个需求频频切换视图的webapp里边,运用标签去完成,对用户来说是很不友爱的,换你你也不愿意等那么久,反正我是不愿意了….
此外,接收用户输入的同时,很可能要及时更新视图,比方用户输入不同的内容,页面就会相对应进行更新,点击不同的选项,就会显现不同的状态等等交互效果。一旦这种交互多了,你要手动地进行操作,代码就容易变得复杂和难以保护。
为了处理webapp这些的体会和开发上的缺乏,咱们决议学习并运用一个MVVM结构——Vue.js
前端Vue.js结构
3、什么是MVVM
MVVM能够拆分成:View—ViewModel—Model三部分,看下面的视图:
前端Vue.js结构
那么,咱们怎么了解MVVM呢?
上图中,左侧的View相当于咱们的DOM内容,咱们所看到的页面视图,右侧的Model相当于咱们的数据对象,比方一个对象的信息:
前端Vue.js结构
而中心的监控者就担任监控两边的数据,并相对应地告诉另一侧进行修改。比方:你在Model层中修改了name的值为:“李四”,那么View视图层显现的“张三”也会主动变成了“李四”,而这个过程就是有ViewModel来操作的,不需求你手动地去写代码去完成(你不必再手动操作DOM了)。
假如你写过复杂的DOM操作,你就能够感受到它带来的便当。
这就是MVVM结构,属于MVVM的JS结构除了Vue.js,还有React.js,Angular.js。
这儿咱们不去剖析详细这3个结构哪个更好,关于技能选型,每个开发团队的情况都不相同,考虑的要素也不相同,只要适宜自己就好。这儿咱们只说一下Vue.js的长处:
(1)Vue.js更轻量更快
(2)更容易上手,易学
前端Vue.js结构
4、Vue的中心
铺垫了这么多,终于讲到了Vue的中心。
那么,咱们就来认识一下Vue.js,这儿摘取一段官网对它的介绍:
经过尽可能简单的API完成呼应的数据绑定和组合的视图组件
这句话有两个关键词:数据绑定和视图组件。
Vue的数据驱动:数据改动驱动了视图的主动更新,传统的做法你得手动改动DOM来改动视图,vuejs只需求改动数据,就会主动改动视图,一个字:爽。再也不必你去操心DOM的更新了,这就是MVVM思想的完成。
视图组件化:把整一个网页的拆分成一个个区块,每个区块咱们能够看作成一个组件。网页由多个组件拼接或许嵌套组成。看下图:
前端Vue.js结构
详细在开发过程中怎样完成一个组件,到底哪些区块能够划分成一个组件,后边的章节咱们再一一介绍,这儿你只需求知道,在Vue.js中,网页是能够当作多个组件组成的即可。
5、适用场景
假如你还在用jquery频频操作你的DOM来更新页面的话,那么,你能够用Vue.js来解放你的DOM操作了。
假如你的项目中有多个部分是相同的,并能够封装成一个组件,那么,你能够试试用Vue.js。
此外,Vue.js的中心完成中运用了ES5的Object.defineProperty特性,IE8及以下版别浏览器是不兼容的,所以,你的项目需求兼容这些较低版别的浏览器的话,那么,Vue.js就不适用了。
毕竟,开发一个项目的目的不是为了运用某个结构。
6、本节小结
为了更好满意当时移动webapp项目的开发需求,MVVM结构诞生,而Vue.js就是这样的一种js结构,其两大中心:数据驱动和组件化。

未经允许不得转载:IT技术网站 » Vue(vue.js框架是什么)
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

志在指尖 用双手敲打未来

登录/注册IT技术大全

热门IT技术

C#基础入门   SQL server数据库   系统SEO学习教程   WordPress小技巧   WordPress插件   脚本与源码下载