自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

小森呀

web前端

  • 博客(117)
  • 收藏
  • 关注

原创 自定义滚动条(css)

文章目录前言 一、pandas是什么? 二、使用步骤 1.引入库 2.读入数据 总结一、认识滚动条::-webkit-scrollbar 滚动条整体 ::-webkit-scrollbar-thumb 滚动条滑块 ::-webkit-scrollbar-track 滚动条轨道 ::-webkit-scrollbar-button 滚动条轨道两端按钮 ::-webkit-scrollbar-track-piece 滚动条内层轨道

2021-12-16 23:30:02 2201

原创 prototype

prototype 显式原型属性 构造函数的属性 默认指向一个空的Object对象 __proto__ 隐式原型属性 实例对象的属性 - constructor - 实例对象的属性 可以获取构造函数 注意:实例对象.__proto__===对应构造函数.prototype...

2021-12-12 11:56:50 204

原创 new原理

构造函数 特殊的函数,类型是函数 实例对象 new关键字通过构造函数创建出来的实例对象,类型是对象 new 关键字 new原理1.创建一个空对象2.将空对象原型的内存地址__proto__指向函数的原型对象3.利用函数的call方法,将原本指向window的绑定对象this指向了obj4.利用函数返回对象objfunction a(name) { this.name = name; return this; } va

2021-12-01 22:59:22 473

原创 overflow:hidden

失效场景父元素有overflow:hidden属性,子元素超出父元素的部分并没有被剪切隐藏掉失效原因子元素有绝对定位,脱离了文档流,不受父元素约束解决方法给父元素添加定位

2021-11-29 00:02:15 215

原创 this指向

普通函数 window 严格模式 undefined 对象的方法里调用 调用该方法的对象 构造函数 创建出来的实例 定时器函数 指向 window 箭头函数 没有this,使用外层对象的this 总的原则就是this指的是调用它的对象var name = "小红"; function a() { var name = "小白"; console.log(this.name); } functio

2021-11-28 18:51:33 452

原创 ES6基础

声明变量的方式:var 声明变量,存在变量提升 属于顶层对象的属性 function - 属于顶层对象的属性 let 声明变量,不存在变量提升 不属于顶层对象的属性 const 声明常量,不可修改常量的内存地址 不属于顶层对象的属性 class - 不属于顶层对象的属性 import - - 顶层对象浏览器 window node global 运算符扩展运算符 ......

2021-11-28 16:29:33 67

原创 浏览器本地存储

setItem() 增、改 removeItem() 删 clear() 清空 getItem() 查 注意:localStorage(永久)sessionStorage()临时保存的都是字符串存储空间小

2021-11-21 23:52:31 303

原创 VueComponent(组件)

1.组件的本质是一个名为VueComponent的构造函数,由vue.extend生成2.vue解析组件标签时会创建组件的实例对象3.每次调用vue.extend,返回的都是一个全新的VueComponent4.this指向 a.组件配置中,data、methods、watch、computed中的函数的this均是指向VueComponent实例对象 b.vue配置中,data、methods、watch、computed中的函数的this均是指向Vue实例对象Vue与...

2021-11-21 15:51:59 678

原创 vue生命周期

vue生命周期beforeCreate 实例初始化前 无法访问到data中的数据和methods中的方法 created 实例初始化后 可以访问到data中的数据和methods中的方法 beforeMount 实例挂载前 页面呈现的是未经vue编译的dom结构,对dom的操作不奏效 mounted 实例挂载后 页面呈现的是经过vue编译的dom结构,对dom的操作奏效 beforeUpdate 数据更新前 此时数据是新的,页面

2021-11-21 12:08:38 200

原创 router基础

<router-link active-class="" to=""></router-link> router导航 <router-view></router-view> router展示 router配置import Vue from "vue";import VueRouter from "vue-router";import A from "../components/A.vue";import B from "../c

2021-11-14 11:44:05 609

原创 vue插槽

基本使用<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> &

2021-11-13 19:50:58 617

原创 vue插件

1.创建插件(一个js文件)export default { install(Vue,参数...) { // 插件内容 },};2.使用插件Vue.use("插件名",参数...);

2021-11-07 21:44:51 54

原创 props的写法

第一种:props: ["name", "sex", "age"]第二种:props:{ name:String, sex:String, age:Number }第三种:props: { name: { type: String, required: true,//是否必要性 }, sex: { type: String, default: "男",//没参数时的默认值 }

2021-11-07 21:20:22 191

原创 render

render(createElement) { return createElement("h1", "你好"); }, render: (createElement) => createElement("h1", "你好"),render: (h) => h("App"),

2021-11-07 16:49:56 56

原创 key的作用及原理

作用: key是虚拟DOM对象的标识,当数据发生变化时,Vue会根据[新数据]生成[新的虚拟DOM],随后Vue进行[新虚拟DOM]与[旧虚拟DOM]的差异比较原理(比较规则): 1.旧虚拟DOM中找到了与新虚拟DOM相同的key: a.若虚拟DOM中内容没变,直接使用之前的直DOM! b.若虚拟DOM中内容变了,则生成新的真实DOM,随后替换掉页面中之前的真实DOM。 2.旧虚拟DOM中...

2021-10-31 15:09:01 2608

原创 class与style

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <tit.

2021-10-31 11:58:31 173

原创 computed与watch

完整写法:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />

2021-10-19 23:10:32 74

原创 defineProperty给对象追加属性

方法一<script> let number = 20; let man = { name: "张三", sex: "男", }; Object.defineProperty(man, "age", { value: number, enumerable: true, //控制添加的内容是否参与遍历 writable: true, //控制添加的内容是否可以修改 configurable

2021-09-25 00:25:53 151

原创 less基础

注释&变量混合合并属性命名空间引入@import (参数) “文件”once 只包含一次,默认 reference 引用less文件但不输出 inline 引用less文件但不进行操作 less 无论是什么格式的文件都把他作为less文件操作 css 无论是什么格式的文件都把他作为css文件操作 multiple 允许引入多次相同文件名的文件 函数字符串函数数学函数ceil()...

2021-08-27 22:51:43 66

原创 git基础

远程库git remote 查看远程仓库别名 git remote -v 查看远程库别名 git remote add 别名 远程库http链接 创建远程库别名 git push 远程库别名 分支名 将分支推送到远程库 git pull 远程库别名 分支名 将分支从远程库拉取到本地(会合并分支) git fetch 远程库别名 分支名 将分支从远程库抓取到本地 git fetch --all 将远程库所有分支抓取到本地 git clo

2021-08-17 23:23:20 63

原创 typeof与instanceof的区别

typeof instanceof 作用 检测数据类型 检测对象之间的关联性 返回 小写字母字符串 布尔值 操作数 简单数据类型、函数或者对象 左边必须是引用类型,右边必须是函数 操作数数量 1个 2个 ...

2021-07-10 01:09:36 93

原创 变量交换(多种方法)

1.临时变量法<script> var a = 3; var b = 5; var c = b; b = a; a = c; console.log(a, b); </script>2.加减法<script> var a = 3; var b = 5; a = a + b; b = a - b; a = a - b; console.log(a, b);

2021-07-10 00:45:59 168

原创 ==与===的区别

==会进行类型的转换,===不会进行类型的转换6==6 T 6===6 T 6==“6” T 6==6 6===“6” F true==1 T false==0 T true===1 F false===0 F ""==0 T " "==0 T null==undefined T 假值==假值 ...

2021-07-09 23:57:30 115

原创 json与js字符串互相转换

json转js JSON.parse() js转json JSON.stringify()

2021-07-09 22:22:44 90

原创 HTTP状态码

1xx(信息,服务器收到请求,需要请求者继续执行操作)100 等待用户继续请求 101 切换协议(只能切换到更高级的协议) 2xx(成功,操作被成功接收并处理)200 请求成功 201 成功请求并创建了新的资源 202 已经接受请求,但未处理完成 203 请求成功,但返回的meta信息不在原始的服务器,而是一个副本 204 服务器成功处理,但未返回内容 205 服务器处理成功,用户终端(例如:浏览器)应重置文档视图 20

2021-06-12 01:24:51 237

原创 原生Ajax

getvar xhr = new XMLHttpRequest(); xhr.open("GET", "http://127.0.0.1:8000?a=100", false); xhr.onreadystatechange = function () { if (xhr.readyState === 4) { if (xhr.status >= 200 && xhr.status < 300) {

2021-06-12 01:01:25 155

原创 Vue-Router

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <tit.

2021-05-25 23:46:32 80

原创 vue数据代理

<script> //原数据 var data = { name: "Andy", }; // 数据收集 var _data = data; // 数据代理 var vm = {}; Object.defineProperty(vm, "name", { set(value) { _data.name = value; }, get() { retu..

2021-05-16 18:41:37 65

原创 v-model双向绑定原理

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <tit.

2021-05-07 23:28:51 79

原创 vscode常用插件

Chinese (Simplified) Language Pack for Visual Studio Code vscode汉化 auto rename tag 开始与结束标签同步更改 Live Server 代码与预览实时同步 Image Preview 鼠标悬浮在路径上图片预览 Path Intellisense 路径自动补全 prettier-code formatter 文件保存自动格式化(设置里format on save

2021-05-06 07:12:49 96

原创 vue组件访问

父组件访问子组件 el作用范围内必须有子组件注册的标签存在this.$children不建议使用<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="wid.

2021-05-06 00:33:26 92

原创 vue组件通信

访问自己的data数据Vue.component("my", { template: "#an", data() { return { h1: "我是标题", }; }, });

2021-05-05 22:58:22 116

原创 vue组件

1.全局组件 // 创建组件构造器 var an = Vue.extend({ template: `<h1>我的</h1>`, }); // 注册组件,在vue实例范围中使用<my></my> Vue.component('my',an)2.局部组件 // 创建组件构造器 var an = Vue.extend({ template: `<h1>我的</h

2021-05-04 14:04:57 89

原创 数组删除指定数据

function removearr(arr, item) { for (var i = 0; i < arr.length; i++) { if (arr[i] == item) { arr.splice(i, 1); return arr; } } } console.log(removearr(arr, 7));

2021-05-02 20:13:10 736

原创 js模块化开发(js页面通信)

使用场景:a.js需要使用b.js中的数据b.jsvar num = 123456789;//将需要用的数据暴露出去export default num;a.js-------html引入a.js的格式为<scripttype="module"src="./a.js"></script>//接收从b.js暴露出来的数据并赋值给num变量,并进行使用import num from "./module.js";console.log(num);...

2021-05-01 12:55:13 141

原创 中英文切换(仿i18n)

1.基于jQuery,先引入jQuery2.准备语言json文件cn.json-----中文语言{ "langAbout": "关于我们", "langResume": "投递简历"}en.json-----中文语言{ "langAbout": "About us", "langResume": "Send your resume"}3.html元素设置<h1 lang="langAbout">关于我们</h1.

2021-04-29 23:22:10 265

原创 i18n国际化(页面中英文切换)

1.基于jquery,先引入jQuery2.引入jquery.i18n.js(这个源码应该不完全,但是能用)(function ($) { $.fn.extend({ i18n: function (options) { var defaults = { lang: "", defaultLang: "", filePath: "/i18n/", filePrefix: "i18n_", fil

2021-04-29 21:49:58 852

原创 锚点展现与隐藏

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <tit.

2021-04-26 23:23:44 424

原创 简易分页器

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <tit.

2021-04-26 22:18:40 202

原创 video和audio

<video src="url" controls="controls"></video> <video controls="controls"> <source src="url" type="video/mp4" /> <source src="url" type="video/ogg" /> 自定义文字 </video> <audio src="url" controls="controls"..

2021-04-21 23:11:20 63

空空如也

空空如也

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

TA关注的人

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