偲楠爱前端-CSDN博客

转载 ES6模块暴露与模块引入

1.ES6一共有三种模块暴露方法 (1)统一暴露模块 module1function fun1() { console.log('fun1() module1')}function fun2() { console.log('fun2() module1')}// 统一暴露export {foo,bar}(2)多行暴露模块 module2//多行暴露export function foo() { console,console.log('..

2021-11-24 13:48:20 775

原创简述MVC和MVVM区别

MVC MVC全名是(Model View Controller)，是模型(model)-视图(view)-控制器(controller)的缩写，一种软件设计典范模型(model)：是应用程序中用于处理应用程序数据逻辑的部分，通常模型对象负责在数据库中存取数据视图(view)：是应用程序中处理数据显示的部分，通常视图是依据模型数据创建的控制器(controller)：是应用程序中处理用户交互的部分。通常控制器负责从视图读取数据，控制用户输入，并且向模型发送数据。MVC的思想...

2021-11-15 19:05:19 1492

原创 Vue中key的作用以及内部实现原理

我们一般在v-for遍历数据的时候会使用到v-bind:key='xxx'那么可以具体的作用是什么，又有什么特殊的作用呢。作用： key是虚拟DOM对象的标识也就是说当数据发生变化时会生成新的虚拟DOM和旧的DOM去对比而对比要用到就是key标识通过key来具体比较哪一个数据规则： (1) 旧虚拟dom中找到了与新虚拟dom相同的key 若虚拟dom中内容没变直接使用之前的真实dom 若...

2021-11-12 18:57:17 968

原创 Vue基础之键盘事件总结

1.Vue中常用的按键别名字回车=>enter 删除=>delete(捕获删除和退格) 退出=>esc 空格=>space 换行=>tab (必须要配合keydown使用) 上=>up 下=>down 左=...

2021-11-10 18:38:19 969

原创 Vue事件修饰符的总结

分为六点： 1.prevent 阻止默认行为(常用) 2.stop 阻止事件冒泡(常用) 3.once 事件值触发一次(常用) 4.capture 使用事件的捕获模式 5.self 只有event.target是当前操作的元素是才触发事件 6.passive 事件的默认行为立即执行无需等待事件回调执行完毕我们可以分别看一下具体是怎么使用...

2021-11-09 19:00:34 788

原创百度官网小熊奔跑案例

演示效果:难点：熊从页面左方跑到中间和背景山移动的距离熊在一直跑步过程中的步伐的持续<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="...

2021-11-08 18:40:34 926

原创 let经典面试题

1 varvar arr=[];for(var i=0;i<2;i++){ arr[i]=function(){ console.log(i); }}arr[0]();// 2 arr[1]();// 2console.log(i);// 2此题的关键点在于变量i是全局的，函数执行时输出的时全局作用域下的i值；2 letlet arr=[];for(let i=0;i<2;i++){ arr[i]=function(){ console.log(i.

2021-11-05 17:33:17 402

原创 javaScript中函数内this的指向问题简单总结

调用方式 this指向普通函数调用 window 定时器函数 window 立即执行函数 window 构造函数调用实例对象对象方法调用该方法所属对象事件绑定方法绑定事件对象下面是几种函数方式： //1 普通函数 function fn () { console.log('11'); } fn(); fn.call() .

2021-11-04 18:25:47 239

原创 setTimeout和setInterval定时器用法和区别

语法规范：1window.setTimeout(调用函数,延时时间)2window.setInterval(调用函数,延时时间)相同点：1这个window在调用的时候可以省略2这个延时时间单位是毫秒但是可以省略如果默认是03这个调用函数可以直接写函数还可以写函数名或者'函数名（）'4页面中可能有多个计时器我们经常会给定时器加标识符也就是名字不同点：setTimeout只会调用一次setInterval重复调用根据延长时间<!...

2021-11-03 18:13:42 245

原创分支控制语句switch和if else if 区别

在一般情况下两者都可以互换 switch..case...一般情况下处理的是值比较确定的情况,而if..else...则可以判断范围,会更加灵活 switch一般会根据条件直接跳转然后执行代码,效率高.而if..else..要遍历且判断的更多所以效率慢点单分支较多时 switch语句会更加明确，效率高。当分支较少时,if...else..的效率要比switch高用法:switch (表达式){ case 值1 : 语句1 break; case 值2 : 语句2 break;.

2021-11-01 17:56:14 245

原创 each和forEach的区别，和使用方法

*jQuery 中 each 方法和 forEach 几乎一致*由于forEach 是ES5中的所以低版本不支持例如注意：但是each是遍历jQuery中的元素，且都是伪数组，不可以直接用forEach遍历因为 1 伪数组是对象 2 对象的原型链中没有 forEach 3 对象的原型链是 Object.prototye所以使用each方法遍历那么如果想用forEach来遍历JQuer...

2021-10-28 19:02:55 269

原创用jq实现复复选框全选和个别选项

难点：如何在点击全选框之后每个选择框会被选中如何在点击每个单机框之后全选框会被选中<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content...

2021-10-27 18:59:47 366

原创用js实现模态框效果

难点：隐藏和现实各个盒子为具体盒子绑定具体事件在鼠标拖动时登录框对浏览器的距离和鼠标离开时的距离最终效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpo...

2021-10-26 18:30:50 1053

原创学习笔记用做js放大镜效果

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、pandas是什么？二、使用步骤 1.引入库 2.读入数据总结前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考一、pandas是什么？示例：pandas 是基于NumPy 的一种工具，该工具是为了解决...

2021-10-25 17:31:37 108

原创 js实现倒计时页面

这是一个简单的小案例，本案例用到的知识点有:时间内置对象 js定时器这个方法对时间进行补0操作效果：代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" c...

2021-10-19 17:46:23 217

原创学习js轮播图效果

轮播图在前端开发中我认为是一个比较重要的点，因为包含了很多原生js知识点，以下是我学习制作轮播图的过程难点：如何让底下圆圈和图片所对应自动动态生成如何让底下圆圈和图片所对应的起来上一页和下一页所在盒子所移动的距离图片切换时的渐出动画效果节流阀的概念效果:代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <me..

2021-10-16 18:48:07 129

原创用js原生代码和JQuery代码写Table切换

在最近的学习中学习了两种的写table栏的方法js的方法虽然复杂但是对于初学者来说可以更好地开拓思维，方便后面其他知识的理解我认为难点有以下几点点击模块同时其他模块颜色也发生变化点击模块时底下的内容也会根据所对应的模块来进行对应的变化 1 js实现方法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta ht...

2021-10-15 18:34:28 168

ChenHN98的博客