javascript菜鸟教程,js菜鸟编程 收藏 0

html5+css3+javascript自学前端工程师这么做就够了

有人问我前端课程难吗？这怎么说呢！天下事有难易乎?为之,则难者亦易矣 不为,则易者亦难矣。

能不能自学成功贵在自我的坚持当然还有配合正确科学的方法。我负责科学的方法你负责坚持。

首先你需要一台个人电脑，最好不要是台式机，笔记本更佳，MAC系统的毕竟本更好，如果你的财力允许的话。笔记本更便于携带，几乎每个前端工程师都有自己的笔记本电脑，Mac系统更稳健好用，不像Windows运行几年就变慢了。

其次你需要安装一款适合自己的前端开发软件，也就是你的开发工具。

”假舆马者，非利足也，而致千里；假舟楫者，非能水也，而绝江河。君子生非异也，善假于物也。”–《劝学》

有一刻合适的开发工具会让你的效率提高很多，事半功倍。那么有哪些开发工具呢？

Dreamweaver是个由Macromedia公司所开发的著名网站开发工具，一个很古老的前端网站开发工具，多数前端工程师都用他起步的，DW的好处是，有设计和源码两种模式，所见即所得，功能齐全，非常适合刚入门的工程师，但不推荐大家使用DW ，虽然他功能强大但很多功没什么实际用处，所见即所得的开发方式也不利于工程师成长，重点是不免费啊，还的费劲儿去找破解版。

Visual Studio Code中文版是微软推出的带 GUI 的代码编辑器，软件功能非常强大，界面简洁明晰、操作方便快捷，设计得很人性化。软件主要改进了文档视图，完善了对 Markdown的支持，新增PHP语法高亮，功能强大很多插件，安装方便，重点是免费，但还是不推荐初学者使用。

Sublime Text是一个代码编辑器也是HTML和散文先进的文本编辑器，虽然 一个轻量级的编辑器，但有丰富的插件和第三方支持，插件需要安装，对于初学者也不是太合适，不推荐使用。

WebStorm 是一款比较Nice 的JavaScript开发工具，被众多前端工程师誉为“Web前端开发神器” 主要是各种提示比较给力，而且除了代码管理，还提供了对ES6的支持。打开有点慢。可以选择使用。

hbuilder是一款知名的且广受好评的专门为前端研发的开发工具，而且全中文，语法库齐全和浏览器兼容数据、可以方便的制作手机APP、最保护眼睛的绿柔设计等特点。支持HTML、CSS、JS、PHP的快速开发。。其强大全面的提示功能、调试等功能，让程序员用起来感觉非常顺手，而且是免费的，推荐初学者使用。

没错记事本也能做为前端的开发工具，但很少有人使用这玩意儿，完全不推荐初学者使用。

好了工具装完了，完事具备了只欠东风，是不是就可以开始学习了呢？

莫慌，我们再看看网络上有哪些能帮助我们学习的网站。初级阶段不用花钱看免费的资料就行。网络上一抓一大把，主要是你的学会找到这些资料。

在线教育机构有很多，他们会提供一些免费的视频和成体系的课程，不过也是鱼龙混杂，死了一批活了一批。我推荐给不错的网站，供大家参考。

声明：所有排名不分先后

成立于2014年02月

极客学院也是一家纯粹做线上的在线教育平台，开设课程有前端，Python，go，Android和iOS。极客学院不同之处在于其模式类似于硅谷的培训机构Udacity，通过包月与包年的会员制，为学生提供相应的课程视频、文档资料。并且试水“一对一”的在线教育模式，当然了极客的模式和传统的“一对一”有所不同，极客学院的“一对一”主要指老师为学生一对一批改作业等，而在授课方式上，采取的依然是一对多模式。。

成立于2012年05月

麦子学院是比较纯粹做在线教育的IT培训教育平台，课程体系根据用户人群需求不同分为自学课和企业直通班（有导师进行跟踪辅导，基本上可以看做是把线下的培训模式实现了在线化），开设的课程种类非常的多，几乎涵盖了互联网的各个领域。

教学模式纯粹的在线化，课程可以在官网上找到，课程制作相对比较优质。

成立于2013年8月

慕课网主打免费IT技能培训，当然了现在也有收费的实战项目课程。慕课网在所有的在线培训平台中算是口碑比较良好的一个吧，这可可能和其免费优质的策略有关。就课程体系而言慕课网也几乎涵盖了所有的课程分类，课程特色为其规划好的一些职业体系，方便一些自学入门的用户可以按部就班的获得一个系统的知识体系。其次慕课网内置的代码编辑器也是非常的出色，所见即所得不需要配置本地环境，更加快捷，省去了很多的麻烦。

成立于2016年4月（进入国内的时间）

优达学城是一家来自硅谷的在线教育机构，“骨骼清奇”和硅谷多家世界知名企业达成合作，这也展示在其课程上，像人工智能，自动驾驶等课程算是国内独树一帜，但是对于国内大部分的学习者来说，其英文的课程是一个不小的挑战。优达学城独具特色的地方在于课程免费， 对一些认证考试和就业介绍进行收费，作为其盈利点。

在其进入国内，根据国情也对少数的课程添加了汉语字幕，其次也努力的和国内的一些互联网企业寻求合作，目标群体基本上定位在专业度高计算机基础稳固的人群。

当然还有很多其他在线教育的网站，不过大多上来就弹窗，问你要不要报名啊，想尽办法让你花钱，烦。

不喜欢看视频的同学可以选择 W3C 菜鸟教程。这个教程简单易用，非常适用于初学入门者。

首先学习html5 了解各种标签的使用以及什么是语义化。当然只看html5是远远不够的，接下来就是css了。html5只是页面的结构编写更多美好的工作还需要css来完成，具体的学习周期大概2~3周，大家就能记的差不多了。

大家在菜鸟教程中可以到css和css3两种教程，学习顺序别搞错了是学完css再学习css3,因为css3是作为css的一个补偿存在的。

学习完css3就到了JavaScript学习阶段了

JavaScript 是 Web 的编程语言。所有现代的 HTML 页面都使用 JavaScript。JavaScript之后还后ECAMScript6 哈哈

ES6的学习看看栾一峰的文件就可以了：http://es6.ruanyifeng.com/

这些都学完了就到框架阶学习段了，目前流行的前端框架有三种：

Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。Vue 只关注视图层， 采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

React 是一个用于构建用户界面的 JAVASCRIPT 库。React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。React 拥有较高的性能，代码逻辑非常简单 。

Angular2 是一款开源JavaScript库，由Google维护，用来协助单一页面应用程序运行。Angular2 是 Angular 1.x 的升级版本，性能上得到显著的提高，能很好的支持 Web 开发组件。Angular2 发布于2016年9月份，它是基于ES6来开发的。

建议学习Vue.js 目前比较盛行，不会Vue都不好意思说自己是前端工程师了。

资料和路径都有了你可以开始自学了。不过一个学习一但遇到问题就麻爪了，一个小问题卡住能停下一个星期。如果能组团一起学习可以进行交流。

还有如果有人带你一起做项目是不是会更快呢？

最好找一个行内人士为师，好随时进行指点，才可事半功倍。

欢迎关注，小故事演绎大前端。多多交流，一起学习。

SpringBoot Thymeleaf使用教程（实用版）

原文地址：https://dwz.cn/2UR4feq8

作者：yizhiwazi

学习目标

• 快速掌握Thymeleaf的基本使用（五大基础语法+常用内置对象）

温馨提示：Thymeleaf 最为显著的特征是增强属性，任何属性都可以通过th:xx 来完成交互，例如th:value最终会覆盖value属性。

一、基础语法

变量表达式 ${}

使用方法：直接使用th:xx = \”${}\” 获取对象属性 。例如：

选择变量表达式 *{}

使用方法：首先通过th:object 获取对象，然后使用th:xx = \”*{}\”获取对象属性。

这种简写风格极为清爽，推荐大家在实际项目中使用。 例如：

链接表达式 @{}

使用方法：通过链接表达式@{}直接拿到应用路径，然后拼接静态资源路径。例如：

片段表达式 ~{}

片段表达式是Thymeleaf的特一，细粒度可以达到标签级别，这是JSP无法做到的。

片段表达式拥有三种语法：

• ~{ viewName } 表示引入完整页面
• ~{ viewName ::selector} 表示在指定页面寻找片段 其中selector可为片段名、jquery选择器等
• ~{ ::selector} 表示在当前页寻找

使用方法：首先通过th:fragment定制片段 ，然后通过th:replace 填写片段路径和片段名。例如：

在实际使用中，我们往往使用更简洁的表达，去掉表达式外壳直接填写片段名。例如：

值得注意的是，使用替换路径th:replace 开头请勿添加斜杠，避免部署运行的时候出现路径报错。（因为默认拼接的路径为spring.thymeleaf.prefix = classpath:/templates/）

消息表达式

即通常的国际化属性：#{msg} 用于获取国际化语言翻译值。例如：

其它表达式

在基础语法中，默认支持字符串连接、数学运算、布尔逻辑和三目运算等。例如：

二、内置对象

官方文档： 附录A： Thymeleaf 3.0 基础对象

官方文档： 附录B： Thymeleaf 3.0 工具类

七大基础对象：

• ${#ctx} 上下文对象，可用于获取其它内置对象。
• ${#vars}: 上下文变量。
• ${#locale}：上下文区域设置。
• ${#request}: HttpServletRequest对象。
• ${#response}: HttpServletResponse对象。
• ${#session}: HttpSession对象。
• ${#servletContext}: ServletContext对象。

常用的工具类：

• #strings：字符串工具类
• #lists：List 工具类
• #arrays：数组工具类
• #sets：Set 工具类
• #maps：常用Map方法。
• #objects：一般对象类，通常用来判断非空
• #bools：常用的布尔方法。
• #execInfo：获取页面模板的处理信息。
• #messages：在变量表达式中获取外部消息的方法，与使用＃{…}语法获取的方法相同。
• #uris：转义部分URL / URI的方法。
• #conversions：用于执行已配置的转换服务的方法。
• #dates：时间操作和时间格式化等。
• #calendars：用于更复杂时间的格式化。
• #numbers：格式化数字对象的方法。
• #aggregates：在数组或集合上创建聚合的方法。
• #ids：处理可能重复的id属性的方法。

三、迭代循环

想要遍历List集合很简单，配合th:each 即可快速完成迭代。例如遍历用户列表：

在集合的迭代过程还可以获取状态变量，只需在变量后面指定状态变量名即可，状态变量可用于获取集合的下标/序号、总数、是否为单数/偶数行、是否为第一个/最后一个。例如：

如果缺省状态变量名，则迭代器会默认帮我们生成以变量名开头的状态变量 xxStat， 例如：

四、条件判断

条件判断通常用于动态页面的初始化，例如：

如果想取反则使用unless 例如：

五、日期格式化

使用默认的日期格式(toString方法) 并不是我们预期的格式：Mon Dec 03 23:16:50 CST 2018

此时可以通过时间工具类#dates来对日期进行格式化：2018-12-03 23:16:50

六、内联写法

• （1）为什么要使用内联写法？·答：因为 JS无法获取服务端返回的变量。
• （2）如何使用内联表达式？答：标准格式为：[[${xx}]] ，可以读取服务端变量，也可以调用内置对象的方法。例如获取用户变量和应用路径：

• （3）标签引入的JS里面能使用内联表达式吗？答：不能！内联表达式仅在页面生效，因为Thymeleaf只负责解析一级视图，不能识别外部标签JS里面的表达式。

七、国际化

需要了解更多关于国际化的精彩描述请前往 SpringBoot 快速实现国际化i18n 。

例如在国际化文件中编写了user.title这个键值，然后使用#{}读取这个KEY即可获取翻译。

八、详细教程

======== 有了上述基础后 下面正式开始Thymeleaf 的详细教程 ==============

首先通过Spring Initializr创建项目，如图所示：

然后在POM文件引入web 、thymeleaf等依赖：

然后在src/main/resources/application.yml 配置页面路径：

接着在src/main/java/com/hehe/web/UserController 获取用户信息:

开始编写公共页面：src/main/resources/views/common/head.html ，其中static为页面片段：

接着编写用户列表页：src/main/resources/views/user/user.html 配合th:each显示用户列表信息。

使用说明：这里 th:replace=\”common/head::static\” 表示将引用${spring.thymeleaf.prefix}/common/head.html的static页面片段，值得注意的是由于替换路径默认会拼接前缀路径，所以开头切勿在添加斜杠，否则在打包成JAR部署运行时将提示报Templates not found… 。

然后编写单个用户页面：

至此大功告成，然后快速启动项目，如图所示：

快速启动项目

然后访问用户列表： http://localhost:8080 ，如图所示：

然后访问单个用户： http://localhost:8080/user/1 ，如图所示：

全网最热Vue入门教程你不看就吃亏了哦

  因为最近需要使用到Vue，所以打算将Vue的学习资料详细整理一份，感兴趣的小伙伴可以一起来哦。

• Vue.js 是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App， Vue语法也是可以用于进行手机App开发的，需要借助于Weex）
• Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架！
• Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。(Vue有配套的第三方类库，可以整合起来做大型项目的开发)
• 前端的主要工作？主要负责MVC中的V这一层；主要工作就是和界面打交道，来制作前端页面效果；

• 企业为了提高开发效率：在企业中，时间就是效率，效率就是金钱；
• 企业中，使用框架，能够提高开发的效率；
• 提高开发效率的发展历程：原生JS -> Jquery之类的类库 -> 前端模板引擎 -> Angular.js / Vue.js（能够帮助我们减少不必要的DOM操作；提高渲染效率；双向数据绑定的概念【通过框架提供的指令，我们前端程序员只需要关心数据的业务逻辑，不再关心DOM是如何渲染的了】）
• 在Vue中，一个核心的概念，就是让用户不再操作DOM元素，解放了用户的双手，让程序员可以更多的时间去关注业务逻辑；

• MVC 是后端的分层开发概念；
• MVVM是前端视图层的概念，主要关注于 视图层分离，也就是说：MVVM把前端的视图层，分为了 三部分 Model, View , VM ViewModel
• 为什么有了MVC还要有MVVM

结构图

在这里插入图片描述

MVVM是前端视图层的分层开发思想，主要把每个页面，分成了M，V和VM，其中VM是MVVM的思想核心：因为VM连接着M和V。前端页面中使用MVVM的思想，主要是为了让我们开发MVVM提供了数据的双向绑定，双向绑定是由VM提供的

  此次代码工具是Visual Studio Code,小伙伴可自行下载安装。

  代码如下:

注意代码中的注释！

访问页面

注意操作

在这里插入图片描述

运行效果

在这里插入图片描述

  在HTML页面中我们需要获取Vue中的数据，这时我们可以通过插值表达式来获取，如下

注意：插值表达式有闪缩的问题我们以站点的方式启动，Ctrl+shift+p ：在输入中搜索 如下

快捷键

在这里插入图片描述

注意标注

在这里插入图片描述

访问地址：http://localhost/xxx.html

访问效果

在这里插入图片描述

效果查看

在这里插入图片描述

加载完成就会变好！这就是插值闪烁的问题

  v-cloak指令可以解决上面插值闪烁的问题，如下：其实利用的就是当插值没有被加载出来的是通过 style属性将内容给隐藏了。

  和插值差不多，也可以从vue对象中获取信息，v-text默认是没有闪烁问题的，但是会覆盖掉原有的内容，但是 插值表达式 只会替换自己的这个占位符，不会把 整个元素的内容清空，如下

运行结果

在这里插入图片描述

  默认我们从Vue对象中获取的信息如果含有HTML标签的话只会当做普通字符串显示，如果我们要显示标签的语义，那么需要使用v-html指令如下

运行结果

在这里插入图片描述

  v-bind是 Vue中，提供的用于绑定属性的指令,可简写为\”:\”,属性中的内容其实写的是js表达式，可以做类似的处理，见代码。

效果图

在这里插入图片描述

  Vue 中提供了 v-on: 事件绑定机制,具体使用如下:

案例演示

在这里插入图片描述

好了~本文就先介绍到此，

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com