零基础小白入行Web前端学习指南！从零基础到精通，收藏这篇就够了！

最新推荐文章于 2025-06-18 22:39:04 发布

Python_chichi

最新推荐文章于 2025-06-18 22:39:04 发布

阅读量1.3k

点赞数 19

CC 4.0 BY-SA版权

分类专栏：程序员网络安全互联网文章标签：前端 php 安全 web安全

本文链接：https://blog.youkuaiyun.com/Javachichi/article/details/145777619

互联网同时被 3 个专栏收录

1403 篇文章

订阅专栏

程序员

1390 篇文章

订阅专栏

网络安全

827 篇文章

订阅专栏

Web前端是做什么的？

好多好多同学肯定会问，前端到底是啥？学前端学啥？从大的方面来讲，你所能看到的一切，网页、移动端网页、小程序、甚至某些app，都是前端程序员的。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

二

前端工程师是做什么的？

1.前端工程师主要利用HMTL与CSS建构页面（其中html构建骨架，css构建样式），用JavaScript获取后端数据以及完善交互以及用户体验。

2.通俗来讲，前端在一个项目里，拿到UI设计师设计的设计稿，然后实现UI设计师设计稿，调用后端程序员给的数据接口以获取数据，然后测试，最后部署上线。

三

前端工程师到底学啥

Web前端技术由 html、css 和 javascript 三大部分构成，是一个庞大而复杂的技术体系，其复杂程度不低于任何一门后端语言。

当然，还有其他许多许多其他的知识，不然你真以为一两万元的工资那么好拿，算法、数据结构、面向对象思想、设计模式、某个前端框架等等都是必须掌握的。

同时，在框架流行的时代，你必须要懂一个框架。

目前流行的前端框架有哪些？

**1）Vue：Vue.js是讨论最多且发展最快的JavaScript框架之一。**它由前谷歌员工Evan You创建，他在担任Google员工时曾在Angular工作过。您可以认为它是成功的，因为它能够使用HTML，CSS和JavaScript构建有吸引力的UI。Vue被阿里巴巴，GitLab，百度使用，并受到全球开发人员和设计师的赞赏。

2）React：React由Facebook维护，许多领先的科技品牌在其开发环境中使用React。React被Facebook，Uber，Netflix，Twitter，Udemy，Paypal，Reddit，Tumblr，Walmart 等使用。

3）Angular：Angular开发在全球开发人员中广泛流行，并被谷歌，福布斯，WhatsApp，Instagram，healthcare.gov和许多财富500强公司等大型组织使用。

下面跟大家分享一下小白学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可以解决这个问题

5.）前端里面常说的视图层是什么 ?

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

6.）使用 jquery 开发完整页面的流程 ?

a 、 html 写构架
b 、 css 装饰

c 、 js 交互

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 、修改起来生不如死

但是现在我们做单页应用，页面交互和结构十分复杂，一个页面上就有许许多多的模块需要编写，而且往往一个模块的代码量和工作量就非常庞大，如果还按照原先的方法来开发，那么会累死人。

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

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

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