Vue系列教程（05）- 基础知识快速补充（html、css、js）

1. 引言

通过前面的章节，我们的对Vue有一个整体的认知了，有兴趣的同学可以参阅下：

• 《Vue系列教程（01）- 前端发展史》
• 《Vue系列教程（02）- Vue环境搭建、项目创建及运行》
• 《Vue系列教程（03）- Vue开发利器VsCode》
• 《Vue系列教程（04）- VsCode断点调试》

在深入学习Vue之前，需要了解一些基础的知识，就是本文要讲解的一些前端基础知识，即html、css及js。

2. 说说html、css及js

相信大家都有学习过html、css和js，但是一直在做后端，很少有机会去实战。

其实这些知识都能够快速地去学习的，我把这些知识列为了一个表格，方便大家有一个整体的认知：

类别描述主要功能点主流框架HTML“骨架”一些常用的标签BoostrapCSS “外观样式” 选择器、盒子模型Boostrap、Ant-Design（阿里）、饿了么的（ElementUI、ivew、ice )、AmazeUI（一款HTML5跨屏前端框架）JS “动作” 逻辑（判断、循环）、DOM事件（CURD节点元素内容）JQuery、React及Vue

对于js层，不同框架网络请求框架总结如下：

• 默认：xhr
• 演变：ajax
• Vue框架：axios

小技巧：

boostrap可视化布局系统（地址：https://www.bootcss.com/p/layoutit/ ，非常方便大家去布局和下载布局后的代码，效果图如下：

3. CSS预处理器

CSS是一门标记语言，因此不可以自定义变量，它的主要缺陷如下：

• 语法不够强大，比如无法嵌套书写，导致模块化开发中需要书写很多重复的选择器；
• 没有变量和合理的样式复用机制，使得漏记上相关的属性值必须以字面量形式重复输出，导致难以维护。

为了解决上述问题，前端开发人员会使用一种称之为“CSS预处理器”的工具。

CSS预处理器定义了一种新的语言，其基本思想是“用一种专门的开发语言，进行Web页面样式设计，再通过编译器转化为正常的CSS文件，以供项目使用”。

常用的CSS预处理器有：

• SAAS：基于Ruby，通过服务端处理，功能强大。解析效率高。需要学习Ruby语言，上手难度高于LESS。
• LESS：基于NodeJS，通过客户端处理，使用简单，功能比SASS简单，解析效率低于SASS，但实际开发中足够了，建议使用。

4. 前端教程

之前写过前端的基础知识，有兴趣的童鞋们可快速浏览并学习。

4.1 HTML

• 《HTML简介及开发环境》
• 《HTML常用标签》
• 《HTML定时轮播图片》
• 《HTML框架集之FrameSet》
• 《HTML框架集之Form表单》

4.2 CSS

• 《CSS简介》
• 《CSS选择器》
• 《CSS盒子模型》

4.3 JavaScript

• 《JS简介》
• 《JS语法》
• 《JS之Boolean值类型的默认转换》
• 《JS方法覆盖》
• 《JS定时器》
• 《JS修改标签样式的属性值》
• 《JS之innerHTML方法》
• 《JS表单获取焦点及失去焦点》
• 《JS之this关键字》
• 《JS元素操作》
• 《JS省市联动简单案例》
• 《JS子页面如何获取父页面的变量、对象、方法》
• 《JS 如何快速遍历一个集合》
• 《JS高级应用（用变量操纵函数）》
• 《JS高级应用（高阶函数）》
• 《JS高级应用（动态类型）》
• 《JS高级应用（灵活的对象模型）》
• 《JS跳转链接的几种方式》
• 《JS事件拦截》
• 《JS之unshift() 方法》
• 《JS字符串format》

4.4 JQuery

• 《JQuery简介》
• 《JQuery页面加载》
• 《JQuery相关事件》
• 《JQuery相关效果》
• 《JQuery基本选择器》
• 《JQuery层次选择器》
• 《JQuery基本过滤选择器》
• 《JQuery内容过滤选择器》
• 《JQuery可见性过滤选择器》
• 《JQuery属性过滤选择器》
• 《JQuery表单选择器》
• 《JQuery对样式的操作》
• 《JQuery对属性的操作》
• 《JQuery遍历》
• 《JQuery之val，text，html》
• 《JQuery 插入节点》
• 《JQuery 删除节点》
• 《JQuery实现省级联动》
• 《JQuery实现左右选中》
• 《JQuery事件切换》
• 《JQuery简单的表单校验器》
• 《JQuery自定义校验器》
• 《JQuery显示和隐藏控件》
• 《JQuery 方法回调$callback》

4.5 Bootstrap

• 《Bootstrap简介》
• 《Bootstrap网格系统》
• 《Bootstrap简单案例》

4.6 Ajax

• 《$.ajax GET请求案例》
• 《$.ajax GET请求案例（Controller的另外一种写法）》
• 《ajax 参数详解》

4.7 调试技巧

• 《网页调试工具NetWork》
• 《常用调试方式》
• 《前端页面调试小技巧（谷歌浏览器）》