- 博客(23)
- 收藏
- 关注
RSS订阅原创 前端基础总结（4）——css选择器
1.Id选择器（#）作用：为标有特定 id 的元素指定特定的样式，唯一#one{ color:red; // id为one的元素设置字体颜色为红色}2.class 选择器（.）作用：用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用.odiv{ color:green; // 所有类名为o...
2021-06-25 11:47:54
125
原创 React基础（二）
1.react事件监听以点击事件为例，小驼峰写法，事件名用{}包裹<button onClick={this.showTitleFun}>显示/隐藏</button>事件绑定三种写法（1）bind来绑定constructor(props){ super(props) this.state={ showTitle:true, } this.showTitleFun=this.
2021-06-25 11:47:12
100
原创 React基础（一）
一、安装脚手架并搭建项目create-react-app脚手架全局安装：npm install -g create-react-app查看版本：create-react-app --version创建项目：create-react-app myApp切换到项目：cd myApp运行项目：npm start二、react基本用法1.state变量渲染，setState修改变量setState是异步的，可以接收参数p...
2021-06-25 11:40:38
94
原创 webpack4学习笔记（7）
提取分离css处理效果：将所有入口chunk中引用的css，移动到独立分离的css文件方法一：ExtractTextPlugin插件(1)安装npm install extract-text-webpack-plugin@next --save-dev(2)配置config文件引入插件：const ExtractTextPlugin=require('extract...
2020-03-03 17:57:52
96
原创 webpack4学习笔记（6）
编译es6babel转化语法依赖： babel-loader:负责ES6语法转化 babel-core:babel核心包 babel-preset-env:告诉babel使用哪种转码规则进行文件处理(1)安装依赖npm install babel-loader @babel/core @babel/preset-env --...
2020-03-02 17:57:49
96
原创 前端基础总结（3）——css定位和浮动
CSS 定位position属性用来指定一个元素在网页上的位置，一共以下有5种定位方式：（1）static——静态定位static是position的默认值，即没有定位，元素正常出现在页面流中。（2）fixed——固定定位元素相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。（3）relative——相对定位元素的定位是相对其正常位置（即static时的位置），...
2020-02-26 22:06:39
184
原创 前端基础总结（2）——简单的CSS样式
1.CSS 背景（1）背景色——background-color颜色可以有三种表示方法:(1)background-color:yellow;(2)background-color:#00ff00;(3)background-color:rgb(255,0,255);// 颜色会填充元素的内容、内边距和边框区域，扩展到元素边框的外边界（但不包括外边距）2....
2020-02-26 17:41:52
127
原创 webpack4学习笔记（5）
一、图片处理1.安装loadernpm install file-loader --save-dev2.配置config文件{ test:/\.(png|jpg|gif|jpeg)$/, use:[ { loader: 'file-loader', options: { ...
2020-02-26 17:06:42
95
原创 webpack4学习笔记（4）
加载css所需的loader及其使用方式1.了解loader——让webpack能处理非Javascript文件 loader可以将所有类型的文件转化为webpack能处理的有效模块，然后就可以利用webpack的打包能力对它们进行处理。2.安装loader——style-loader和css-loadernpm install style-loader cs...
2020-02-25 17:21:38
109
原创 webpack4学习笔记（3）
配置webpack-dev-serverwebpack-dev-server用来配置本地服务器，使用它可以为webpack打包生成的资源文件提供web服务。主要提供的功能： (1)为静态文件提供web服务 (2)自动刷新和热替换(HMR)2.安装webpack-dev-servernpm install webpack-dev-server -...
2020-02-25 17:15:32
75
原创 前端基础总结（1）——HTML元素
前端基础有三大部分构成：html（结构）、css（样式）、JS（逻辑表现）（1）HTML定义了网页的内容（2）CSS规定了网页的布局、内容如何显示（3）JS处理网页逻辑，编辑网页行为一、HTML主要分为三种类型的元素：块级元素、行内元素、空元素A.块级元素——大多为结构性标记,可以理解为容器标签常用的：div、p、ul/ol、li、form、table、h1-h6、hr等...
2020-02-24 19:34:03
405
原创 webpack4学习笔记（2）
一、使用配置文件打包1.新建webpack.config.js文件2.配置入口 entry (所需打包的文件路径)3.配置出口output(1)path：文件打包的存放路径(2)path.resolve():将路径或者路径片段的序列处理成绝对路径(3)__dirname:当前文件所在的目录的绝对路径 //注意__dirname这里有两个下划线(4)filename：打包...
2020-02-24 15:28:20
63
原创 webpack4学习笔记（1）
1.webpack是什么？ webpack其实就是一个Javascript应用程序的静态模块打包器2.webpack的作用——模块化打包 webpack讲项目资源文件当成一个个模块，模块之间相互依赖 webpack将这些有依赖关系的文件进行处理，让浏览器能够识别 最后将应用程序需要的每个模块打包成一个或多个bundle3...
2020-02-22 18:10:32
119
原创 全年日历平铺展示以及日期批量选择
公司最近需要实现一个需求，就是让全年的日历平铺全部显示出来，并且可以单选可以批量选择，还能剔除周六日，我在网上看了一圈，并没有完全符合此需求的，因此找了一个全年日历的插件amazin，在此基础上自己修改源码实现了以上功能，并且还能进一步的精确到可以根据用户需求指定批量选择周一至周日，而不仅仅是周末。 话不多说，放上代码，当然需要的改进优化的地方还有很多~...
2019-12-16 20:19:45
1430
2
原创 vue3.0搭建后台管理系统——新建项目并配置环境
自己实战整理的步骤，可以轻松构建vue全家桶项目（本文省去前面node安装,脚手架安装过程，只针对搭建项目的过程）一、创建项目1.指令：vue create vue-manager-systembabel转译js的新特性，兼容低版本浏览器CSS预处理器，设置全局变量ESLint检查代码写法是否规范2.指令：cd vue-manager-system3.指令：np...
2019-11-16 22:22:37
3861
原创 关于GoJs的总结及多功能实例
项目需要用到GoJs实现可视化，先说一下需求吧1、实现可拖拽新建节点2、点击节点可修改保存节点信息3、可以手动新建节点之间的连线4、点击连线可修改保存连线信息5、节点鼠标右键菜单网上的都是零零碎碎的，查了很多文档然后终于实现了上述的所有功能...废话不多说，直接上代码：<!DOCTYPE html><html><head...
2019-07-18 16:39:12
3494
原创 关于http的那些事儿~~
TCP/IP、Http与Socket的区别TCP（TransmissionControl Protocol 传输控制协议）是一种面向连接的、可靠的、基于字节流的传输层通信协议。网络由下往上分为物理层、数据链路层、网络层、传输层、会话层、表示层和应用层。传输层的TCP是基于网络层的IP协议的，主要解决数据如何在网络中传输，而应用层的HTTP协议又是基于传输层的TCP协议的，主要解决如何...
2018-02-09 15:05:34
155
原创 关于Js原型与原型链
Js原型与原型链JavaScript 中，万物皆对象！凡是通过 new Function() 创建的对象都是函数对象，其他的都是普通对象。在 JavaScript 中，每当定义一个对象时，对象中都会包含一些预定义的属性。其中每个函数对象都有一个prototype属性，这个属性指向函数的原型对象。在上述示例中，原型对象就是 Person.prototype，我们给原型对象添加了四个属性：nam...
2018-02-08 11:29:10
145
原创 Web信息交互
自己稍微总结了一下Web信息交互，大概有以下几种...传统AJAX数据交互：客户端通过浏览器发出一个请求，服务器端接收和审核完请求后进行处理并返回结果给客户端，然后客户端浏览器将信息呈现出来。轮询：客户端以一定的时间间隔向服务端发出请求，以频繁请求的方式来保持客户端和服务器端的同步。这种同步方案的最大问题是，当客户端以固定频率向服务器发起请求的时候，服务器端的数据可能并没有更新，这
2018-02-07 16:25:37
465
原创 浅析对象访问属性的"."和"[]"方法区别
昨天在写代码的时候犯了一个错误，调用方法返回对象属性，传的参数是需要返回的属性item，返回的是data.item，因为动态操作对象属性时，用的“.”而不是“[]",于是导致获取不到该属性的值，后来在网上搜了一下，找到这篇文章，觉得写的挺清楚的，所以转载过来分享一下~~浅析对象访问属性的"."和"[]"方法区别在JavaScript中通常使用”."运算符来存取对象的属性
2018-02-07 16:07:56
399
原创 关于事件机制，事件冒泡，事件捕获...
关于事件机制我们经常会遇到JavaScript的事件机制，例如事件绑定、事件监听、事件委托（事件代理）等，对这些概念有些模糊。一、事件绑定要想让 JavaScript 对用户的操作作出响应，首先要对 DOM 元素绑定事件处理函数。所谓事件处理函数，就是处理用户操作的函数，不同的操作对应不同的名称。常用的绑定事件的方法：(1)在DOM元素中直接绑定在DOM元素上绑定oncl
2018-01-31 10:03:38
182
原创 Vue组件
Vue组件1、通过Vue.extend()声明组件Vue.extend是vue提供出来给我们实现组件的函数（1）组装组件（声明组件）var MyComponent = Vue.extend({//被封装的html内容template: 'This is your first vue components!'，//绑定在这个组件内的数据
2018-01-12 12:35:25
150
原创 VueJS基本使用
一、基础语法以及指令(v-xx)1.Message: {{ msg }}插值语法用双大括号在页面显示msg的值2.v-html=”msg” 以html的格式解析在页面显示msg的值3.v-text=”msg” 以文本格式解析在页面显示msg的值4.v-bind:class=”[c1,c2]” 绑定属性，简写形式为:class=”[c1,c2]”5.v-if=”boolean”
2018-01-12 12:24:15
922
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人