- 博客(40)
- 收藏
- 关注
原创 解决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
14503
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
247
2
原创 小程序自定义组件实现父传子传值功能
小程序用了一段时间了,我对里面组件的用法也有了一定了解,今天就自己封装一个组件来简要演示一下组件通信问题(主要是父传子)根据小程序官方文档的描述,组件传值主要分为:WXML 数据绑定:用于父组件向子组件的指定属性设置数据事件:用于子组件向父组件传递数据,可以传递任意数据。父组件通过 this.selectComponent方法获取子组件实例对象,这样就可以直接访问组件的任意数据和方法。比如 父子属性数据传递:list.wxml 父组件 <view class="tabs"&
2020-10-04 22:23:08
531
原创 Dom性能优化之——函数的防抖节流
我们为什么要用防抖节流?首先我们要知道防抖节流是用来做什么的。浏览器中的某些计算和处理要比其他的昂贵得多,当我们试图用dom操作html页面时,如果是进行很多频繁的Dom操作,这很可能导致浏览器挂起,甚至崩溃。在IE中使用 onresize事件时容易发生这种情况,我们有必要控制js的执行次数,这时候我们的节流和防抖就能发挥用处了。节流: 让函数在一定时间内执行一次 就象房屋上的水滴的下落过程应用场景:页面的onscroll事件,页面的onscroll事件是一个高频的事件,通过监听页面的scrol
2020-09-22 20:03:20
260
原创 什么是虚拟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
176
原创 dom的优化原理
Dom:文档对象模型 。HTML 的文档document页面是一切的基础,没有它dom就无从谈起。当创建好一个页面并加载到浏览器时,DOM就悄然而生,它会把网页文档转换为一个文档对象,主要功能是处理网页内容。我们通过操作dom(创建节点、删除节点、获取节点、插入节点)来实现对浏览器页面的更新。对Dom的修改引起样式更迭:很多时候,我们对 DOM 的操作都不会局限于访问,而是为了修改它。当我们对 DOM 的修改会引发它外观(样式)上的改变时,就会触发回流或重绘。这个过程本质上还是因为我们对 DOM
2020-09-21 23:56:21
702
原创 vue常用修饰符有哪些(详细点)?
这篇是我很喜欢的,虽然是别的网站,但讲解详细且易懂 ,相信看完以后应该能满足很多人吧。https://segmentfault.com/a/1190000016786254
2020-09-18 10:57:56
812
原创 vue案例之——axios网络层封装
我们平常在开发项目中,会经常用到axios发送请求,axios基于 promise对原生的ajax进行了一定封装 直接使用当然很方便。但是我们在写一个真实的上线项目时,直接用axios就会使项目变得不易维护。下面就用我自己的方式来对axios进行一个简单的封装。axios我已经安装 (npm install axios -S)首先在项目中创建一个文件夹 (这里叫network):第一步 创建 service.js文件,里面主要是配置的axios 拦截器 最后导出一个对象。(我做的是移动端项目
2020-09-14 22:06:44
186
原创 事件监听、事件模型
想了解更多 参照以下链接:事件监听:https://blog.csdn.net/weixin_40122996/article/details/82533223事件模型:https://www.cnblogs.com/hngdlxy143/p/9068282.html
2020-09-14 00:25:42
132
原创 面试题——js之垃圾回收、 内存泄漏
Javascript具有周期性的自动垃圾收集机制,执行环境会负责管理代码运行过程中使用的内存。常用的垃圾收集方式是 标记清除(mark-and-sweep)。当变量进入环境,就将这个变量标记为“进入环境”。离开环境就标记“离开环境”。工作流程:垃圾收集器在运行时给内存中的所有变量加上标记。去掉环境中的变量和被环境中的变量引用的变量标记。后来再加上的变量会被视为准备删除的变量。销毁带标记的值并回收他们所占用的空间。引用计数:不太常用的垃圾收集策略(reference counting)。
2020-09-13 22:08:39
245
原创 数组去重的方法
一、利用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
169
原创 es6和es5相比新增哪些数组方法?
先看一下es5中的array方法把valuedesciptionevery()检测数值元素的每个元素是否都符合条件。some()检测数组元素中是否有元素符合指定条件filter()检测数值元素,并返回符合条件所有元素的数组。foreach()数组每个元素都执行一次回调函数。map()通过指定函数处理数组的每个元素,并返回处理后的数组。indexOf搜索数组中的元素,并返回它所在的位置。lastIndexOf搜索数组中的元素,并返回它最后
2020-09-08 23:37:20
183
原创 异步操作——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
601
原创 es6中的generator
说到 generator,其实就不得不说 iterator,iterator是什么?跟generator有什么关系?迭代器 (iterator):是一种特殊对象,它具有一些专门为迭代过程设计的专有接口,所有的迭代器对象都有一个next()方法,每次调用都返回一个结果对象。结果对象有两个属性:一个是value,表示下一个将要返回的值;另一个是done,它是一个布尔类型的值,当没有更多可返回数据时返回true。迭代器还会保存一个内部指针,用来指向当前集合中值的位置,每调用一次next()方法,都会返回下.
2020-09-06 20:49:10
181
原创 promise是什么?
promise: 是一个异步操作的对象 ,有三种状态:Pending(进行中)、Resolved(已完成)和Rejected(已失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。状态的改变有两种情况:Pending->Resolved,Pending->Rejected。可以看到Promise是一个构造函数,他本身有 all, reject, resolve 方法,在他的原型上有 then, catch方法.Promise构造函数接受一个函数作为参数,
2020-09-06 16:15:58
273
原创 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
114
原创 vuex是什么?
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。与react中的redux类似,可以对组件的中的状态进行一个统一集中的管理。应用场景:登录注册、购物车、组件中复杂的逻辑。核心概念:state(唯一的状态管理对象)getters(计算属性,对state中的属性做进一步的处理)mutations(读写state)actions(触发mutations)modules(对以上属性的封装)state: { userinfo: [], token: '',
2020-09-03 23:56:51
134
原创 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
212
原创 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
231
原创 判断javascript数据类型
javascript中有几种判断数据类型的基本方法:1、 typeof: 非常方便,应对一个变量是 字符串、数值、布尔值或是undefined完全没问题!但是当遇到 特殊值 null 的时候,无论什么都返回 object对象。并且 当typeof检测函数时 ,返回结果是function2、instanceof(基于原型链):可以检测引用数据类型。obj instanceof Object,左边操作数obj为对象(如果不小心写成基本类型 比如数字啥的,就会返回false),右边操作数Objec
2020-08-31 20:41:08
142
原创 js有哪些数据类型 ?如何判断?
在ECMAscript中数据类型大致分为两大类:分别是 基本数据类型、引用数据类型。基本数据类型指的是简单的数据段,引用数据类型指的是有多个值构成的对象。5种常见的基本数据类型:NumberSringBooleannullundefinedeg: let a=10 let b=a console.log(b) // b=10 基本数据类型是按值访问的,我们可以直接操作保存在变量中的值。变量的交换相当于在一个新的作用域开创一.
2020-08-31 20:39:16
297
原创 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
193
原创 css动画属性
在css动画中,我们最常用的就是 transition 属性。当然除了transition 还有anmation 、transform等。transition :允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。transition :transition-property || transition-duration || transition-timing-function || transit
2020-08-30 20:27:40
999
原创 什么是BFC,如何清除浮动?
BFC(Block Formatting Context)块级格式化上下文,是一个独立的布局环境。有自己独立的渲染区域。且在一个BFC中,块盒与行盒(行盒由一行中所有的内联元素所组成)都会垂直的沿着其父元素的边框排列。BFC布局的特点就是 将自己与外部隔离开。内部的布局不会受外部影响,外面的也不会影响内部的布局。BFC的应用场景有哪些?当相邻div发生marign重叠时,BFC可以阻止这种情况。可以把相邻的div放到不同的BFC中、BFC不会重叠浮动元素如何创建一个BFC?overflow
2020-08-28 20:55:19
376
原创 元素水平垂直居中的几种方式
<style> .wp { border: 1px solid orange; width: 300px; height: 300px; } .box { background: green; width: 100px; height: 100px; } </style> <body> <div...
2020-08-28 08:55:03
158
原创 css常用布局 两栏、三栏 布局
我们在做pc端页面的时候、经常会用到这种布局、即两栏、 三栏布局。如图所示:这两种经典布局相信很多人都用过把。现在分享一下我的布局方案吧(每个人布局风格不同 自然想法就不一样了。)两栏布局:1、左(右)侧固定宽度:中间部分使用margin-left或margin- right(默认为auto)使之铺满右侧部分。<div class="parent"> <div class="left">111</div> <
2020-08-28 08:12:28
249
原创 css怪异盒和标准盒模型
1、css怪异盒和标准盒模型w3c中定义的是标准盒模型,而IE中的是怪异盒模型标准盒模型 即 width=content width+padding+margin+border怪异盒模型 width=content width(padding+border)+margin图片元素的垂直对齐方式: 标准模式下: vertical-align的默认值是:baseline 怪异模式下:vertical-align的默认值则是bottomTable元素中的字体:
2020-08-27 14:49:16
152
原创 css flex 弹性盒布局
css flex 弹性盒布局:1、css弹性盒是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。弹性盒由弹性容器(flex-container)和弹性子元素(flex-item)构成。 弹性盒通过给父元素设置 display:flex 使之成为弹性盒容器。弹性盒有以下几个属性:设置在父元素上的属性:flex-direction(定义项目的排列方式
2020-08-27 13:59:31
106
原创 git常用命令总结
一、git是什么?git是一个开源式的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目。git常用命令方法总结:Workspace:工作区Index/Stage: 暂存区Respository: 仓库区(或本地仓库)Remote:远程仓库git基本命令git config --list 存储密码凭证 设置别名 获取config信息以及配置git init 本地初始化一个仓库git add filename 把文件添加至缓存区git add . 将所有文件
2020-08-24 17:11:00
134
原创 前端使用vue实现简单登录注册功能
最近学习过程中 常碰到让用户登录注册这种 今天就用vue实现简单的登录注册功能:注册时要用到localstorage来存储信息 登录时将表单信息和localstorage中的对比判断代码如下: <!-- 登陆页面 --> <van-nav-bar title="密码登陆" style="background:#2f8fea;color:#fff"> <template #left> <van-icon name="ar
2020-07-20 17:17:49
15143
6
原创 vue(仿京东)实现搜素功能
应用场景:现在很多app都有搜索功能 今天我们就用vue实现简单搜索功能:代码如下: <!-- 头部搜索框 --> <div class="header"> <van-search v-model.trim="kw" show-action placeholder="电池" shape="round" autofocus @input="handleInp
2020-07-17 12:12:19
855
原创 vuex实现购物车功能
vuex实现购物车功能:一:今天用vue中的vuex实现简单的购物车功能:首先项目中必须要有vuex(我的项目中已安装)话不多说直接上代码:state:{ goods: [],} mutations: { addCarts(state, goods) { let rel = true; state.goods.map(item => { if (item.goods.id == goods.id) { i
2020-07-15 23:51:06
798
原创 vue中组件切换时实现动画效果
vue用动画实现切换功能:Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。包括以下工具:在 CSS 过渡和动画中自动应用 class可以配合使用第三方 CSS 动画库,如 Animate.css在过渡钩子函数中使用 JavaScript 直接操作 DOM可以配合使用第三方 JavaScript 动画库,如 Velocity.jsVue 提供了 transition 的封装组件过渡的类名在进入/离开的过渡中。会有6个class的换。v-enter:定
2020-07-14 17:26:55
2665
原创 商品卡片布局方式
css实现商品卡片布局方式:在移动端电商页面中,会经常用到商品卡片这种布局现这种布局方式,像这样:下面就用css实现这种样式:html代码: <div class="item-card"> <img :src="mainPic" @click="gotopic(itemLink)" /> <div class="item-right"> <span>{{title}}</span>
2020-07-03 16:31:21
1586
原创 axios在项目中的基本用法
1.基本用法:安装axios cnpm install axios --save在 main.js中引入axios:import Vue from 'vue';import axios from 'axios';Vue.prototype.$axios=axios;2. 在组件中使用axios: this.$axios .get(url, { params: {} }) .then(res => { console.log(res);
2020-07-02 17:24:46
506
原创 vue实现todolist功能(初学者适用)
todolist案例实现:完成 todolist首先要清楚 基本的业务逻辑 需要完成哪些功能:添加功能(添加后可存储在本地 即刷新后页面中仍有数据)删除功能(删除后可以存储在页面)修改功能(同上)下面直接上代码: <div class="header"> <!-- 头部 --> <span class="logo">ToDoList</span> <!-- keydown 键盘事件 按下enter直接添加
2020-06-30 11:48:56
4617
转载 vue实现回到顶部
监听滚动条事件 // created中调用调用this.listenerFunction方法listenerFunction(e) { document.addEventListener("scroll", this.handleScroll, true); }, beforeDestroy() { document.removeEventListener("scroll", this.listenerFunction); }, ha
2020-06-25 18:24:59
436
原创 对面向对象和面向过程的理解
javascript中面向对象和面向过程的理解:面向对象就是一种以对象为中心的编程思想 特性是多态继承 抽象封装 *面向对象是把构成问题事务分解成各个对象,建立对象的目的不是为了完成一个步骤,而是为了描叙某个事物在整个解决问题的步骤中的行为。*面向过程 就是一种以事件为中心的编程思想 这些都是以正在发生的事情作为目标进行编程面向过程 就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候一个一个依次调用就可以了。...
2020-06-23 17:20:17
319
原创 vue项目修改默认端口
vue3.0 项目端口号修改1.先在项目根目录下创建 vue.config.js文件在文件中写入module.exports = { devServer: { port: 3000 }, lintOnSave: false // 取消 eslint 验证};
2020-06-23 16:35:51
697
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人