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

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

1. 引言

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

在深入学习Vue之前,需要了解一些基础的知识,就是本文要讲解的一些前端基础知识,即htmlcssjs

2. 说说html、css及js

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

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

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

对于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

4.4 JQuery

4.5 Bootstrap

4.6 Ajax

4.7 调试技巧

目录
相关文章
|
4月前
|
存储 自然语言处理 前端开发
抖音快手小红书虚拟评论截图生成器,模拟对话制作工具,html+js+css
这是一款纯前端实现的多平台虚拟评论生成器,支持抖音、快手、小红书风格,适用于产品演示与UI设计。采用Vanilla JS与Flexbox布局,利用IndexedDB存储数据,CSS Variables切换主题。
|
4月前
|
存储 前端开发 安全
病历单生成器在线制作,病历单生成器app,HTML+CSS+JS恶搞工具
本项目为医疗病历模拟生成器,旨在为医学教学和软件开发测试提供数据支持,严格遵守《医疗机构病历管理规定》。
|
4月前
|
机器学习/深度学习 JavaScript 前端开发
JS进阶教程:递归函数原理与篇例解析
通过对这些代码示例的学习,我们已经了解了递归的原理以及递归在JS中的应用方法。递归虽然有着理论升华,但弄清它的核心思想并不难。举个随手可见的例子,火影鸣人做的影分身,你看到的都是同一个鸣人,但他们的行为却能在全局产生影响,这不就是递归吗?雾里看花,透过其间你或许已经深入了递归的魅力之中。
155 19
|
4月前
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
4月前
|
前端开发 容器
处方单图片生成器, 处方单在线制作免费,js+css+html恶搞神器
这是一个电子处方模拟生成系统,使用html2canvas库实现图片导出功能。系统生成的处方单包含多重防伪标识,并明确标注为模拟数据,仅供学习
|
4月前
|
前端开发 JavaScript 容器
制作b超单生成器, 假怀孕b超单图片制作, p图医院证明【css+html+js装逼恶搞神器】
本资源提供一个适合用于熟人之间恶搞的工具,效果逼真,仅供学习参考与娱乐。包含前端技术学习要点:语义化布局、响应式设计、Flexbox、图片自适应
|
4月前
|
前端开发
医院检查单子p图软件,在线制作仿真病历,js+css+html装逼神器
本示例展示如何用HTML/CSS创建医疗信息页面,内容仅供学习参考。页面模拟“阳光医院体检中心”场景,提供预约功能验证(如姓名、手机号、日期)。所有数据仅用于演示
|
7月前
|
资源调度 JavaScript 前端开发
前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
5863 24
|
8月前
|
数据采集 JavaScript Android开发
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
237 7
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
8月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
200 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布