关于vue、关于html的一点点理解

由于换了一家公司,前端全部使用了vue这个框架,所以就在网上找了一些资料,去了解一些这个前端框架。最近看了几篇文章,写的挺好的,给大家分享一些其中的经典。

1、 什么是vue

官网介绍:vue是一套构建用户界面的渐进式框架。它与其他重量级框架不同的是,vue采用自下而上增量开发的设计。Vue的核心库只关注视图层,非常容易学习,非常容易与其他库或则已有项目整合。

       Vue的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图层组件。

2、 什么是通俗的vue

官方的介绍一般都很官方,对于初次接触的人来说,很难理解。简单来说,vue就是一个用于搭建类似于网页版知乎这种表单项繁多,且内容需要根据用户的操作进行修改的网页版应用。

3、 什么是单页应用SPA

顾名思义,单页应用一般指的是一个页面的应用,当然也可以是一个子应用,比如说知乎的一个页面就可以视为一个子应用。单页应用程序一般交互处理比较多,而且页面中的内容需要根据用户的操作动态变化。

4、 网页版的知乎用JQuery也可以写啊,为啥要用vue?

讲到JQuery,就不得不说JavaScript的DOM操作了。如果使用JQuery开发的话,就需要使用JQuery中的各种DOM操作方法去操作HTML的DOM结构了。

       现在我们把一个网页应用抽象一下,那么HTML中的DOM其实就是视图,一个网页就是通过DOM的组合与嵌套,形成了最基本的视图结构,再通过CSS的修饰,在基本的视图结构上“化妆”,让他们看起来更美观。最后:涉及到交互部分,就需要使用到JavaScript来接收用户的交互请求,并且通过事件响应机制来响应用户的交互操作,并且在事件的处理函数中进行各种数据的修改,比如说修改某个DOM中的innerHTML或者innerText部分。

       我们把HTML中的DOM就可以与其他部分独立开来划分出一个层次,这个层次就叫做视图层!而vue的核心库只关注这个视图层!

5、我们为什么要把视图层抽取出来并且单独去关注它呢?

因为在像知乎这样的页面元素非常多,结构很庞大的网页中,数据和视图如果全部混在一起的话,就像传统的开发一样,全部混合在HTML中,那要对它们进行处理会十分费劲,并且如果其中有几个结构之间存在藕断丝连的关系,那么会导致代码上出现更大的问题。

       那么会出现什么问题那?

还记得在当初写JQuery的时候,有写过$(“#XXX”).parent().parent()这种代码。当项目如果发生变更的时候,尤其是产品经理突然对你的网页提出修改要求,而这个修改要求将会影响页面的结构,也就是DOM关联与嵌套层次要发生改变的时候,那么这个选择器使用起来就会很麻烦。

       这还不算什么,等以后产品迭代越来越快,修改的越来越多的时候,而且页面中类似的关联和嵌套DOM元素不止一个,那么修改起来就会很费劲。而且JQuery选择器查找页面元素以及DOM操作本身也是有性能的损失的,可能到最后,会发现页面越来越卡,而你缺无从下手。

       这个时候,你定会抱怨,为什么世上会有HTML这种像盗梦空间一样需要无数个div嵌套才能做出的页面语言,为什么当初学JQuery看中的是它简介的DOM操作,现在看起来一点都不简洁?

       这时候,如果你学过vue,那么这些抱怨将不复存在。

6、 vue为什么能让给予网页的前端应用程序开发起来这么方便?

因为vue有声明式,响应式的数据绑定,与组件化的开发,并且还使用了Virtual DOM这个看起来很高大上的技术。


猜你喜欢

转载自blog.csdn.net/zhangxingyu126/article/details/80981460