动力节点旗下在线教育品牌  |  咨询热线:400-8080-105 学Java全栈,上蛙课网
首页 > 文章

Vue.js入门指南

06-30 17:49 224浏览
举报 T字号
  • 大字
  • 中字
  • 小字

Vue.js是一套构建用户界面的渐进式JavaScript框架,何为渐进式?Vue的库分为核心库以及相关的插件,核心库比较小,能实现一些基本的功能。显然做项目时,只有核心库肯定不够,需要时就要用其他相关的插件。所以渐进式就是:我们先只用核心库,当我们需要用到某些特定的功能时,我们就添加我们所需要的这些插件。由于Vue.js的门槛,本文只是初窥门径,作为学习Vue.js入门指南

与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。动态构建用户界面。即将后台的数据,在前台的界面上动态渲染显示出来。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

Vue并不是一个被独立开发出来的JS框架,实际上它和其他的前端JS框架是有着紧密的联系的,比如说也Vue借鉴了angular的模板和数据绑定技术,借鉴了react的组件化和虚拟DOM技术,这也使得Vue的功能和技术更加完善。

传统的网页形式是浏览器脚本语言js连接了各种各样的Html,css,但缺乏正规的组织形式,比如在页面元素非常多,结构很庞大的网页中,数据和视图如果全部混杂在一起,像传统开发一样全部混合在HTML中,那么要对它们进行处理会十分的费劲,并且如果其中有几个结构之间存在藕断丝连的关系,那么会导致代码上出现更大的问题,比如juqery中使用的

$('#xxx').parent().parent().parent()

一开始很好查找,但当页面结构发生变化,也就是说DOM的关联与嵌套层次要发生改变,那么之前的代码可能就会变成这样了:

$('#xxx').parent().parent().parent().parent().parent()

这样产品迭代后,对dom节点的查找操作等行为会有很大的性能损耗。而Vue可以帮你创建可维护性和可测试性更强的代码库,性能的强度得到了很好的保障。Vue相对于其他的框架的优点:

1.易用:

学习曲线平缓,api简洁,容易上手。学习过程较react来说比较容易,不那么痛苦

2.灵活:

如果你已经有一个现成的服务端框架,你可以将vue作为其中的一部分嵌入,带来更加丰富的交互系统 ,或者你希望将更多业务逻辑放到前端来实现,那么vue的核心库及其生态系统也可以满足你的各式需求,vue允许你将网页分割成可复用的组件,每个组件都可以包含自身的html,css,js文件,以用来渲染网页中相应的地方。

3.高效:

虚拟dom:其数据全部在内存中,只有js引擎参与其中,而真实dom会有浏览器渲染层在其中。

下面介绍一下Vue的目录结构:

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。就是vue.js会自动响应数据的变化情况,并且根据用户在代码中预先写好的绑定关系,对所有绑定在一起的数据和视图内容都进行修改。而这种绑定关系,在图上是以input 标签的v-model属性来声明的,因此你在别的地方可能也会看到有人粗略的称vue.js为声明式渲染的模版引擎。Vue.js通过组件,把一个单页应用中的各种模块拆分到一个一个单独的组件(component)中,我们只要先在父级应用中写好各种组件标签(占坑),并且在组件标签中写好要传入组件的参数(就像给函数传入参数一样,这个参数叫做组件的属性),然后再分别写好各种组件的实现。

组件自由组合形成功能完整的界面,当不需要某个组件,或者想要替换某个组件时,可以随时进行替换和删除,而不影响整个应用的运行(组件化)还记得在传统前端开发的时候,我们都是每个人做一个页面,然后最后套入各种后端模版引擎,比如说PHP的Smarty或者Java的JSP等等。但是现在我们做单页应用,页面交互和结构十分复杂,一个页面上就有许许多多的模块需要编写,而且往往一个模块的代码量和工作量就非常庞大,如果还按照原先的方法来开发,那么会累死人。而且遇到以后的产品需求变更,修改起来也非常麻烦,生怕动了其中一个div之后,其他div跟着雪崩,整个页面全部乱套,或者由于JavaScript的事件冒泡机制,导致修改一些内层的DOM事件处理函数之后,出现各种莫名其妙的诡异BUG。

在面向对象编程中,我们可以使用面向对象的思想将各种模块打包成类或者把一个大的业务模块拆分成更多更小的几个类。在面向过程编程中,我们也可以把一些大功能拆分成许多函数,然后分配给不同的人来开发。在前端应用,我们是否也可以像编程一样把模块封装呢?这就引入了组件化开发的思想。

Vue.js通过组件,把一个单页应用中的各种模块拆分到一个一个单独的组件(component)中,我们只要先在父级应用中写好各种组件标签(占坑),并且在组件标签中写好要传入组件的参数(就像给函数传入参数一样,这个参数叫做组件的属性),然后再分别写好各种组件的实现(填坑),然后整个应用就算做完了。

   实际上要想学习Vue,必须得有一定的前端基础,我们只是简短的介绍了一下Vue,初窥Vue的面貌,这不足以让我们掌握Vue。我们也许在看到Vue.js那神奇的双向绑定优雅写法都会有一种非常惊艳,为之折服,想学习的冲动涌上心头。但一个对于前端各个方面没有深入认识就想着能学好Vue无异于一步登天,马上就会放弃这个想法。那真的就是才上心头,却下心头了

0人推荐
共同学习,写下你的评论
0条评论
十年
程序员十年

13篇文章贡献72369字

作者相关文章更多>

推荐相关文章更多>

DOM渲染的详细过程

QCode09-04 14:38

CSS水平和垂直居中技巧大梳理

Code大师09-04 14:50

mui的input框在IOS系统下无法聚焦或点击多次才能聚焦

不写代码你养我啊08-23 11:14

推荐的-视.频播放器以及在线客服

不写代码你养我啊09-17 18:02

谈谈java多线程的三大特性

要学习了06-18 18:13

发评论

举报

0/150

取消