- 博客(73)
- 收藏
- 关注
RSS订阅
原创 曝光埋点IntersectionObserver
曝光埋点IntersectionObserver封装成一个指令import Vue from "vue";Vue.directive("exposure", { // 指令的定义 inserted: function (el, binding) { const ioCourse = new IntersectionObserver( (entries) => { entries.forEach((i) => { //conso
2022-03-23 14:54:14
353
原创 webpack学习
文章目录一、初始化二、增加配置文件三、打包的文件自动加载到html文件上四、清除打包残留的无用文件五、调成开发模式，定位错误实际位置六、监听文件变化，实时编译(只能手动刷新浏览器)七、实时编译，无需手动刷新浏览器八、资源模块（使用图片等）九、解析css文件和less文件十、合并css文件十一、指定打包css路径和文件名十二、压缩css文件十三、ES6转换成ES5一、初始化npm init -y npm intall webpack webpack-cli --save-dev二、增加配置文件
2022-03-04 20:29:36
608
原创 vue中通过注册方法动态调用组件
文件结构├── src│ ├── components│ │ ├── dynamicCreation│ │ │ ├── index.js│ │ │ ├── index.vue│ └── main.jsindex.jsimport PerfectInformation from "./index.vue";import Vue from "vue";const InformationConstructor = Vue.extend(Perfect
2022-02-11 17:49:09
564
原创 解决js通过url下载文件，重命名
由于文件服务器的地址不同，导致跨域的问题，使得a标签的download="filename"不生效。download属性的兼容性。
2024-03-26 16:38:18
321
原创 element table表格中的form表单校验错误信息不显示
解决办法：将操作列的fixed=“right” 去掉（或者等数据获取到了 在渲染table表格）结果：校验成功了 但是错误信息没有显示出来。
2023-04-23 15:40:38
2153
1
原创 本地修改json数据json-server
文章目录环境获取新增删除更新环境npm install -g json-servernpm install axios新建db.jsonjson-server --watch db.json获取 getList() { this.$axios .get("http://localhost:3000/posts") .then(function (response) { console.log("getList", re
2022-04-07 18:05:49
1400
原创 JS ES6类和继承
class Person { constructor(name,food) { this.name = name this.food = food } eat() { console.log('吃'+this.food ); }}class Student extends Person{ constructor(name,age,food) { super(name,food) this.age = age } study() {
2022-03-04 11:32:01
126
原创 css 文字过长出现省略号
CSS 如何设置一行超出显示省略号overflow: hidden;text-overflow: ellipsis;white-space: nowrap;CSS 如何设置2行超出显示省略号overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;推荐一个文本省略的vue插件vue-textellipsis-zzc...
2022-03-03 19:55:46
572
原创 css实现三角形
{ width: 0; border: 100px solid transparent; border-bottom: 100px solid skyblue;}
2022-03-03 19:39:11
61
原创 css 变量variable
<style type="text/css">:root{ --bgcolor: blue; --color: red;}.left { width: 300px; height: 20px; background: var(--bgcolor);}</style>
2022-03-03 19:32:13
55
原创 避免过多重排重绘
使用 DocumentFragment 进行 DOM 操作CSS 样式尽量批量修改避免使用 table 布局为元素提前设置好高宽，不因多次渲染改变位置DocumentFragment的使用<ul id="list"></ul> const list = document.querySelector('#list'); const fruits = ['Apple', 'Orange', 'Banana', 'Melon']; const fragment.
2022-03-03 17:56:42
67
原创 Vue之filter过滤器
全局定义在main.js中Vue.filter("myfilter", function (value) { return value + 10; // 返回处理后的值});组件中使用 <div>{{ num | myfilter }}</div>在方法中使用var myFilter = Vue.filter("myfilter");myFilter(7)组件中定义组件中定义 filters: { handleNum(val) {
2022-03-01 16:40:58
388
原创 Vue之定义props
props props: { num: { type: [Number, String], //支持多种类型 default: 0, //默认值 }, arr: { type: Array, default: function () { return []; }, required: true, //是否必须 }, },
2022-03-01 15:45:31
906
原创 前端缓存数据
文章目录一、cookie二、localStorage三、sessionStorage四、强制缓存五、协商缓存一、cookie1.无法保存太大的数据（最大仅为4KB）2.请求接口会携带上，浪费带宽二、localStorage1.它能保存更大的数据（IE8上是10MB，Chrome是5MB）2.如果不手动删除，会一直存在写法：保存：localStorage.setItem('localStorage',123)获取：localStorage.getItem('localStorage'
2022-02-21 19:55:39
1263
原创 forEach 跳出循环
forEach 跳出循环 let btn = [1,2,3,4] try { btn.forEach((item,index)=>{ if (item===2) { throw new Error('break'); } console.info('循环中', item); }) } catch (error) { if (error.message === 'break') { console.log('跳出了');
2022-02-21 16:53:13
709
原创 console的更多功能
文章目录一、查看对象的信息二、追踪函数的调用轨迹三、计时功能一、查看对象的信息try { throw error ('自定义错误')} catch (error) { console.log('log', error); console.dir( error);}二、追踪函数的调用轨迹function d(a) { if (a===2) { console.trace(); }else { } return a;}function
2022-02-21 16:46:43
368
原创 微信小程序适配底部小黑条
文章目录一、适配安全区域(Safe Area)底部小黑条一、适配安全区域(Safe Area)底部小黑条wx.getSystemInfoSync()注意：如果使用微信开发者工具中的模拟器，screenHeight和bottom始终是相等的，需要用真机来测试。let screenHeight = wx.getSystemInfoSync().screenHeightlet bottom = wx.getSystemInfoSync().safeArea.bottom如果screenHeigh
2022-02-07 14:42:31
958
原创 CSS选择器
文章目录一、ID二、Class三、标签四、后代选择器五、相邻同胞选择器六、属性选择器一、ID#content{}二、Class.content{}三、标签p{}h1{}四、后代选择器<div class="parent"> <div class="child"> child <div class="son">son</div> </div> <div class="child">
2021-12-23 18:31:31
823
原创 JS的继承
文章目录一、构造函数继承二、原型链继承三、组合继承四、多继承一、构造函数继承function Person() { this.name = 'person'}Person.prototype.show = function () { console.log('Person.show');}function Student() { this.age = 12 this.name = 'student' Person.call(this)}Student.proto
2021-12-21 19:21:55
155
原创 npm -s和-d区别
文章目录一、npm -s和-d区别一、npm -s和-d区别npm install module_name -S = > npm install module_name --save写入到 dependencies 对象npm install module_name -D => npm install module_name --save-dev写入到 devDependencies 对象那 package.json 文件里面的 devDependencies 和 d
2021-11-23 17:25:42
1224
原创 Proxy监听数据增删改查
文章目录一、Proxy一、Proxyvar person = { name:'自行车'}var proxy = new Proxy(person,{ get:function(target,proKey){ if (proKey in target){ console.log('proxyGet', target,proKey); } else { console.log('fail', ); } }, set:function(target,proKey,val
2021-11-10 16:26:57
835
原创 闭包的理解
文章目录一、闭包一、闭包const myselfBb = function () { var data = {} return { set(key,val){ data[key] = val }, get() { return data } }}let useBb = myselfBb()useBb.set('name','张三')useBb.set('age','999')let request = useBb.get()console.log('re
2021-11-09 17:29:32
371
原创 原型和原型链
文章目录一、原型二、原型链三、原型链的指向一、原型由构造函数创建的对象，内部包含一个指针(proto)，这个指针就是对象的原型，指向构造函数的内部的prototype属性function Person(name){ this.name = name}let p = new Person('张三')console.log('log', p); //log Person {name: '张三'}console.log('log', p.__proto__ === Person.prototy
2021-11-09 17:14:41
350
原创 递归实现深拷贝
文章目录一、递归实现深拷贝一、递归实现深拷贝function copyData(obj) { if (!obj|| typeof obj !== 'object') { return false } let newObj = obj instanceof Array?[]:{} // 用for in 循环对象 但他会枚举到原型的属性 for (let key in obj) { // hasOwnProperty过滤掉原型上的属性 if (obj.hasOwnProperty
2021-11-08 18:57:22
131
原创 JS拖拽放置
<!DOCTYPE html><html><head><title>HTML5拖拽</title><meta charset="utf-8"><style>#div1,#div2,#div3 {width:350px;height:30px;padding:10px;border:1px solid #aaaaaa;}</style></head><body><u
2021-10-24 22:17:59
136
原创 判断数据类型，手写instanceof
文章目录一、typeof二、instanceof一、判断数组类型三、手写实现instanceof一、typeofconsole.log('typeof', typeof 123, typeof '123', typeof true, typeof {}, typeof null, typeof undefined);//typeof number string boolean object object undefinednull类型是object二、instanceofi
2021-10-15 15:42:54
105
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人