- 博客(36)
- 资源 (4)
- 收藏
- 关注
RSS订阅原创 this学习（一）this指向什么？
目录一：为什么要用this？二：常见误解1、this指向自身2、this指向函数的作用域三：this指向什么？一：为什么要用this？因为this提供了更优雅的方式来隐式传递一个对象的引用，可以将API设计的更加简洁且易于复用。下面来看一个例子function fun() { return this.name;}let obj = { ...
2019-06-30 22:28:39
230
原创 正则表达式
1、将一个字符串 例如：border-left-top转化成驼峰形式let str = 'border-left-top';let reg = /-\w/g;console.log(str.replace(reg, function(i){return i.slice(1).toUpperCase()}))代码解析：第一步let reg = /-\w/g;先获取到横杠 - ，...
2019-06-30 15:45:03
528
原创 js冒泡排序和快速排序的区别
1、冒泡排序原理：将数组中紧挨着的两个元素进行比较（比如：第0个和第1个进行比对），如果前一个元素比后一个元素大，那么这两个元素就调换位置，大的在后面，小的在前面；然后再将下一组数据（比如：第1个和第二个进行比对）执行相同的操作。这个方法依靠循环遍历，每一次遍历都会将一个最大数排列好。下面给一个例子：let arr = [22, 1, 3, 23, 99, 65, 112, 32, ...
2019-06-30 11:38:10
646
原创 字符串方法操作
1、写一个判断是否为类数组的方法for(let i = 0; i < 10; i++) { let div = document.createElement("div"); div.className = "testDiv"; document.body.appendChild(div);}let div = document.getElementsByCl...
2019-06-29 21:54:26
228
原创 根据数组中对象的某个属性进行排序
根据数组中对象的某个属性进行排序本题根据对象的id来进行降序排序let a = [ { id: 12, name: 'zhangsan' }, { id: 20, name: 'lisa' }, { id: 9, name: 'wangwu' }]// 排序方法1 （封装了，可对任何属性进行排序）function compare(propert...
2019-06-28 13:06:18
1609
原创 vue.js的两个核心
vue的两个核心：1、数据驱动：在vue中，数据的改变会驱动视图的自动更新。传统的做法是需要手动改变DOM来使得视图更新，而vue只需要改变数据。2、组件组件化开发，优点很多，可以很好的降低数据之间的耦合度。将常用的代码封装成组件之后（vue组件封装方法），就能高度的复用，提高代码的可重用性。一个页面/模块可以由多个组件所组成。...
2019-06-27 23:32:34
7959
原创 使用原生js为动态创建的dom元素绑定事件
为动态创建的dom元素绑定事件直接上代码吧，也很简单。<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l...
2019-06-27 23:02:27
6401
1
原创 localStorage设置过期时间实例
先介绍一些storage的API1、使用localStorage存储数据localStorage.setItem('test1', 'test');2、删除localStorage数据delete localStorage.test1; // 方式1：使用delete操作符localStorage.removeItem('test1');...
2019-06-27 22:32:39
1853
原创 创建一个超简单的虚拟DOM实例
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>创建一个超简单的虚拟DOM实例</title></head><body><script>function Element({tagName, props, c...
2019-06-27 15:54:07
1528
原创 sessionStorage和localStorage的区别
sessionStorage：数据在页面关闭后消失，页面刷新仍然存在，对象绑定于某个服务器会话；localStorage：数据可以永久存储，但是只有是同一个域名、端口、协议的情况下可以访问数据...
2019-06-26 23:23:08
93
原创 JavaScript（三）
1、下面代码的输出是什么?function checkAge(data) { if (data === { age: 18 }) { console.log("You are an adult!"); } else if (data == { age: 18 }) { console.log("You are still an adult."); } else {...
2019-06-26 23:18:08
1156
原创 创建一个构造函数实例的过程
调用构造函数实际上会经历4个步骤：1、创建一个新对象2、将构造函数的作用域赋值给新对象（因此this就指向了新对象）3、运行构造函数里面的代码（为新对象添加属性或方法）4、返回新对象...
2019-06-20 23:43:41
1895
原创 hasOwnProperty方法in操作符的用法和区别
hasOwnProperty(propertyName)该方法用于检查既定的属性在对象实例中是否存在，作为参数的属性名必须是字符串类型。如：let obj = { a: 'a1', b: 'b2'}Object.prototype.c = "c3";console.log(obj.hasOwnProperty("a")) // trueconsole...
2019-06-20 23:24:38
309
原创 JavaScript（二）
1、下面代码的输出是什么?+true;!"Lydia";该题主要考察的是数据类型转换，加运算会将true转换为数字1，如果是false会转为数字0。第二行的字符串“Lydia”进行布尔值转换的时候，会转换为true，但是！号是取反的意思，所以最后第二行代码的结果为false。该地答案为：1和false。2、下面代码会输出什么？let a = 3;let b = new...
2019-06-19 23:48:34
618
原创 JavaScript（一）
1. 下面代码的输出是什么？function sayHi() { console.log(name); console.log(age); var name = "Lydia"; let age = 21;}sayHi();这道题考的是变量提升，在预编译中，函数执行之前，会将变量和形参提升到函数最顶端（放到AO对象，并赋值为undefined），然后才开始执行代码。...
2019-06-18 22:44:43
436
原创 vue封装echarts组件实例
一言不合直接上代码吧！App.vue的代码：<template> <div id="app"> <h1>this is App page</h1> <Eharts :echartObj="echartObj"></Eharts> </div> </template>...
2019-06-14 23:40:03
11397
3
原创 vue中echarts实现自适应大小
echarts要实现自适应大小，需要在页面发生大小改变的时候，对图表实例进行重绘。在echarts里边，提供了一个重绘的方法：resize()图表的实例对象调用该方法即可进行重绘。然后还需要在vue的钩子函数mounted里边，定义一个window.resize()方法来监听页面发生变化。当页面发生变化时，就执行重绘的方法。完整示例如下：<template> ...
2019-06-14 23:05:35
20633
2
原创 vue创建vue-router的步骤
一：使用npm install将vue-router下载下来在终端输入：cnpm install vue-router --save 然后回车等待安装完成即可。建议使用cnpm比较快，后面的--save的作用是可以将vue-router保存到packjson文件中，以备后面要用。二：在main.js中引入vue-router三：在vue中注册vue-router四：创建...
2019-06-14 22:06:04
954
原创 如何解决input type="file"在IE11里无法获取文件的type属性
input type为file时，在IE浏览器上无法获取到type属性解决方案：利用name属性获取，因为name属性中包含了文件的名称和文件类型后缀，如下图：首先需要获取到name值let file = e.files[0];let fileName = file.name;这时候获取到的是一个字符串，所以可以使用字符串方法：split将字符串转换为数组，如下：...
2019-06-14 15:06:30
2750
原创 XML和JSON的区别
XML的格式：<?xml version="1.0" encoding="UTF-8"?><note> <to>Tove</to> <from>Jani</from> <heading>Reminder</heading> <body>Don't forget me ...
2019-06-14 12:56:49
2748
原创 input的onchange事件第二次不执行的解决办法
input的onchange事件第二次不执行，问题的根源在于没有发生任何改变，因为绑定的是onchange事件，如果事件的对象没有发生改变，那么事件是不会执行的。当第二次选择文件和第一次选择的文件相同的时候，input的value值是一样的，在js看来就是没有变化，里面的值跟之前还是一样。所以就出现了问题的出现。要解决这个问题，可以在onchange事件执行完之后，清空input的value值...
2019-06-14 11:58:37
3684
原创 input如何去掉输入框获取焦点时的外边框
input去掉输入框获取焦点时的外边框，只需要设置css样式为：input { background: none; border: none; /* 重点是 outline: none; */ outline: none;}效果：只要设置了css样式为：outline: none；就可以了。...
2019-06-14 10:06:53
5324
原创 使用better-scroll解决移动端的滚动问题
一、问题在移动端开发中，内容溢出后，会产生页面滚动，这时候无论是向上还是向下滑动的用户体验都很差，并且没有下拉、上拉的效果。这时候可以使用better-scroll来解决问题。二、如何使用better-scroll1、第一步肯定是先引入import BScroll from 'better-scroll'2、在外层容器添加ref属性<div class="menu...
2019-06-13 21:36:56
3280
原创 js如何让一个元素触发click点击事件
很简单，就一行代码。如下：<div id="div"></div>let div = document.getElementById("div");div.click();重点是：click()，调用该方法时，相应的DOM元素就会执行点击事件。...
2019-06-13 15:55:59
83149
5
原创 js通过ajax读取本地json文件
实例代码：function readJSON(file, callback) { let ajax = new XMLHttpRequest(); ajax.overrideMimeType("application/json"); ajax.open("GET", file, true); ajax.onreadystatechange = ...
2019-06-13 15:49:15
10161
1
原创 js使原元素获取焦点以及移除焦点的方法
一、获取焦点：document.getElementById('test').focus()二、移除焦点：document.getElementById('test').blur();
2019-06-11 10:26:43
22614
原创 js取消默认回车事件
在日常开发中，有时候回车按键的默认事件不是我们想要的，这时候我们可以通过阻止事件的默认行为来达到我们想要的效果。示例：$("#templateList").on('keydown', 'li', function(e) { if(e.keyCode == 13) { e.preventDefault() }})上面这个是为动态生成的li绑定了一个ke...
2019-06-10 14:13:33
2647
原创 如何解决IE11不兼容ES6的模板字符串
IE浏览器再词法分析阶段如果遇到ES6的模板字符串，就会抛出错误，导致程序无法正常运行。这时候需要将ES6的模板字符串改写为普通的单引号或者是双引号来代替，如果只有多行字符串，就需要在换行处使用加号进行连接，在第二行继续使用引号，如：'<li>000/li>'+'<li>111</li>'...
2019-06-10 11:43:42
11812
4
原创 在vue中使用fetch代替axios
fetch是ES6新出的，基于promise设计，没有进行封装，属于原生js，所以在vue中使用的时候也不需要进行import引入就可以直接使用。fetch的语法简单fetch请求返回的是promise对象，需要进行json转换，所以需要两次.then()用法示例：fetch("/api/test/") .then(res => { return res.json...
2019-06-09 16:43:42
3622
原创 vue路由中的linkActiveClass属性
用法示例：模板：<div class="nav"> <router-link class="nav-item" to="/nav1">nav1</router-link> <router-link class="nav-item" to="/nav2">nav2</router-link> <router...
2019-06-09 16:16:14
6776
原创 vue点击事件如何阻止事件冒泡以及取消默认事件
一、阻止事件冒泡方法：在vue中，一般情况下我们是这样绑定事件方法的：<div class="parent-wrapper" @click="clickWrapper">点这里</div>@click=“事件名”，这是常规方法，但是如果需要阻止事件冒泡的话，可以在click后面加上 .stop，完整写法是：@click="event.stop"，用上面的例子的...
2019-06-09 15:27:49
30322
3
原创 vue父组件如何调用子组件里面的方法
在vue里，父组件要调用子组件里边定义的方法，可以通过ref属性来获取到子组件的方法并执行，下面直接贴上子组件和父组件的代码吧！父组件代码：<template> <div class="parent"> <div class="parent-wrapper"> <button @click="parentMethod"&g...
2019-06-09 15:03:13
11522
2
原创 vscode编辑窗口的右侧缩略图设置显示隐藏
在不小心把把编辑器的右侧缩略图关闭之后，居然不知道怎么打开。一开始以为只在设置中将 “控制是否显示缩略图” 勾选中就可以了，但是勾选了还是不可以，后来仔细查看，原来还有一个选项的值也是至关重要的，它就是：限制缩略图的宽度，控制其最多显示的列数。这个值如果为0的话，即使勾选了前面那个选项都是看不到缩略图的。所以这个值可以设置为100左右就可以了，或者直接重置。如上图两个红框的值是直接决定了能...
2019-06-05 20:56:45
9765
原创 IE和谷歌浏览器隐藏滚动条的方法
IE：在需要隐藏滚动条的元素下添加此css属性-ms-overflow-style: none;谷歌：谷歌需要隐藏滚动条，直接在样式表中写上下面的代码即可::-webkit-scrollbar { width: 0px;}...
2019-06-05 11:14:51
1008
原创 vue实现五星评价方法
1、需求：根据用户评分来判断星星被点亮多少颗。保留小数，大于等于零点五，则多显示半颗星，否则只显示整数值。如：3.3分只显示3颗星；3.6分，则显示3颗完整的星星，加上一个被点亮了一半的信息。2、准备工作准备3张img，分别是全部被点亮的、只点亮一半的、未点亮的3、分析实现思路这里假设用户评分为4.7分，那么根据需求，就是显示4个完整的被点亮的星星，一个被点亮...
2019-06-02 12:04:40
2133
全国省市区（县）的名称、行政编码
2020-05-28
Three.js加载obj+mtl文件，（机房演示效果图）
2018-12-26
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人