好程序员web 前端培训分享小白学 web 常见的问题， 今天跟大家分享 的是 小白学web 常见的问题。希望本篇文章能够对小伙伴们有所帮助。

　　 1 、 Vue.js 是什么 ?

　　 渐进式框架

　　 自底向上增量开发的设计

　　 易学习

　　 易整合

　　 Vue.js( 读音 /vju ː /, 类似于 view) 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是， Vue 采用自底向上增量开发的设计。 Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面， Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。

　　 2 、 vue.js 到底适合做哪种类型的界面 ?

　　 a 、表单项繁多

　　 b 、内容需要根据用户的操作进行修改

　　 Vue.js 就是一个用于搭建类似于网页版知乎这种表单项繁多，且内容需要根据用户的操作进行修改的网页版应用。

　　 3 、单页应用程序 (SPA) 是什么 ?

　　 一个页面就是应用( 子应用 )

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

　　 4 、 前面说的网页版知乎我也可以用 JQuery 写啊，为什么要用 Vue.js 呢 ?

　　 a 、产品是绝对需要反复修改的

　　 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 结构了。

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

　　 7 、 Vue.js 为什么能让基于网页的前端应用程序开发起来这么方便 ?

　　 a 、有声明式

　　 b 、响应式的数据绑定

　　 c 、组件化的开发

　　 d 、 Virtual DOM

　　 因为Vue.js 有声明式，响应式的数据绑定，与组件化的开发，并且还使用了 Virtual DOM 这个看名字就觉得高大上的技术。

　　 8 、 vue.js 中常说的数据动态绑定是什么 ?

　　 就是vue.js 会自动响应数据的变化情况，并且根据用户在代码中预先写好的绑定关系，对所有绑定在一起的数据和视图内容都进行修改。而这种绑定关系，在图上是以 input 标签的 v-model 属性来声明的，因此你在别的地方可能也会看到有人粗略的称 vue.js 为声明式渲染的模版引擎。

　　 9 、前端中为什么要组件化开发 ?

　　 a 、非组件化开发代码和工作量都非常大

　　 b 、修改起来生不如死

　　 但是现在我们做单页应用，页面交互和结构十分复杂，一个页面上就有许许多多的模块需要编写，而且往往一个模块的代码量和工作量就非常庞大，如果还按照原先的方法来开发，那么会累死人。而且遇到以后的产品需求变更，修改起来也非常麻烦，生怕动了其中一个div 之后，其他 div 跟着雪崩，整个页面全部乱套，或者由于 JavaScript 的事件冒泡机制，导致修改一些内层的 DOM 事件处理函数之后，出现各种莫名其妙的诡异 BUG 。

　　 10 、前端中如何进行组件化开发 ?

　　 a 、借用的后端的面向对象中的模块化思想 ( 把一些大功能拆分成许多函数，然后分配给不同的人来开发 )

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

　　 在面向对象编程中，我们可以使用面向对象的思想将各种模块打包成类或者把一个大的业务模块拆分成更多更小的几个类。在面向过程编程中，我们也可以把一些大功能拆分成许多函数，然后分配给不同的人来开发。

　　 在前端应用，我们是否也可以像编程一样把模块封装呢? 这就引入了组件化开发的思想。

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