![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端基础总结
樊小勇
一个刚出学校,从事前端工作的职场新人。博客于我的用途是,分享技术心得,以及自我学习的一些总结,还有浏览别人优秀文章的借鉴于总结
展开
-
React 入门需要掌握的知识点
recat基础知识目录* 1.html模板 添加引入react的链接 三个样式有顺序 1 react.development 2 react-dom.develop 3 babel.min* 2.ReactDOM.render() 输出 ReactDOM.render( 输出内容的代码体, doc...原创 2019-04-16 12:49:47 · 1880 阅读 · 2 评论 -
CSS基础
CSS简介1.什么是css2.css有什么用3.css 常用属性什么是css1.层叠样式表2.定义如何显示html元素css有什么用1.让html页面元素显示的更好看2.提高工作效率怎么用css三种方式1. link 外部样式<link rel="stylesheet" href=""> href里面填路径2.标签内部样式<div style=""&...原创 2019-04-15 10:42:42 · 84 阅读 · 0 评论 -
web前端基础学习大纲
web前端记录1.第一次尝试写这个文档,这个文档将记录我对一些东西的总结和运用。2.首先在这里列一个大纲web前端基础学习技术大纲1.html基础常用标签2.css基础常用标签3.less的引入4.盒子模型5.reset重置样式的引用6.pc、移动端公共样式7.pc端浮动、定位8.div+flex移动端布局9.BFC10.阿里图标的使用...原创 2019-04-15 10:45:03 · 450 阅读 · 1 评论 -
盒模型
盒模型知识点padding1.每个div我们都可以看做是一个盒子,盒子的话是有内容、边框、填充物。2.两种盒模型W3C的标准Box Model外盒尺寸计算(元素所占空间)Element空间高度 = content height + padding + border + marginElement 空间宽度 = content width + padding + border + m...原创 2019-04-15 10:45:55 · 98 阅读 · 0 评论 -
reset重置样式
比较实用的几个重置样式1.https://www.cnblogs.com/zishang91/p/7568216.html2.https://huruqing.gitee.io/demos/source/reset.css移动端重置样式3.代码/*html5doctor.com Reset Stylesheetv1.4.12010-03-01Author: Richard Cla...转载 2019-04-15 10:47:30 · 262 阅读 · 0 评论 -
Pc、移动端公共样式
比较实用的移动端和pc端公共样式为什么使用公共样式使用公共样式能让我们在写pc和移动端代码的时候,代码可以高复用使用方法,通过在class里面添加功能类样式1.移动端公共样式body { background: #f1f0f6; }.bd { border: 1px solid; }.h100pc { height: 100%; }.w100pc { width: 100%; }...原创 2019-04-15 10:48:15 · 298 阅读 · 0 评论 -
Pc端浮动、定位布局
前言pc端的布局大致是靠浮动,和定位来实现的,在这里我总结了一点点方法。两列布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia...原创 2019-04-15 10:49:12 · 349 阅读 · 0 评论 -
div+flex移动端布局
移动端布局1.我们要进行移动端页面的开发设计第一肯定想到的是弹性盒子2.弹性盒子flex3.div和flex的配合使用移动端页面1.移动端需要引入一个样式,meta随便打开一个网站F12调成手机模式,复制meta<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1....原创 2019-04-15 10:52:12 · 208 阅读 · 0 评论 -
BFC(块级格式化上下文)
一、什么是BFCBFC(Block Formatting Context)格式化上下文,是Web页面中盒模型布局的CSS渲染模式,指一个独立的渲染区域或者说是一个隔离的独立容器。二、怎么形成BFC的条件1、浮动元素,float 除 none 以外的值; 2、定位元素,position(absolute,fixed); 3、display 为以下其中之一的值 inline-bloc...原创 2019-04-16 12:33:38 · 105 阅读 · 0 评论 -
项目小记录(小功能)
这里我将放一些我做项目的时候碰到不会的如何通过网络找到的解决方法1.文本溢出隐藏最后以点结尾方法一white-space:nowrap;overflow:hidden;text-overflow:ellipsis;方法二 用于多行文本display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp:...原创 2019-04-16 12:33:57 · 152 阅读 · 0 评论 -
怎么使用promise封装axios方法
axios获取后台数据的方法插件promise处理异步的方法封装在实际项目里为了更方便的使用axios获取后台数据,这里我们用promise封装一下vue项目里封装方法我们一般放在utils文件夹里src下新建一个utils文件夹,index.js文件/* eslint-disable no-unused-vars */import axios from 'axios...原创 2019-04-19 20:53:19 · 3247 阅读 · 0 评论 -
js的原生项目
JS原生项目知识点-思维导图JS作用实际项目里js的应用点1.获取数据渲染页面2.页面上数据的处理3.页面跳转时数据的传输可见,JS的真正作用是处理数据下面是我根据导图,结合项目代码进行的一些总结项目总结基本知识点一、面向对象编程方式我们把要处理的页面当一个对象比如对影片列表处理的时候var pian = {// 对影片页面处理,我们创建一个对应的对象pi...原创 2019-04-19 20:56:17 · 3373 阅读 · 0 评论 -
学习vue之前需掌握一些的知识点
大纲大纲一、创建对象1.this和this的指向2.构造函数3.构造函数的原型 通过prototype来选定构造函数的原型,对其进行增删改二、事件1.事件绑定 onclick2.事件对象 event 简写 ev 写在函数 function(ev) currentTarget 表示绑定的元素 target 表示选定的元素4.事件冒泡 子级事件传递给父级5....原创 2019-04-19 20:58:12 · 4347 阅读 · 1 评论 -
vue项目基础知识
Vue基础总结详情可以去官网了解https://cn.vuejs.org/v2/guide/链接式引用知识点1.el绑定节点new Vue({ el: data{ }})2.指令(命令) *v-show *v-if 判断对错 *v-for for循环 v-for 可以渲染页面 在html所需渲染的标签里添加v-f...原创 2019-04-19 21:00:54 · 307 阅读 · 0 评论 -
webpack是什么,怎么使用
一、webpack简介1.webpack是什么webpack项目打包工具,项目构建工具2.webpack有什么用构建单页应用(disk) nmp run build代码压缩npm i http-server -g 安装http-server 可以将文件转化成服务3.同类工具百度fis3gruntgulp二、webpack安装1.安装node(node提供...原创 2019-04-19 21:02:07 · 671 阅读 · 1 评论 -
webpack怎么搭建vue和react的项目
前期准备node.js安装自带npm安装node.js,从node.js官网下载并安装node,安装过程很简单,一路“下一步”就可以了(傻瓜式安装)。安装完成之后,打开命令行工具(win+r,然后输入cmd),输入 node -v,如果出现相应的版本号,则说明安装成功。淘宝镜像安装cnpm打开命令行工具,把这个(npm install -g cnpm --registry= htt...原创 2019-04-19 21:03:16 · 435 阅读 · 0 评论 -
学习小程序需要掌握些什么
一、前言小程序目前已经遍布我们的生活我们每天几乎都或多或少的会用到小程序,最常见的便是乘车二维码了因此学习下小程序二、准备工作开发小程序首先得注册https://mp.weixin.qq.com/根据下面文档提示弄好自己的私人小空间,保管好自己的信息https://developers.weixin.qq.com/miniprogram/introduction/index....原创 2019-04-19 21:04:47 · 558 阅读 · 0 评论 -
html常用标签
Html 大纲html知识目录什么是网页,网页的注释网页的结构和标签常用的标签和标签的属性html5常用标签什么是网页网站是由网页组成一个html文件用浏览器打开就是一个网页一个简单的网页<html><head><meat charset="UTF-8"><title></title>&...原创 2019-04-15 10:40:58 · 104 阅读 · 0 评论 -
JS在项目里怎么应用
前言在实际项目里面,我们使用面向对象编程进行编程在面向对象编程里面我们大致分为四个部分(个人分法)开头、获取数据、渲染、方法函数开头:一开始就会执行的代码放在开头里面比如一开始便要获取数据的方法获取数据我们统一放在一个对象里面渲染:使用后台数据渲染页面方法函数:渲染页面时需要单个处理时写的方法放在一个对象里面原生JS项目大致分层var Object ={ // 开头...原创 2019-04-17 09:26:14 · 618 阅读 · 0 评论 -
axios 获取后台数据
什么是axiosaxios是一个获取后台数据的插件地址https://www.npmjs.com/package/axios使用 前提得安装node.js页面直接引用 下载 选中文件夹 shift+右键 调出命令窗口 输入 npm i axios -g获取数据:路径为后台数据接口在用axios获取后台数据时, get function(){ var url =...原创 2019-04-17 09:25:16 · 2315 阅读 · 0 评论 -
阿里图标怎么使用
前言我们在进行移动端的前端页面开发的时候必不可少的肯定是各种各样的图标那么我们去哪里找这些漂亮又简洁实用的图标呢(阿里或各种图标库)阿里图标怎么使下面开始介绍阿里图标网站https://www.iconfont.cn/网站里有使用指导这里我简单的说一下步骤,具体的话想了解可以去了解下#####一、查找图标注册账号登录在首页根据自己所需要图标的功能简称搜索查找然后可以在...原创 2019-04-16 13:09:00 · 473 阅读 · 0 评论 -
JS基础(一)
javascript一、 前言JS 是一个脚本语言JS是web的编辑语言经常理解为 html-结构、css-样式、js-行为js可以写html、也可以写css、但是主要是用来渲染页面,负责页面和数据之间的传递和显示,以及编辑功能…二、JS基础1.使用和css差不多,js有两种使用方式1.内部js在html的底部<html><body><...原创 2019-04-16 13:10:19 · 138 阅读 · 0 评论 -
JS基础(二)
一、流程控制语句关系比较运算<script> // 等于 var num1 = 10; var num2 = '10'; var num3 = 6; console.log(num1==num2); //这里的结果是true,先进行转换再比较 // === 绝对等于,类型和值都要相等 console.log(num1=...原创 2019-04-16 13:11:14 · 204 阅读 · 0 评论 -
JS基础(三)函数-面向对象编程
函数函数的定义<script> /* 定义一个函数 function 函数名(){ 代码块 } 需求1:写一个函数,实现1到100相加 */ function sum(){ var num = 0; for(i=1;i<=100;i++){ num += i; ...原创 2019-04-16 13:12:10 · 2464 阅读 · 6 评论 -
JS基础篇(四)-内置函数
内置函数JS的内置函数有很多,这里举例日期和数组日期 在项目里常用到<script> // 字面量(直接量)创建对象 var cat = { color:'write', name:'家猫' } console.log(cat); new object=cat;</script><...原创 2019-04-16 13:12:46 · 190 阅读 · 0 评论 -
JS基础篇(五)
浏览器对象和Bom对象大纲浏览器对象:Bom对象浏览器里自带的对象,比如 window 1.location.href 获取浏览器地址2.location.href = 'http//:baidu.com' 跳转到百度3.http://www.baidu.com?username=fanyong&age=20 跳转到百度的时候,加上参数 username ...原创 2019-04-16 13:13:29 · 135 阅读 · 0 评论 -
数组怎么去重,去重的方法
数组去重的六种方法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-...原创 2019-04-16 13:14:47 · 645 阅读 · 0 评论 -
数组常用函数有哪些
常用的数组函数示例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-...原创 2019-04-17 08:50:11 · 1490 阅读 · 0 评论 -
什么是异步
什么是异步两个请求同时开始,但是二者之间有赋值比较之类的关系时,称为异步<script src="https://unpkg.com/axios/dist/axios.min.js"></script><script> var url = 'http://132.232.87.95:3000/api/film/getList'; //...原创 2019-04-17 09:15:21 · 627 阅读 · 0 评论 -
try catch 的作用
<script> var a = 2; try{ console.log(a); console.log(b); // 代码块在这里的时候 2 捕捉错误 3 }catch(error){ console.log(error); } // console.log(a); /...原创 2019-04-17 09:16:13 · 343 阅读 · 0 评论 -
promise处理异步问题
什么是promise异步编程的解决方案,是一个构造函数 new promise();promise 有什么用promise对象用于存数据和数据状态回调地狱,代码难以维护回调地狱:(常常第一个的函数的输出是第二个函数需要的东西)async 函数(){ await 数据 } 注意获取到的数据前面要加await 不然会报错这个promise可以解决异步的问题(把异步变同步),本身...原创 2019-04-17 09:17:05 · 1317 阅读 · 0 评论 -
ES6小结
ES6javascript 最新版下面列出常用的一些声明变量<script> //es5 函数和变量的声明都会提前 以函数区分作用域 // es6 块级作用域 以{}区分作用域 if(true){ var a=3 //es6 用 let 声明变量 let不能重新声明 let b=4 ...原创 2019-04-17 09:18:03 · 176 阅读 · 0 评论 -
什么是构造函数
什么是构造函数vuereact可以通过new得出一个新的对象的就是构造函数this 的引入<script> // 在函数中this代表谁调用了这个函数,this就指向谁 function add(){ var a=10; var b=20; console.log('this代表的是:',this);//这里...原创 2019-04-17 09:19:46 · 954 阅读 · 0 评论 -
js事件
js里有许多事件下面简单介绍一下绑定事件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...原创 2019-04-17 09:21:30 · 178 阅读 · 0 评论 -
event是什么?事件对象
一、什么是event1.event是事件函数对象,内置对象的一种事件对象包含的几个操作原语:(这里只当了解)CreateEvent() 创建一个事件对象OpenEvent() 打开一个事件对象SetEvent() 设置指定的事件对象为有信号状态WaitForSingleObject() 等待一个事件 WaitForMultipleObjects() 等待多个事件 WaitFo...原创 2019-04-17 09:22:52 · 8358 阅读 · 0 评论 -
什么是Bom 对象和Dom树
通过获取设备信息来进行跳转页面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <met...原创 2019-04-19 20:49:58 · 329 阅读 · 0 评论