自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(49)
  • 收藏
  • 关注

原创 element-ui的左边导航栏高度无法占满侧边

element-ui的左边导航栏高度无法占满侧边高航栏的盒子高度不足但是会出现横走轴滚动条,原因是element-ui中的style设置,将其删除即可

2022-07-06 15:41:01 2141 1

原创 npm i element-ui -S命令错误 针对于vue2

报错错误原因安装包的命令错误改成下面如下:cnpm是直接从淘宝镜像源下载安装包,我这边是下载了cnpm的

2022-07-04 19:42:40 576

原创 console.log是同步还是异步?

console.log是同步对b变量内部数值改变的时候,紧接这console.log,在浏览器的中显示了变量的改变,以为是console.log是异步操作。但是在node.js中,a的friend中的age是19,是同步操作原因暂时不详

2022-06-21 10:36:07 424

原创 npm ERR! Could not resolve dependency:npm ERR! peer vue@“^3.0.0“ from vant@3.5.1npm ERR! vant@“*

在vue的脚手架中安装vant包报错问题的产生的原因nodejs的环境和vant包不兼容,安装vue的环境是vue@"^2.6.14" from the root project安装vant包的环境RR! peer vue@"^3.0.0" from vant@3.5.1问题解决的方法 npm ERR! Fix the upstream dependency conflict, or retry。 修复上流环境依赖冲突,或者重试npm ERR! this command with --force, or

2022-06-13 15:54:14 2660

原创 文件file的change事件触发情况

e事件的触发只有两种情况:1,第一次上传文件,2,第二次不上传文件,则会提醒上传文件,但是后面次数不选择文件,不会触发e事件,则不会产生提醒文件上传。除非重新选择新的文件,但是第二次重复选择该文件,也不会触发e事件。...

2022-06-09 16:25:44 1329

原创 实现跨域JSONP

JSONP实现跨域是通过<script src='要访问的跨域的地址'>实现跨域请求,src不受同源策略的约束。通过在客户端添加<script src='要访问的跨域客户端地址'>,对客户端发起请求,可以在network查看服务端收到客户端的请求后,需要返回函数,本质上仍是服务端传递数据给客户端,但是需要通过客户端自己设置的函数显示服务端数据,因此服务端返回的是一个字符串函数直接被客服端接收,后调用函数。......

2022-05-19 16:05:31 218

原创 模板引擎template.js

模板引擎的作用:样式和数据更好的添加使用:1,引入模板引擎,在线的,js文件都行官网下载安装 - art-template2,定义数据3,定义模板,需要建立一个新的script,type=text/html4,使用template函数,连接数据和模板5,将内容放到dom中 <!-- <script src="./lib/template-web.js"></script> --> <script src="https:

2022-05-12 20:34:06 305

原创 jQuery学习中出现问题整理

1,jQuery通过动态添加的节点,无法绑定事件解决方法,交给父盒子进行事件委托处理事件委托的写法 $('父盒子').on('绑定事件类型','子盒子',function(){console.log(this)//this 指的是子盒子})2 jQuery的入口函数入口函数的作用,一般情况下我们在dom节点编写完成后,写在下面,因此一般都用不到入口函数。但是如果把js的操作写在head部分,dom节点没有加载完毕,因此js的操作无法执行。又或者我们需要获得网页的图片资源等,但图片

2022-05-04 21:13:32 1116

原创 null 和undefined的区别

两种数值类型不同,null是obejct,undefined就是undefined。使用number进行转化,null是零,undefined是nan。本质上null就是不存在数值类型 console.log(typeof null);//object 数字来看是零 console.log(typeof undefined);//undefined 数字来看是nanundefined的使用4种情况 // undefined的情况 //1, 如果是

2022-04-23 12:06:28 448

原创 原型,原型链,继承(二次整理)

原型:prototype原型链:__propoto__,[[prototye]]只用函数拥有原型和原型链,其他函数,数组等都用用原型链 <script> function fun(){ console.log("hello"); }; console.dir(fun) let arr = [11,22]; console.dir(arr) </script&g

2022-04-22 21:16:45 316

原创 防抖和节流

防抖什么现象需要进行防抖案例:input只要输入就不断发送 <!-- 什么现象需要防抖 --> <input id="username" type="text" placeholder="请输入用户名"> <script> let username= document.getElementById('username'); username.addEventListener('input',(e)=>{

2022-04-21 15:30:53 189

原创 闭包(二次整理)

闭包的概念:方法返回方法意义是:1延长局部变量的使用时间,2 形成私有属性局部变量和全局变量局部变量外部函数是无法访问的,且函数调用后就消失。而全局变量一直存在。而闭包的使用可以使得局部变量的值可以被外部获得,是嵌套的内部函数给什么获得什么,还是无法访问局部变量。也增长局部变量的使用寿命。 // 作用域 const a="我是全局变量"; function fun1(){ const b="局部变量"; ...

2022-04-20 15:59:38 721

原创 Bable

作用Bable的作用是将ES6版本的js语言编译成多大浏览器兼容性更好的的低版本js语言。官网https://babeljs.io/Bable的使用(SetUp)CLI:在窗口命令行中使用准备工作node.js的下载,node.js可以理解为平台,类比于浏览器。node.js有两层理解的意思:1,上面所说的平台;2,后端的编程语言npm是对下载到node.js该平台的包进行管理node.js的下载官网下载(下载左边的稳定版本)Node.jsht...

2022-04-19 15:23:53 1195

原创 Vue基础(二)

这一篇主要将子组件和父组件子组件的建立 <div id="root"></div> <script> const app =Vue.createApp({ template:`<div><hello/><world/></div>` }); app.component('hello',{ templa..

2022-04-16 22:23:06 1055

原创 正则表达式

作用:检查输入的内容是否符合要求两种定义格式^是开头符号,$是结尾符号 <script> // 第一种正则表达式创建 var regexp = /^\d{6}$/; // 第二种正则表达式创建 var regexp2 =new RegExp('^\\d{5}$') var num1 = '123456'; var num2 ='45622'; console.log(regexp

2022-04-11 20:20:54 353

原创 Ajax基础,xhr和JSON格式

Ajax请求的步骤1,实例化,2,对请求进行监听,3,准备请求,4,发送请求。请求的返回,是请求监听处的代码返回的。 <!-- 没有ajax,科研同XMLHttpRequest构造函数实例化来创建 --> <script> //要连接的后端地址 const url = 'https://www.imooc.com/api/http/search/suggest?words=js'; // Ajax的使用步骤

2022-04-07 13:02:26 3111

原创 cookie和localStorage

cookie基本概念,作用cookie的属性名称,值,时间,域,路径script> //写cookie //打开网页的方式不同,会影响网页是否能查看cookie document.cookie="age=18"; // //读cookie console.log( document.cookie); // cookie的名称和值的设置,最好不用中文 document.cook

2022-04-06 11:53:59 117

原创 实时自动打包webpack

可以实时打包后,在浏览其中打开显示安装包npm install --save-dev webpack-dev-server@3.11.0package.js中的设置在scripts中添加 "scripts": { "webpack": "webpack", "dev": "webpack-dev-server --open chrome" },{ "name": "webpack-url-loader", "version": "1.0.0",...

2022-04-05 23:15:04 485

原创 Webpack打包CSS图片,HTML图片,JS图片

CSS图片打包图片如果是通过网址,服务器上的,那么webpack可以则跳过,不需要去被识别。包和环境配置跟上篇的CSS打包一样但是如果是本地图片,那么需要识别,这时候要借助loader安装包 file-loadernpm install --save-dev file-loader@6.0.0所有包情况package.json{ "name": "webpack-js-img", "version": "1.0.0", "description": "", "m.

2022-04-05 22:16:25 783

原创 webpack打包CSS流程

1,要打包的文件,和引入的模板文件准备先准备好需要转换的文件,放在src文件夹中,有index.css样式文件和index.js。虽然说是把css也编译打包,也是先将其转换给index.js文件的,index中的文件内容import './index.css'还有一个模板文件,也就是将打包编译好的文件引入到的index.html文件import './index.css'2,环境搭建npm init =》项目搭建环境的初始化初始化就会自动生成webpack.jso.

2022-04-05 19:13:15 1850

原创 ERROR in ./src/index.jsModule build failed (from ./node_modules/babel-loader/lib/index.js):Error:

错误情况主要错位内容:ERROR in ./src/index.jsModule build failed (from ./node_modules/babel-loader/lib/index.js):Error: Cannot find module ' @babel/preset-env' from 'F:\web\视频学习敲代码\webpack\loader'检查情况1,环境的配置(包的安装),package.json,检查正确2,webpack的配置,即webpack.

2022-04-05 10:45:02 4675

原创 构造函数和class

class的基本格式constructor放属性 ,后面放方法 // class和构造函数本质是相同的 class People{ constructor(name,age){ this.name=name; this.age=age; } //类的方法要写constructor的外面,各个实例共享方法,存储的位置相同 //书写要求,各个方法之间不用任何符号

2022-04-03 21:25:09 373

原创 Promise

目录基本格式:状态和方法promise实例使用then方法后任然是一个promise,可以继续调用thencatch处理错误的,rejectpromise对象的简写promise.resolve()promise.reject()管理多个promise对象promise.all()promise.race()promise.allSettle()注意事项传入的参数,要是可以迭代的对象,如果不是promise,会自动转化为promise对象管理多个prom.

2022-04-02 14:13:05 825

原创 iterator

lterator的形式使用iterator的原因:数组遍历可以用for循环,对象遍历用for in,iterator可以统一遍历的方法。 <script> const it=[11,22][Symbol.iterator](); console.log(it.next());//{value: 11, done: false} console.log(it.next());//{value: 22, done: false} con

2022-04-01 15:25:49 403

原创 Set和Map

Set的基础用法Set里面存贮的是无序且不重复的元素增加(add),删除(delete,clear),查(has) <script> const a =new Set(); // set的方法 a.add(1).add(2); console.log(a);//{1,2} //判断set里面是否有这个元素 console.log(a.has(2));//true /

2022-03-31 21:21:35 207

原创 剩余参数和展开运算符

目录剩余参数的基本概念和使用可以使用剩余参数代替arguments可以与对象和数组的解构赋值一起使用展开运算符将数组变为展开的序列数组复制数组的合并将类数组转化为数组将字符串展开对象展开对象合并对象展开的注意事项空对象展开还是空对象非对象展开对象的内部属性还是对象,内部对象不会展开对象展开的应用复制对象剩余参数的基本概念和使用将参数以数组的形式存放剩余参数只能写在最后,其他参数不可以写在剩余参数后面 <sc.

2022-03-31 15:54:57 596

原创 对象的属性方法简写和函数参数的默认值

对象的规则ES6中对象的属性和方法的简写 <script> // 对象属性和方法的简写 const age=18; const people={ // 当对象属性和对象值相同的时候 age, // 对象方法可以省略function hello(){ console.log("你好");

2022-03-31 10:55:33 139

原创 数组和对象的解构赋值

数组的解构赋值解构匹配,索引值相同 <script> let a =[11,122,33]; const [ b,c,d ]=[11,122,33]; console.log(b,c,d); </script>默认值的基本用法右边没有需要被解构的值,那么左边的值仍是原来默认的值 // 默认值的基本用法 const [a=1,b=2]=[]; console.log(a,b)//1,

2022-03-31 09:47:26 223

原创 箭头函数基础

形式const/let 函数名称 = (形参)=>{函数体} <script> const sum = (a,b)=>{ return a+b } console.log(sum(1,1)); </script>箭头函数没有this箭头函数的函数作用域没有this,根据作用链会继续往外部的作用域寻找this <script> co

2022-03-30 16:33:46 224

原创 模板字符串

模板字符串用``连接与一般字符串相比较没有差别,但是便于字符串的连接使用。同时模板字符串中的注入可以进行函数的调用,数组的选取之类的操作,但是普通字符串不具备。 <script> let people={ name:"xiaoming", age:12, } console.log("我是"+people.name+",今年"+people.age+"岁");//我是xiaoming,今年12岁

2022-03-30 11:22:40 6866

原创 let,const,var

let变量和const常量const常量后面无法重新赋值改变。 <script> let name ="xiaoming"; const age =18; console.log(name); console.log(age); name = "xiaohong "; console.log(name); // age是const常量,无法改变值 age

2022-03-30 09:53:10 96

原创 Prototype,原型链,继承,面向对象

基本定义构造函数类(prototype)以及其实例(——proto——)都可以通过函数寻找到其原型,可以通过原型添加属性和方法。其原型链的重点是object。prototype对所有的函数都存在,但是只有对构造函数才有作用prototype函数的作用函数.prototype也是一个对象对一般函数 <script> function sum(a,b){ return a+b; } console.log

2022-03-29 10:42:31 326

原创 Vue基础(一)

vue结构的基础构成:实例化(数据,模板),挂树<head> <script src="https://unpkg.com/vue@next"></script></head><body> <div id="root"></div> </body><script> // 创建一个组件实例,包括数据v和模板,vue自动将数据和模板匹配,也就是数据连接vm

2022-03-27 16:40:13 1399

原创 SASS基础

VS按照插件 Live Sass Compilersass主要是将一种简单的规定的语法编辑,转化为常规的CSS 语法,增强开发体验变量定义文件开头用$来定义,便于全局的一些属性值的修改嵌套写法父标签中内嵌和多子标签,每一层标签都有其特定的CSS样式,如果用传统的CSS写法,需要重复书写子标签以上的父标签拆分一个scss文件内容过多可以拆分为子文件,命名需要开头使用下划线,再通过父文件开头引入使用@import “子文件名称”;mixin将一些特定功能的函.

2022-03-26 10:00:06 321

原创 文字超出部分设置为省略号

单行文本设置省略号 <style> .cont{ /*内容超出后隐藏*/ overflow: hidden; /* 超出内容显示为省略号*/ text-overflow: ellipsis; /*文本不进行换行*/ white-space: nowrap; } </style></head&g

2022-03-25 21:10:45 151

原创 mediaquery 媒体查询

定义:为不同大小的显示界面制定不同的CSS样式。

2022-03-25 19:11:14 305

原创 Flex布局

目录display:flex|inline-flex:决定flex布局。flex属性flex容器属性排列的方向,flex-direction盒子几行排列,flex-wrap盒子排序的方向和盒子排几行 flex-flow子盒子在主轴的排列方式 justify-content子盒子在垂直方向上的排列方式 align-itemsalign-content 多行的排列方式项目属性flex弹性布局,随着视口大小的改变,内部的盒子伴随相应的布局变化display:fl

2022-03-25 15:38:16 334

原创 移动端基础知识

像素物理像素,dp,实现屏幕实际被分为多少个小块CSS像素,px,在标清情况下,1dp=1px;在高清的情况下,1dp=2px。设备像素比,在缩放比为1的情况下,物理像素比CSS像素(物理像素含CSS像素)。CSS像素的1px是根据标清情况下固定的。缩放比的情况,设备的物理像素是固定的。视口viewport在<head>部分对网页的视口进行设置,一般默认写好,匹配设备的大小,和缩放比为1。 <meta name="viewport" content="widt

2022-03-25 10:47:57 267

原创 认识上下文this

上下文是指this这个值代表上下全文中哪一个对象this在对象中两种调用的方法1,对象打点函数this的上下文指哪一个对象,是由调用函数的方式决定的。<script> var object= { name:"xiaoming", sex:"男", jieshao:function(){ // this是指object conso

2022-03-24 11:08:59 421

原创 BOM的基本概念

目录window的属性全局变量window的尺寸属性window的卷动属性navigatorhistory locationwindow的方法内置函数window窗口的事件窗口大小改变事件窗口卷动事件BOM动画特效案例一:返回页面顶部案例二:导航楼BOM是浏览器和JS的接口,浏览器窗口window。具有属性(值)和方法(变量)。window的属性全局变量各个js文件中的全局变量是共享的,也就是说不同js...

2022-03-23 18:19:14 874

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除