- 博客(40)
- 收藏
- 关注
RSS订阅原创 Vue学习-如何在vue项目中通过a标签 download 下载本地文件
如何在vue项目中通过a标签 download 下载本地文件？一般来说我们会将vue项目的静态资源放在src的assets目录下。但如果我们将需要下载的，例如doc文件放在同样的目录下就会出现下载失败，找不到目标文件的错误。其实只需要将需要下载的文件放在public，也就是和index.html文件一个文件夹下即可，如下图：然后在需要进行点击下载文件的地方添加如下代码：<a href="./需要下载的文件名" download>点击下载</a>就可以实现下载啦。..
2021-05-23 22:36:30
3494
1
原创 js学习-setTimeout，promise和async执行顺序
一道面试题setTimeout(() => { console.log('setTimeout');}, 0)async function async1() { console.log('async1 start'); await async2(); console.log('async1 end');}async function async2() { console.log('async2');}console.log('script s
2021-04-20 22:30:44
493
原创 Vue学习-Vue2响应式原理的简单实现
Vue2响应式原理的简单实现 let data = { name: 'xm', age: 18, }//变成响应式数据 observer(data)//定义一个observer方法监听数据 function observer(target) { if (typeof target !== 'object' || target === null) {//判断是否是对象或者为空 return target;
2021-04-18 00:01:05
369
1
原创 ES6学习-Generator
Generator// function* fnc() {// console.log('hello');// return 111// }// const res=fnc()// console.log(res);//Object [Generator] {}// console.log(res.next());//hello { value: 111, done: true }类似迭代器// function* fnc() {//生成器函数会自动返回一个生成器对象//
2021-04-16 23:35:23
123
原创 ES6学习-for...of 循环+iterator
for…of 循环+iterator//数组对象遍历，打印值// const arr=[1,2,3,4]// for(let i of arr){// console.log(i);// if(i>2){//可以随时终止循环，forEach就不能// break;// }// }//set对象遍历,打印值// const s=new Set(arr)// for(let i of s){// console.log(i);/
2021-04-16 23:17:13
172
原创 ES6学习-Symbol
Symbolconst s = Symbol()console.log(s);console.log(typeof s);console.log(Symbol() === Symbol());//false 表明每个symbol都是独一无二的console.log(Symbol('111'));//symbol允许我们传入一个字符串，作为这个symbol的描述文本const obj = {}//ES6后对象的属性名可以是字符串或者symbolobj[Symbol()] = '123'o
2021-04-16 22:20:41
92
原创 ES6学习-Map
Map//Map// const obj={}//分别以布尔值，数字和对象创建属性并赋值// obj[true]='val1'// obj[123]='val2'// obj[{xx:1}]='val3'// console.log(Object.keys(obj));//属性值都变成了字符串// console.log(obj[{}]);//这样也能获取到val3const m=new Map()//Map才是严格意义上的键值对集合，可以用来映射两个任意数据类型之间的对应关系co
2021-04-16 21:52:16
89
原创 ES6学习-Set
Setconst s = new Set()s.add(1).add(2).add(3)//add方法返回set本身，所以可以链式调用，若重复添加相同的值，则会被忽略console.log(s);s.forEach(i => console.log(i))console.log(s.size);console.log(s.has(100));console.log(s.delete(3));s.clear()//清空console.log(s);const arr =
2021-04-16 21:38:03
87
原创 ES6学习-extends
extendsclass Person { constructor(name) {//构造函数 this.name = name } say() { console.log(`hi,my name is ${this.name}`); }}class student extends Person{ constructor(name,number){ super(name)//始终指向父类，调用super即调用父
2021-04-16 21:17:38
105
原创 ES6学习-class
class//class 关键词//ES6之前// function Person(name){// this.name=name;// }// Person.prototype.say=function(){// console.log(`hi,my name is ${this.name}`);// }// let person1=new Person('xm')// person1.say()//ES6以后class Person { const
2021-04-16 19:59:22
100
原创 ES6学习-Reflect
Reflect// const obj={// name:'xm',// age:18// }// const proxy =new Proxy(obj,{// get(target,property){// return Reflect.get(target,property)// }// })//如果不定义get方法,默认执行的get就和上面的方法一样// console.log(proxy.name);const obj ={
2021-04-15 22:19:29
194
原创 ES6学习-Proxy
Proxyconst person = { name: 'xm', age: 18}const personProxy = new Proxy(person, { get(target, property) {//target代理目标对象，property目标属性名称 return property in target ? target[property] : 'default'//访问存在的属性就返回，不存在的就返回default //con
2021-04-15 22:05:55
86
原创 ES6学习-Object.assign方法
Object.assign方法// const target={// a:123,// b:456// }// const tem={// a:321,// c:789// }// const result=Object.assign(target,tem)//assign方法，用后面对象的属性覆盖第一个对象的属性，可以传入多个对象// console.log(result);// const obj={name:'xm'}// function
2021-04-15 21:26:48
147
原创 ES6学习-对象字面量
对象字面量const age = 18const obj = { name: 'xm', // age:age age,//变量名与属性名一致的话就能略写 //method:function(){}, method() { },//省略掉function //Math.random():123//不允许 [Math.random()]:123//ES6后使用[]内可以使用任意的表达式，表达式结果将作为属性名}obj[Math.random(
2021-04-14 22:22:16
154
原创 ES6学习-箭头函数
箭头函数const fnc = (n, m) => { console.log(m); return n + 1;}console.log(fnc(1,2));const arr=[1,2,3,4,5,6,7]//普通定义一个方法const arr1=arr.filter(function(item){ return item%2})console.log(arr1);//箭头函数const arr2=arr.filter(i=>i%2)conso
2021-04-14 22:08:48
116
原创 ES6学习-字符串的扩展方法
字符串的扩展方法const msg='hello,ES6!'console.log( msg.startsWith('hello'),//startWith，是否以hello开头，返回true msg.endsWith('!'),//endsWith，是否以!结尾，返回true msg.includes('ES')//includes，字符串中是否包含ES，返回true);...
2021-04-14 21:49:06
101
原创 ES6学习-展开数组参数
展开数组参数const arr=['1','2','3']console.log( arr[0], arr[1], arr[2],);//最笨的办法，参数不定时就不行了console.log.apply(console,arr);//console的apply方法，将参数当做数组接收console.log(...arr);//ES6展开数组...
2021-04-14 21:48:19
195
原创 ES6学习-数组的解构
数组的解构const arr = [100, 200, 300]//const [foo,bar,baz]=arr//[]中放的是我们所需要提取出来的变量名，内部就会对应分配数值//console.log(foo,bar,baz);//const [ , ,baz]=arr//保留逗号确保解构位置的正确//console.log(baz);//const [foo,...rest]=arr//console.log(rest);//...表示提取从当前位置开始往后的所有成员,会以数组的形式返
2021-04-14 21:47:22
361
原创 ES6学习-剩余参数
剩余参数// function fnc(){// console.log(arguments);//arguments类数组打印个数不定的参数// }function fnc(...args){ console.log(args);//通过在函数形参前加上...，这个形参就会以数组的形式接收从当前这个参数位置往后所有的形参，只能在最后一位并且只能使用一次}fnc(1,2,3)...
2021-04-14 21:44:07
72
原创 ES6学习-模板字符串
模板字符串// const str='hello ES6'// const str=`hello ES6`// console.log(str);//正常使用就和普通字符串一样// const str=`hello// ES6`// console.log(str);//支持换行输出，不需要\n// const name='tom'// const msg=`hey,${name},${1+2},${Math.random()}`// console.log(msg);//可以通过$
2021-04-14 21:42:53
108
原创 ES6学习-对象解构
对象解构const obj={name:'xm',age:18}// const {name}=obj//提取obj对象中的name属性值// console.log(name);// const name='tom'// const {name}=obj//相同变量命名会报错// console.log(name);// const {name:objname='111'}=obj// console.log(objname);//支持重命名和设置默认值，在没有对应值的时候返回默认值
2021-04-14 21:41:17
127
原创 ES6学习-参数默认值
参数默认值// function fnc(x){// //x=x||true//通过逻辑判断为参数x添加默认值，但这样传入false也会使用默认值// x=x===undefined?true:x// console.log(x);// }//可以直接设置参数的默认值为true，但必须是参数列表的最后(如果有多个参数的话)function fnc(x=true){ console.log(x);}fnc()...
2021-04-14 21:39:00
146
原创 css学习-BFC
1.什么是BFC？BFC:块级格式化上下文。它是指一个独立的块级渲染区域，只有Block-level BOX参与，该区域拥有—套渲染规则来约束块级盒子的布局，且与区域外部无关。2.如何形成BFC？将box属性设置为以下情况时会形成BFC：1. overflow: auto/ hidden;2.position: absolute/ fixed;3. float: left/ right;4. display: inline-block/ table-cell/ table-caption/ f
2021-04-14 17:10:40
161
1
原创 js学习-数组的扁平化处理
数组的扁平化处理1.使用flat() const arr = [1, [2, [3, [4, 5]]], 6];//=>[1,2,3,4,5,6] //1.使用flat() const arr1 = arr.flat(Infinity); console.log(arr1);2.使用正则表达式 const arr = [1, [2, [3, [4, 5]]], 6];//=>[1,2,3,4,5,6] //2.使用
2021-04-13 21:02:54
123
原创 js学习-event loop
event loop事件循环机制 由三部分组成：1.调用栈 2.微任务队列 3.消息队列。event-loop开始的时候会从全局一行一行的执行遇到函数调用会压入到调用栈中被压入的函数被称之为帧当函数返回后会从调用栈中弹出。function fun1() { console.log(1) } function fun2() { console.log(2) fun1() con
2021-04-13 19:19:48
83
原创 js学习-手写filter
手写filterfilter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。 var arr = [1, 2, 3] var array = arr.filter((item, index) => { return item > 2 }) console.log(array); function filter(arr, filterCallBack) { /
2021-04-13 18:33:50
773
1
原创 js学习-手写map
手写map var arr=[1,2,3] //对数组中每个元素*2 var array=arr.map((item,index)=>{ return item*2 }) console.log(array); function map(arr,mapCallBack){ //检查传入的参数是否正确(第一个参数是否是数组,数组长度不为0,第二个参数是否是function)
2021-04-13 18:22:24
881
转载 js学习-js哪些操作会造成内存泄漏？
js哪些操作会造成内存泄漏？内存泄漏：指一块被分配的内存既不能使用，又不能回收，直到浏览器进程结束。1.JS的回收机制JavaScript垃圾回收的机制很简单：找出不再使用的变量，然后释放掉其占用的内存，但是这个过程不是实时的，因为其开销比较大，所以垃圾回收系统（GC）会按照固定的时间间隔,周期性的执行。到底哪个变量是没有用的？所以垃圾收集器必须跟踪到底哪个变量没用，对于不再有用的变量打上标记，以备将来收回其内存。用于标记的无用变量的策略可能因实现而有所区别，通常情况下有两种实现方式：标记清除和引用
2021-04-13 16:34:12
225
原创 js学习-作用域概念以及作用域预编译
作用域：一般理解为一个变量的作用范围。1.全局作用域(1)全局作用域在页面打开时被创建,页面关闭时被销毁。(2)编写在script标签中的变量和函数,作用域为全局，在页面的任意位置都可以访问到。(3)在全局作用域中有全局对象window,代表一个浏览器窗口,由浏览器创建,可以直接调用。(4)全局作用域中声明的变量和函数会作为window对象的属性和方法保存。2.函数作用域(1)调用函数时,函数作用域被创建,函数执行完毕,函数作用域被销毁。(2)每调用一次函数就会创建一个新的函数作用域,他们之
2021-04-12 21:32:06
98
原创 js学习-节流函数
节流函数当持续触发事件的时候保证一段时间内只调用一次事件处理函数,一段时间内只做一件事情。代码：<button id="button">点击</button> <script> function throttle(callback, wait) { let timeout; let startTime = new Date(); return function () {
2021-04-12 20:44:34
103
原创 js学习-防抖函数
防抖函数当持续触发事件一定时间内没有再触发事件事件处理函数才会执行一次如果设定的时间到来之前又一次触发了事件就重新开始延时。触发事件一段时间内没有触发事件执行肯定是定时器。(在设定的时间内又一次触发了事件重新开始延时代表的就是重新开始定时器)(那么意味着上一次还没有结束的定时器要清除掉重新开始)代码：<input type="text" id="input"><script> // 简单的防抖动函数 function debounce(wait,callback)
2021-04-12 20:27:43
113
原创 js学习-深拷贝和浅拷贝
js基本数据类型和引用数据类型js常用的基本数据类型包括undefined、null、number、boolean、string。js的引用数据类型也就是对象类型Object，比如：Object、array、function、date等。赋值、浅拷贝、深拷贝赋值:当我们把一个对象赋值给一个新的变量时，赋的其实是该对象的在栈中的地址，而不是堆中的数据。也就是两个对象指向的是同一个存储空间，无论哪个对象发生改变，其实都是改变的存储空间的内容，因此,两个对象是联动的。浅拷贝:重新在堆中创建内存，拷贝前后
2021-04-11 17:40:26
93
原创 js学习-箭头函数中的this指向
箭头函数中的this是在定义函数的时候绑定，而不是在执行函数的时候绑定。箭头函数中，this指向的固定化，并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，导致内部的this就是外层代码块的this。正是因为它没有this，所以也就不能用作构造函数。箭头函数中的this是在定义函数的时候绑定。 var x = 11; var obj = { x: 22, say: () => {
2021-04-11 15:52:54
319
原创 js学习-this指向
this指向案例：var name = 222 var a = { name: 111, say: function () { console.log(this.name) } } var fun = a.say fun()//函数直接调用 等同于fun.call(window) 也就是this指向window this.name=wind
2021-04-11 14:45:39
126
原创 js学习-预编译
预编译做了哪些事情？1.创建ao对象(js的变量对象，供js引擎自己去访问)2.找形参和变量的声明，作为ao对象的属性名，值为undefined3.实参和形参相统一4.找函数声明，会覆盖名字一样的变量声明下面是一个例子：function fn(a, c) { console.log(a)// function a() { } var a = 123 console.log(a)// 123 conso
2021-04-11 14:22:59
80
原创 uniapp使用moment.js格式化时间戳
uniapp使用moment.js格式化时间戳首先导入moment.js并将语言转成中文。import moment from "moment";//设置语言为中文moment.locale("zh-cn");1.格式化成月份this.monthes.MM = moment(this.monthes.stime).format("MM");2.格式化成天数this.monthes.DD = moment(this.monthes.stime).format("DD");3.格式化距离
2021-04-09 10:13:35
1291
原创 uniapp引入uni-ui组件报错TypeError: this.getOptions is not a function
今天学习uniapp时，引入uni-ui组件，结果微信开发者工具终端报错TypeError: this.getOptions is not a function。按照uni-ui官方步骤如下：解决方案：按照官方步骤，下载的是最新的sass-loader。解决办法就是安装[email protected] 即可。注意不要安装[email protected]及以上。// 安装[email protected] install [email protected] --save
2021-04-06 20:48:43
4835
原创 uniapp引用iconfont
uniapp引用iconfont1.选择自己需要使用的图标并选择Unicode下载。2.将其中的css文件复制到uniapp项目的static下的styles文件夹（没有可以自己建）3.回到iconfont网站，点击获取最新在线代码后复制代码。4.打开复制到项目里的css文件，将代码替换进去（@font-face部分替换成刚才复制的代码）5.在App.vue中引
2021-04-06 19:50:13
331
原创 TypeError: this.getOptions is not a function解决方案
项目场景：学习uni-app时创建项目导入sass出现“TypeError: this.getOptions is not a function”错误。解决方案：卸载sass-loader", “node-sass”npm uninstall sass-loader node-sass然后重新安装以下版本即可解决。// 安装较低版本cnpm install [email protected] [email protected]...
2021-04-05 22:24:03
2457
原创 Error: Cannot find module ‘webpack-cli/bin/config-yargs’解决方案
Error: Cannot find module 'webpack-cli/bin/config-yargs’解决方案今天学习webpack的时候，安装完webpack，webpack-cli和webpack-dev-server后执行npm run dev。结果报标题的错。解决方案如下：// 降低版本就可以了npm i webpack@4 -Dnpm i webpack-cli@3 -D...
2021-04-05 16:11:30
194
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人