0
点赞
收藏
分享

微信扫一扫

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

快乐与微笑的淘气 2022-02-04 阅读 61



文章目录


  • ​​1. 引言​​
  • ​​2. 说说html、css及js​​
  • ​​3. CSS预处理器​​
  • ​​4. 前端教程​​

  • ​​4.1 HTML​​
  • ​​4.2 CSS​​
  • ​​4.3 JavaScript​​
  • ​​4.4 JQuery​​
  • ​​4.5 Bootstrap​​
  • ​​4.6 Ajax​​
  • ​​4.7 调试技巧​​



1. 引言

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

在深入学习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/​​​ ,非常方便大家去布局和下载布局后的代码,效果图如下:Vue系列教程(05)- 基础知识快速补充(html、css、js)_html


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》​​
  • ​​《常用调试方式》​​
  • ​​《前端页面调试小技巧(谷歌浏览器)》​​


举报

相关推荐

0 条评论