Hell's Angel-CSDN博客

原创解决vue中给button按钮添加点击事件，事件不生效问题。

解决vue中给button按钮添加点击事件，事件不生效问题。话不多说，直接切入正题：我们在开发中是不是经常会遇到给button或者input添加click事件，但是methods中却不走这个事件的问题呢？我找了很多文档，跟button本身是没有关系的。话不多说看代码： <div class="parentbox"> <div class="childbox"> <button @click="addEvent">测试</but

2021-06-15 18:34:31 14191 4

原创图片懒加载原理以及实现

1、data-set先将img标签的src链接设为同一张图片（比如空白图片），然后给img标签设置自定义属性（比如 data-src）,然后将真正的图片地址存储在data-src中，当JS监听到该图片元素进入可视窗口时，将自定义属性中的地址存储到src属性中。达到懒加载的效果。<div id="box"> <ul> <li> <img data-src="./图片懒加载/1.jpg" alt=""> </li>

2020-10-05 22:29:02 214 2

原创小程序自定义组件实现父传子传值功能

小程序用了一段时间了，我对里面组件的用法也有了一定了解，今天就自己封装一个组件来简要演示一下组件通信问题（主要是父传子）根据小程序官方文档的描述，组件传值主要分为：WXML 数据绑定：用于父组件向子组件的指定属性设置数据事件：用于子组件向父组件传递数据，可以传递任意数据。父组件通过 this.selectComponent方法获取子组件实例对象，这样就可以直接访问组件的任意数据和方法。比如父子属性数据传递：list.wxml 父组件 <view class="tabs"&

2020-10-04 22:23:08 502

原创 Dom性能优化之——函数的防抖节流

我们为什么要用防抖节流？首先我们要知道防抖节流是用来做什么的。浏览器中的某些计算和处理要比其他的昂贵得多，当我们试图用dom操作html页面时，如果是进行很多频繁的Dom操作，这很可能导致浏览器挂起，甚至崩溃。在IE中使用 onresize事件时容易发生这种情况，我们有必要控制js的执行次数，这时候我们的节流和防抖就能发挥用处了。节流：让函数在一定时间内执行一次就象房屋上的水滴的下落过程应用场景：页面的onscroll事件，页面的onscroll事件是一个高频的事件，通过监听页面的scrol

2020-09-22 20:03:20 223

原创什么是虚拟Dom、diff算法

虚拟Dom（virtual dom）是一个js对象，用来模拟真实dom中的节点结构。为什么使用virtual dom？（dom的优化原理）虚拟dom采用object对象的写法，极大的提升了我们使用dom操作网页的性能。虚拟dom生成的4个过程：获取数据创建vdom通过render函数解析jsx，将其转换成 vdom结构将vdom转换为真实dom数据更改使用diff算法，调用patch函数对比两次dom不同根据key将patch对象渲染到页面中改变的结构上，而其他没有改变的地方是不做

2020-09-22 00:20:52 148

原创 dom的优化原理

Dom：文档对象模型。HTML 的文档document页面是一切的基础，没有它dom就无从谈起。当创建好一个页面并加载到浏览器时，DOM就悄然而生，它会把网页文档转换为一个文档对象，主要功能是处理网页内容。我们通过操作dom（创建节点、删除节点、获取节点、插入节点）来实现对浏览器页面的更新。对Dom的修改引起样式更迭：很多时候，我们对 DOM 的操作都不会局限于访问，而是为了修改它。当我们对 DOM 的修改会引发它外观（样式）上的改变时，就会触发回流或重绘。这个过程本质上还是因为我们对 DOM

2020-09-21 23:56:21 692

原创 vue常用修饰符有哪些（详细点）？

这篇是我很喜欢的，虽然是别的网站，但讲解详细且易懂，相信看完以后应该能满足很多人吧。https://segmentfault.com/a/1190000016786254

2020-09-18 10:57:56 780

原创 vue案例之——axios网络层封装

我们平常在开发项目中，会经常用到axios发送请求，axios基于 promise对原生的ajax进行了一定封装直接使用当然很方便。但是我们在写一个真实的上线项目时，直接用axios就会使项目变得不易维护。下面就用我自己的方式来对axios进行一个简单的封装。axios我已经安装（npm install axios -S）首先在项目中创建一个文件夹（这里叫network）：第一步创建 service.js文件，里面主要是配置的axios 拦截器最后导出一个对象。（我做的是移动端项目

2020-09-14 22:06:44 158

原创事件监听、事件模型

想了解更多参照以下链接：事件监听：https://blog.csdn.net/weixin_40122996/article/details/82533223事件模型：https://www.cnblogs.com/hngdlxy143/p/9068282.html

2020-09-14 00:25:42 105

原创面试题——js之垃圾回收、内存泄漏

Javascript具有周期性的自动垃圾收集机制，执行环境会负责管理代码运行过程中使用的内存。常用的垃圾收集方式是标记清除(mark-and-sweep)。当变量进入环境，就将这个变量标记为“进入环境”。离开环境就标记“离开环境”。工作流程：垃圾收集器在运行时给内存中的所有变量加上标记。去掉环境中的变量和被环境中的变量引用的变量标记。后来再加上的变量会被视为准备删除的变量。销毁带标记的值并回收他们所占用的空间。引用计数：不太常用的垃圾收集策略（reference counting）。

2020-09-13 22:08:39 218

原创数组的扁平化

参考地址 https://www.cnblogs.com/wind-lanyan/p/9044130.html

2020-09-10 23:54:07 85

原创数组去重的方法

一、利用es6 Set 方法去重：function unique (arr) { return Array.from(new Set(arr))}var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];console.log(unique(arr)) //[1, "true", true, 15

2020-09-09 20:27:36 134

原创 es6和es5相比新增哪些数组方法？

先看一下es5中的array方法把valuedesciptionevery()检测数值元素的每个元素是否都符合条件。some()检测数组元素中是否有元素符合指定条件filter()检测数值元素，并返回符合条件所有元素的数组。foreach()数组每个元素都执行一次回调函数。map()通过指定函数处理数组的每个元素，并返回处理后的数组。indexOf搜索数组中的元素，并返回它所在的位置。lastIndexOf搜索数组中的元素，并返回它最后

2020-09-08 23:37:20 155

原创异步操作——async、await的用法

async：用于申明一个异步的function。await async和await的简称用于等待一个异步函数的完成具体用法：async：在一个函数前面加上一个单词 async，这就把一个普通函数变成了异步函数。如：//基本用法的async函数let asyncFun = async function(){ return 1}console.log(asyncFun())//会返回一个promise对象//使用场景//摇色子方法function dice(){ .

2020-09-06 20:54:40 554

原创 es6中的generator

说到 generator，其实就不得不说 iterator，iterator是什么？跟generator有什么关系？迭代器（iterator）：是一种特殊对象，它具有一些专门为迭代过程设计的专有接口，所有的迭代器对象都有一个next()方法，每次调用都返回一个结果对象。结果对象有两个属性：一个是value，表示下一个将要返回的值；另一个是done，它是一个布尔类型的值，当没有更多可返回数据时返回true。迭代器还会保存一个内部指针，用来指向当前集合中值的位置，每调用一次next()方法，都会返回下.

2020-09-06 20:49:10 161

原创 promise是什么？

promise: 是一个异步操作的对象，有三种状态：Pending(进行中)、Resolved(已完成)和Rejected(已失败)。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。状态的改变有两种情况：Pending->Resolved，Pending->Rejected。可以看到Promise是一个构造函数，他本身有 all, reject, resolve 方法，在他的原型上有 then, catch方法．Promise构造函数接受一个函数作为参数，

2020-09-06 16:15:58 241

原创 var let const的区别

首先想知道三者的区别，需要要对ECMAscript有一定了解。ECMAscript5.0中有全局作用域和函数作用域，却没有块级作用域，于是es6中就引进了 let和const弥补了es5的不足。let:块级作用域暂时性死区变量不允许多次声明不存在变量提升/*for循环，for循环里面是父级作用域，循环体内是另一个*/for( let i = 0 ; i < 3 ; i++ ){ let i = 'abc'　　　　//用var替代let会报错提示已经定义，若没有任何关键字

2020-09-06 15:27:03 100

原创 vuex是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。与react中的redux类似，可以对组件的中的状态进行一个统一集中的管理。应用场景：登录注册、购物车、组件中复杂的逻辑。核心概念：state（唯一的状态管理对象）getters（计算属性，对state中的属性做进一步的处理）mutations（读写state）actions（触发mutations）modules（对以上属性的封装）state: { userinfo: [], token: '',

2020-09-03 23:56:51 103

原创 js继承，实现继承的几种方式

继承是javascript中一个重要的概念，实现继承有这几种常用的方式。首先定义一个父类：// 定义一个动物类function Animal (name) { // 属性 this.name = name || 'Animal'; // 实例方法 this.sleep = function(){ console.log(this.name + '正在睡觉！'); }}// 原型方法Animal.prototype.eat = function(food) { co

2020-09-02 23:32:46 198

原创 this， call,apply,bind三者的区别

参考 call apply bind的区别相同点：1、都是用来改变函数的this对象的指向的。2、第一个参数都是this要指向的对象。3、都可以利用后续参数传参。 var xw = { name : "小王", gender : "男", age : 24, say : function() {

2020-09-01 21:18:32 200

原创判断javascript数据类型

javascript中有几种判断数据类型的基本方法：1、 typeof：非常方便，应对一个变量是字符串、数值、布尔值或是undefined完全没问题！但是当遇到特殊值 null 的时候，无论什么都返回 object对象。并且当typeof检测函数时，返回结果是function2、instanceof（基于原型链）：可以检测引用数据类型。obj instanceof Object，左边操作数obj为对象（如果不小心写成基本类型比如数字啥的，就会返回false），右边操作数Objec

2020-08-31 20:41:08 123

原创 js有哪些数据类型？如何判断？

在ECMAscript中数据类型大致分为两大类：分别是基本数据类型、引用数据类型。基本数据类型指的是简单的数据段，引用数据类型指的是有多个值构成的对象。5种常见的基本数据类型：NumberSringBooleannullundefinedeg: let a=10 let b=a console.log(b) // b=10 基本数据类型是按值访问的，我们可以直接操作保存在变量中的值。变量的交换相当于在一个新的作用域开创一.

2020-08-31 20:39:16 273

原创 H5和css的新特性

H5新增的特性：1.、语义化标签：header、footer、section、nav、aside、article2、增强型表单：input 的多个 type3、新增表单元素：datalist、keygen、output4、新增表单属性：placehoder、required、min 和 max5、音频视频：audio、video ，6、 canvas7、地理定位8、拖拽9、本地存储：localStorage - 没有时间限制的数据存储；sessionStorage - 针对一个 se

2020-08-30 20:38:00 178

原创 css动画属性

在css动画中，我们最常用的就是 transition 属性。当然除了transition 还有anmation 、transform等。transition ：允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。transition ：transition-property || transition-duration || transition-timing-function || transit

2020-08-30 20:27:40 978

空空如也

空空如也