- 博客(45)
- 收藏
- 关注
RSS订阅原创 js原型原型链继承笔记
目录1.原型的初步认识2.没有原型的对象也是存在的3.原型方法与对象方法优先级4.函数拥有多个长辈5.原型关系详情与属性继承实例6.系统构造函数的原型提现1.原型的初步认识 let arr = ['A'] console.log(arr.concat("B"));-1.控制台显示_proto_就是他的父亲展开之后里面有concat: ƒ concat(),说明它调用的是父亲的方法,下面还有一层_proto就是他的父亲的父亲,里面也有很多方法。整体就有自己-父亲-父亲的父亲,也就是原
2021-07-12 23:33:21
161
1
原创 vue篇-事件总线
1.首先在main.js里面Vue.prototype.$bus = new Vue()2.在GoodListItem.vue中发射<template> <div class="goos-Item"> <img :src="goodsItem.show.img" alt="" @load = 'imageLoad' /> <div class="goods-info"> <p>{{ goodsItem.tit
2021-06-22 21:24:58
109
原创 vue篇-better-scroll
BetterScroll简单使用<template><div class="wrapper"> <ul class="content"> <button @click='btnClick'>按钮</button> <li>分类的例表1</li> <li>分类的例表2</li> <li>分类的例表3</li> <li>
2021-06-21 21:10:34
307
原创 vue篇-Vuex
目录Vuex核心概念1.state2.getters3.mutations状态更新4.actionsmodules模块化VuexVuex核心概念1.state2.Getters3.Mutations4.Actions 5.Modules1.state在state里面存放基本数据然后在组件中使用,state单一状态树只在一个store里面定义。 state: { number:0 },//在组件中使用$store.state.number2.gettersgetters
2021-06-13 10:19:37
63
转载 Promise一看就会！！！
什么是Promise,用promise解决什么问题Promsie是异步编程的一种解决方案:从语法上将,promise是一个对象,从它可以获取异步操作的消息；从本意上讲,它是承诺,承诺它过一段时间会给你一个结果。promise有三种状态:pending(等待状态),fulfiled(成功状态),rejected(失败状态);状态一旦改变,就不会再变。创造promise实例后,它会立即执行。我相信大家经常写这样的代码：//当参数a大于10且参数fn2是一个方法时,执行fn2function fn1(a,
2021-06-11 23:07:21
57
原创 vue篇-修改路由的hash模式、router-link补充、路由的知识点
目录1.修改路由的hash模式2.router-link补充3.通过代码跳转路由4.动态路由的使用5. $router和 $route的区别1.修改路由的hash模式2.router-link补充3.通过代码跳转路由 // this.$router.push('/about') this.$router.replace('/about') //没有记录不能回退4.动态路由的使用1.首先要在router>index.js配置的时候,给path后面添加一个动态属性 {
2021-06-07 23:24:54
3691
2
原创 webpack学习、es6转es5、打包html、压缩js、搭建本地服务器代码页面实时更新、等。。。
目录什么是webpackgulp和webpack有什么不同webpack安装打包什么是webpackwebpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。gulp和webpack有什么不同gulp更强调的是前端了流程的自动化,模块化不是它的核心。webpack更强调模块化开发管理,而文件压缩合并、预处理等功能,是他附带的功能。webpack安装打包webpack模块化打包,为了可以正常运行,必须依赖node环境,Node.js自带了软件包管理工具npm。1.全局安
2021-06-03 22:29:34
482
原创 vue篇-slot(插槽)、具名插槽、编译作用域、作用域插槽
插槽组件的插槽是为了让我们封装的组件更加具有扩展性让使用者可以决定组件内部的一些内容到底展示是什么<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-C
2021-05-31 22:34:21
117
原创 vue篇-组件访问,父访问子($children、$refs),子访问父($parent、$root)
父访问子1.$children默认是一个空数组2.$refs,对象类型,默认是一个空对象(要给子组件一个ref属性)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi
2021-05-31 21:41:00
230
原创 vue篇-组件中的data为什么是一个函数
为了保证组件的独立性 和 可 复用性，data 是一个函数，组件实例化的时候这个函数将会被调用，返回一个对象，计算机会给这个对象分配一个内存地址，你实例化几次，就分配几个内存地址，他们的地址都不一样，所以每个组件中的数据不会相互干扰，改变其中一个组件的状态，其它组件不变。...
2021-05-30 21:39:15
110
原创 vue篇-v-model原理、v-model修饰符
v-model其实是一个语法糖,相当于两个指令的集合(v-bind绑定一个value属性,v-on:input给当前元素绑定一个input事件)<input type="text" name="" id="" v-model='message'><input type="text" :value = "message" @input = "message = $event.target.value">...
2021-05-30 15:44:07
485
原创 js高阶函数filter、map、reduce
我们从一个小案例彻底了解js高阶函数filter、map、reduce现有需求1.对一个数组进行过滤(小于100)2.对过滤的数组进行乘23.对数组所有数据求和1.我们不用高阶函数时会这样操作var arr = [10,20,30,50,40,120,150,500]// 1.过滤arr只要小于100的数据var newArr = [] //接收小于100的新数组for (let i = 0; i < arr.length; i++) { if(arr[i]<100){
2021-05-30 15:23:38
143
原创 vue篇-购物车案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document&.
2021-05-29 23:09:58
139
原创 vue篇-计算属性computed
什么是计算属性1、在computed中，可以定义一些属性，这些属性叫做计算属性2、计算属性的本质是一个方法，不过一般是将他们的名称直接当做属性使用，不会当方法调用。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
2021-05-28 09:20:35
87
原创 Koa2学习
目录Koa2是什么Koa2安装Koa2简单使用koa2中间件的特点Koa2实例Koa2是什么Koa 是一个新的 web 框架，由 Express 幕后的原班人马打造， 致力于成为 web 应用和 API 开发领域中的一个更小、更富有表现力、更健壮的基石。 通过利用 async 函数，Koa 帮你丢弃回调函数，并有力地增强错误处理。 Koa 并没有捆绑任何中间件， 而是提供了一套优雅的方法，帮助您快速而愉快地编写服务端应用程序。Koa2安装Koa 依赖 node v7.6.0 或 ES2015及更高版
2021-05-16 15:32:49
142
原创 07-ECharts显示相关(主题、调色盘、图表自适应)、动画相关(图表加载动画、增量动画、动画配置项)、交互API(全局echarts对象的方法、echartsInstance对象的方法)
目录内置主题自定义使用主题内容调色盘的使用颜色渐变样式的使用图表自适应的实现内置主题Echarts中默认内置了两套主题:light dark在初始化对象方法init中可以指明init有两个参数,第一个参数是dom节点,第二个参数是主题默认内置了两套主题 , light dark var mCharts = echarts.init(document.querySelector("div"), 'dark')lightdark除此之外我们也可以自定义主题自定义使用主题内容1.在
2021-05-15 15:52:26
317
原创 06-Echarts雷达图、仪表盘的基本实现
目录雷达图特点雷达图基本实现仪表盘的特点仪表盘的基本实现雷达图特点雷达图可以用来分析多个维度的数据与标准数据的对比情况雷达图基本实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e
2021-05-15 11:50:03
223
原创 05-Echarts矢量地图实现、及常见效果
目录矢量地图实现流程矢量地图实现代码矢量地图实现流程ECharts最基本的代码结构准备中国地图的矢量数据使用Ajax获取矢量地图数据在Ajax的回调函数中注册地图矢量数据 echarts.registerMap(‘chinaMap’, 矢量地图数据)配置geo的type为’map’, map为’chinaMap’矢量地图实现代码<!DOCTYPE html><html lang="en"><head> <meta charset="U
2021-05-15 11:17:57
944
原创 04-Echarts饼图的基本实现、常见效果
目录饼图的特点饼图的基本实现显示文字格式化圆环效果南丁格尔图(根据百分比展现的图)选中效果饼图的特点饼图可以很好地帮助用户快速了解不同分类的数据的占比情况饼图的基本实现不需要配置xAxis和yAxis<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, in
2021-05-13 21:24:28
588
原创 03-ECharts直角坐标系的常用配置grid、axis、dataZoom
目录grid(直角坐标系内绘图网格)axis(坐标轴axis坐标轴分为x轴和y轴)dataZoom(区域缩放)grid(直角坐标系内绘图网格)直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。可以在网格上绘制折线图，柱状图，散点图（气泡图）。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="vie
2021-05-13 20:45:03
624
原创 02-Echarts散点图基本实现、气泡图、涟漪效果等
目录散点图特点散点图实现方法散点图基本实现气泡图涟漪动画效果散点图特点散点图可以帮助我们推断出变量间的相关性比如身高和体重的关系散点图也常用在地图的标注上散点图实现方法1.x轴数据和y轴数据:都是二维数组比如 [[‘身高’,体重],[‘身高’,体重],…]2.图标类型:在series下设置type:scatter xAxis和yAxis的type都要设置为value3.调整将坐标轴都设置为脱离0值比例,scale:true散点图基本实现<!DOCTYPE html><
2021-05-12 22:12:29
1867
原创 01-Echarts折线图基本实现、最大值、最小值、堆叠折线图等等
目录Echarts折线图基本实现特点最大值、最小值、平均值、标注区间显示折线线条平滑效果、风格、填充效果紧挨边缘脱离0值比例堆叠折线图Echarts折线图基本实现特点折线图常用来分析数据随时间的变化趋势<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,
2021-05-12 21:22:54
4495
原创 JS原型
1.函数的prototype属性每一个函数都有一个prototype属性,它默认指向一个object空对象(即:原型对象)console.log(Date.prototype);//{constructor: ƒ, toString: ƒ, toDateString: ƒ, toTimeString: ƒ, toISOString: ƒ, …}原型对象中有一个属性constructor,它指向函数对象console.log(Date.prototype.constructor === Date)
2021-04-24 22:23:28
46
原创 JSON
JSONJavaScript Object Notation JS对象表示法JSON和JS对象的格式一样,只不过JSON字符串中的属性名必须加双引号 JSON分类 1.对象{} 2.数组[] JSON中允许的值 1.字符串 2.数值 3.布尔值 4.null 5.对象(不包括函数对象)
2021-04-20 20:51:30
65
原创 JS简单轮播图,图片切换暂停开始
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> window.onload =
2021-04-15 21:16:37
905
转载 JQuery中$.ajax()方法参数详解
1.url:要求为String类型的参数，（默认为当前页地址）发送请求的地址。2.type:要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。3.timeout:要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。4.async:要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项
2021-04-15 16:39:25
68
原创 JS中的BOM对象Navigation,Location,History
BOM对象(browser object model)*浏览器对象模型*BOM可以使我们通过JS来操作浏览器*在BOM中为我们提供了一组对象,用来完成对浏览器的操作1.window-代表的使整个浏览器的窗口,同时window也是网页中的全局对象2.Navigation-代表的当前浏览器的信息,通过该对象可以来识别不同的浏览器3.Location-代表当前浏览器的地址栏信息,通过Location可以获取地址栏信息,或者操作浏览器跳转页面4.History-代表浏览器的历史记录,可以通过该
2021-04-14 21:44:23
472
原创 js键盘移动div
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #box {
2021-04-13 22:34:06
47
原创 js键盘事件
键盘事件 onkeydown 按键被按下 对于onkeydown来说一直按着不放的话,事件会一直触发 当onkeydown连续触发时,第一次和第二次中间间隔时间长,然后非常快 这种设置为了防止误操作的发生 onkeyup 按键被松开 键盘事件一般都会绑定给能够获取到焦点的对象或者是document<!DOCTYPE html><html lang.
2021-04-13 22:12:27
67
原创 js事件传播机制
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #box1 {
2021-04-13 21:36:29
88
1
原创 js多事件绑定兼容所有浏览器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <button
2021-04-13 20:58:47
148
转载 什么是event
JS中的event 对象详解JS的event对象Event属性和方法：type：事件的类型，如onlick中的click；srcElement/target：事件源，就是发生事件的元素；button：声明被按下的鼠标键，整数，1代表左键，2代表右键，4代表中键，如果按下多个键，酒把这些值加起来，所以3就代表左右键同时按下；（firefox中 0代表左键，1代表中间键，2代表右键）clientX/clientY：事件发生的时候，鼠标相对于浏览器窗口可视文档区域的左上角的位置；(在D
2021-04-13 12:51:27
1067
原创 事件冒泡,事件委托
事件冒泡,取消冒泡<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #box1{
2021-04-13 12:41:47
87
原创 js div跟随鼠标移动
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #box{
2021-04-12 22:35:55
74
原创 JS事件对象clientX clientY鼠标移动的水平和垂直位置
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #areaDIv{
2021-04-12 22:01:15
188
原创 JS样式相关的属性clientWidth，offsetLeft，scrollHeight，onscroll
clientWidthclientHeight这两个属性可以获取元素的可见宽度和高度这些属性都是不带px的,返回的都是数字,可以直接进行计算会获取元素宽度和高度,包括内容区和内边距<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sc
2021-04-12 21:35:46
75
原创 Math生成0-10随机数
Math.random()可以用来生成一个0-1之间的随机数申城一个0-10之前的随机数生成0-x之间的随机数Math.round(Math.random()*x)生成0-10的随机数生成一个x-y之间的随机数Math.round(Math.randow()*(y-x))+xfor(var i=0;i<100;i++){//生成1-6之前的随机数console.log(Math.round(Math.random()*5)+1)}...
2021-04-11 11:31:35
1967
原创 Date对象
在JS中使用Date对象来表示一个时间//创建一个Date对象//如果直接使用构造函数创建一个Date对象,则会封装成当前代码执行的时间var d = new Date()//创建一个指定的时间对象//需要在构造函数中传递一个表示时间的字符串作为参数//日期格式 月份/日/年 时:分:秒var d2 = new Date("12/2/2020 11:10:10")console.log(d2)//Date Wed Dec 02 2020 11:10:10 GMT+0800 (中国标准时间)
2021-04-11 11:20:14
55
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人