好的程序员web前端培训分享为什么那么多人用vue.js一句话总结:有了数据绑定的思想,vue可以简单的写一个页面,也可以写一个大的前端系统,也可以做手机app的界面。 1。什么是Vue.js? Progressiveframework 自下而上的增量开发设计 简单易学 易于集成 Vue.js(发音/vju?/,类似于view)是一套用户界面构建工具渐进式框架。与其他重量级框架不同,Vue旨在自下而上地进行增量开发。Vue的核心库只专注于视图层,非常容易学习和与其他库或现有项目集成。另一方面,Vue完全有能力驱动使用Vue生态系统支持的单文件组件和库开发的复杂单页应用程序。 2。vue.js适用于什么类型的界面? a,表单项多 b,内容需要根据用户操作修改 Vue.运行Web应用进行修改。 3。什么是单页应用程序(SPA)? 一个页面就是一个应用(子应用) 顾名思义,单页应用一般是指一个页面就是一个应用。当然也可以是子应用。比如知乎中的一个页面就可以看作是一个子应用。单页面应用中通常会有很多交互处理,页面内容需要根据用户的操作动态变化。 4。前面说的网页版知乎我也可以用JQuery写,为什么要用Vue.js呢? 一个。产品绝对需要反复修改。 b。修改可能会导致DOM的关联和嵌套层次发生变化,使得jquery结构相关的代码异常复杂。 c。Vue.js可以解决这个问题 还记得你第一次写JQuery的时候,写的是('#xxx').parent().parent().parent()这样的代码吗?第一次写的时候,感觉页面上的元素不多。不就是找这个元素的父亲的父亲吗?大不了我在评论里把这个元素的父亲的父亲的父亲写清楚。但是万一几天后你的项目组长或者你的产品经理突然要求修改你做的网页,这个修改请求会影响页面的结构,也就是DOM的关联和嵌套层次会发生变化。那么('#xxx').parent().parent().parent()也可能变成$('#xxx').parent().parent().parent().parent().parent()。 没什么大不了的。以后产品迭代会更快,修改会更多,页面上类似关联嵌套的DOM元素会不止一个,修改起来会很费力。而且JQuery选择器查找页面元素和DOM操作本身也有性能损耗。打开这个页面可能会越来越卡,但是你无从下手。 这个时候,如果你学会了Vue.js,那么这些抱怨就不会再存在了。 5.前端经常提到的视图层是什么? 我们将HTML中的DOM划分为一个独立于其他部分的层次。这一层称为视图层。 Vue的核心库只关注视图层 6.使用jquery开发一个完整页面的过程? a、html编写结构 b、css装饰 c、js交互 说到JQuery,就不得不说说JavaScript的DOM操作。如果使用JQuery开发知乎,那么就需要使用JQuery中的各种DOM操作方法来操作HTML的DOM结构。 现在我们来抽象一个Web应用,那么HTML中的DOM其实就是一个视图。一个网页通过DOM的组合和嵌套形成最基本的视图结构,然后通过CSS修改,在基本视图结构上“化妆”,使它们看起来更加美观。最后是交互部分,需要用JavaScript接受用户的交互请求,并通过事件机制响应用户的交互操作,在事件处理函数中修改各种数据,比如修改某个DOMinnerHTML或innerText部分。 7。为什么Vue.js可以让开发基于Web的前端应用变得如此方便? a,宣告性的 b.响应式数据绑定 c,组件化开发 d,VirtualDOM 因为Vue.js有声明式,响应式数据绑定,组件化开发,还有UsingVirtualDOM这种光看就觉得高大上的技术其名称。 8.vue.js中经常提到的动态数据绑定是什么? 表示vue.js会自动响应数据的变化,根据用户在代码中预先写好的绑定关系修改所有绑定的数据和视图内容。而这种绑定关系是通过图中input标签的v-model属性来声明的,所以你可能也看到有人在别处粗略的把vue.js称为声明式渲染的模板引擎。 9.为什么前端需要组件化开发? a,非组件开发代码和工作量非常大 b,生不如死 但是现在做的是单页面应用,页面交互和结构非常复杂,有很多需要编写的模块很多,往往一个模块的代码量和工作量都非常大。如果还是按照原来的方法开发,会很累的。而且,如果未来产品需求发生变化,修改起来也很麻烦。恐怕其中一个div移动后,其他的div会跟着雪崩,整个页面就会乱七八糟,或者由于JavaScript的事件冒泡机制,修改了一些内部DOM事件。处理完函数后,出现了各种莫名其妙的怪bug。 10。前端如何开发组件? 一个。借用后端面向对象的模块化思想(把一些大的功能拆分成很多功能,然后分配给不同的人开发) b。模块被拆分成一个个的组件(components),我们只需要先在父应用中写好各种组件标签(占坑),在组件标签中写上要传入组件的参数(比如给函数传入parameters,这个参数称为组件的属性),然后写出各个组件的实现(填坑) 在面向对象编程中,我们可以利用面向对象的思想,将各个模块封装成类或者拆分成一个类大的业务模块分成更多和更小的类。在面向过程的编程中,我们也可以将一些大的功能拆分成很多功能,然后分配给不同的人进行开发。 对于前端应用,我们是不是也可以像编程一样封装模块呢?这就引入了组件化开发的思想。 Vue.js通过组件将单页应用中的各个模块拆分成一个个的组件(components)。我们只需要在父应用(入驻)中写好各种组件标签,并在组件标签中写入要传递给组件的参数即可(就像给函数传递参数一样,这个参数称为组件的属性),然后写出每个组件的实现(填坑),然后整个应用就完成了。 11。为什么会有VirtualDOM技术? 一个。Question 现在网速越来越快了。很多人家里都有几十甚至上百M的光纤,手机也开始4G了。按道理一个网页只有几百K,而且浏览服务器本身也缓存了很多资源文件,那为什么以前打开过缓存了几十的页面打开还是感觉很慢M纤维? b、原因 (1)、浏览器本身在DOM处理上存在性能瓶颈 (2)、当使用JQuery或原生JavaScriptDOM操作函数对DOM进行频繁操作时,浏览器需要不断渲染新的DOM树 这是因为浏览器本身在DOM处理上存在性能瓶颈,尤其是在传统开发中,频繁使用JQuery或原生JavaScriptDOM操作函数操作DOM时,浏览器不得不不断渲染新的DOM树,导致页面看起来很卡。 12。如何实现虚拟DOM? 一个。预先计算dom的各种操作,并渲染最后的结果(减少dom渲染的次数) ,VirtualDOM就是虚拟DOM的英文。通过JavaScript进行各种计算,计算并优化最终的DOM操作。由于这个DOM操作是一个预处理操作,并不实际操作DOM,所以称为虚拟DOM。最后计算完成后才真正提交DOM操作,DOM操作变化反映在DOM树上。 13.如何使用Vue.js进行单页应用开发? 其实直接看学习视频就可以开始工作了。应该是最好的 了。简介-vue.js官方文档的基础部分。硬着头皮通读.js官方文档的基础知识。除了组件部分涉及到很多晦涩的术语外,前面的章节完全使用Vue.js作为模板引擎。 b,ECMAScript6、Webpack、NPM和Vue-Cli的基本用法,最好懂Node.js 然后开始学习ECMAScript6、Webpack、NPM和Vue-Cli的基本用法,最好对Node.js有所了解。 c。看网上各种实战视频和文章,还有别人开源的代码还有别人开源的代码。 14。什么是ECMAScript? ECMAScript和JavaScript的关系是前者是后者的规范,后者是前者的实现(其他ECMAScript方言还有Jscript和ActionScript)。在日常情况下,这两个术语可以互换。 而ECMAScript6是新一代的JavaScript语言。 15。什么是网页包? 一个。前端打包工具 Webpack是一款前端打包构建工具。如果你之前一直在手写HTML、CSS、JavaScript,通过link标签将CSS引入到你的HTML文件中,通过Script标签的src属性引入外部JS脚本,那么你一定对这个工具比较陌生。没关系,我们先了解一下我们为什么要使用Webpack,然后跟着原因一起学习。 16。为什么要使用Webpack? a,方便管理各种素材 b,打包,减少浏览器访问次数 前面说了,做单页应用本身就挺复杂的,做的时候肯定会用到它有很多资料和其他第三方库,我们应该如何管理这些东西? 前面也提到了Webpack是一个前端打包工具,为什么要对前端代码进行打包呢?因为在单页应用中会用到很多素材,如果每一个素材都是通过HTML中的src属性或者链接来引入,那么在请求一个页面的时候,浏览器可能会发起十多个请求,而且往往是请求的资源是一些脚本代码或者很小的图片。这些资源只有几千字节,下载下来连1秒都不到。但是由于HTTP是一个应用层协议,它的下层是传输层协议TCP,TCP的握手和挥手过程所消耗的时间可能比下载资源本身要长,所以有必要把这些都打包小文件合并成一个文件,这样只需要一次TCP握手和wave过程就会下载多个资源,而多个资源由于都是共享一个HTTP请求,所以head等部分也共享,相当于形成了一个规模效果,使网页显示速度更快,用户体验更好。 17.什么是NPM和Node.js?他们是什么关系? 一个。Node.js是一个服务器端的JavaScript运行环境 Node.js是一个服务器端的JavaScript运行环境。通过Node.js,可以用JavaScript编写独立的程序。 b,Node.js可以写独立的程序(Webpack就是Node.js写的) 我们之前说过,Webpack是Node.js写的,所以作为前端开发,就算你不会t使用Node.js编写一个独立的程序,你还必须有一个Node.js运行环境。毕竟很多前端工具都是用它写的。 c,npm是一个node.js的包管理器(类似于java的maven(包依赖管理),php也有类似的)。 NPM是node.js的包管理器。我们传统开发的时候,JQuery.js多是在百度上搜索,然后从官网下载,或者直接从CDN资源导入。这个方法太麻烦了。如果以后遇到其他包,这个包本身的代码也可能会调用其他包(也就是这个包和其他包有依赖关系),那么我们需要在我们的项目中引入一个包。非常困难。现在有了包管理器npm,我们可以直接通过 npminstallxxx包名 导入,例如 npminstallvue 18,什么是Vue-CLi? 是一款vue.js脚手架工具。说白了就是一个自动为你生成好项目目录,配置Webpack,以及各种依赖包的工具。可以通过 npminstallvue-cli-g 进行安装,后面的-g表示全局安装的意思是打开命令行后可以直接通过vue命令调用。 19、什么是Vuex和Vue-route Vuex是vue的状态管理器。用于集中管理单页应用中的各种状态。 Vue-route是vue的前端路由。这个路由器不是我们用来上网的路由器,而是一个管理请求入口和页面映射关系的东西。它可以在不刷新的情况下替换部分页面,使用户有切换到网页的感觉。 把这两个东西解释清楚很费篇幅,这里就简单提一下。最重要的是学好vue.js本身。 最后,喜欢的小伙伴们关注、收藏、转发!
