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 | “骨架” | 一些常用的标签 | Boostrap |
CSS | “外观样式” | 选择器、盒子模型 | Boostrap 、Ant-Design (阿里)、饿了么的(ElementU I、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
4.2 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》