
前端
文章平均质量分 62
I have a lemon
这个作者很懒,什么都没留下…
展开
-
调试JS代码
在vs code中如何进行代码调试?原创 2024-08-28 11:08:20 · 620 阅读 · 0 评论 -
elementUI在手机端使用遇到的问题总结
之前的博客有写过用vue2+elementUI封装手机端选择器picker组件,支持单选、多选、远程搜索多选,最终真机调试的时候发现有很多细节样式需要调整。此篇博客记录下我调试过程中遇到的问题和解决方法。原创 2024-07-18 11:16:25 · 1584 阅读 · 0 评论 -
用vue2+elementUI封装手机端选择器picker组件,支持单选、多选、远程搜索多选
用vue2+elementUI封装手机端选择器picker组件,支持单选、多选、远程搜索多选原创 2024-07-04 17:45:03 · 813 阅读 · 0 评论 -
null 和 undefined 的区别
null 和 undefined 的区别1、Nullnull 表示一个"无"的对象,转为数值为 0;作为函数的参数,表示该函数的参数不是对象;作为对象原型链的终点;Number(null) 为 0;1 + null 为 1;JSON.stringify(null) 为 'null' (字符串);JSON.parse(null) 为 null (null 基本类型)2、Undefined变量被声明了,但是没有赋值,就等于 undefined;调用函数时,应该提供的参数没有提供转载 2021-10-05 16:25:50 · 270 阅读 · 0 评论 -
vue学习Day08
1.之前的路由规则,当匹配到一个路由的时候,只能在页面的容器中,放置唯一的一个组件那怎么解决这个问题?命名视图假设有header,sidebar, content,footer四个组件const router=new VueRouter({routes:[{path:’/’,components:{//组件名称:组件对象’top’:header,‘left’:sidebar,‘righter’:content,‘bottom’:footer}}]}..原创 2021-09-09 11:08:50 · 167 阅读 · 0 评论 -
vue学习Day07
vue学习Day71.使用ref属性操作在要引用的标签上写上ref=“xxx”this.$refs.xxx2.使用ref获取页面上的组件在要引用的组件上写上ref=“xxx”在别的组件中可以用this.$refs.mycom.msg=’123’来修改引用组件中的data数据的值;也可以用this.$refs.mycom.show()来调用引用组件中的方法2.data和props的区别Data :在组件中,定义成一个function并返回一个对象Props:在组件中,定原创 2021-08-18 16:46:14 · 205 阅读 · 1 评论 -
vue学习Day6
vue学习Day61.父组件向子组件传数据父组件如果想要给子组件传递数据,则需要使用属性绑定的形式。这样,子组件身上的自定义数据,就是你要传递给子组件的数据<com1 :msg="parentMsg"></com1>components:{//定义私有组件'com1':{//在vue中,默认,子组件无法直接获取父组件中的数据template:`<div><h3>这是子组件中的标题</h3><h4>这.原创 2021-08-16 14:55:56 · 129 阅读 · 0 评论 -
vue学习Day05
1.created()表示data和methods方法都已经可用了,就可以去调方法Mounted()表示 内存中渲染好的dom树已经挂载到了真实的页面中。在网页中,有一些第三方的插件需要初始化;使用jquery封装出的框架分为两部分:UI结构 JS代码因此,一些第三方的插件,如果要结合vue来使用,而且这个插件需要手动初始化js逻辑,必须放到mounted中,否则,可能无法出现效果2.创建全局组件的方式1)方法一//创建Const com1=Vue.extend({ t.原创 2021-08-12 11:33:14 · 122 阅读 · 0 评论 -
《深入react技术栈》看书总结01
最近觉得react的知识之前跟着视频学了,有些知识点容易忘,有些又理解的不透彻,就发现了这本书,大致浏览了一下,比我之前看的学习视频讲的更透彻。好记性不如烂笔头,我大致罗列一些我在书上划的重点。第一章相关知识点:1.react专注视图层。react不是完整的MVC/MVVM框架,它专注于提供清晰、简洁的view(视图)层解决方案。而又与模板引擎不同,react不仅专注于解决view层的问题,又是包括view和controller的库。2.虚拟元素的构建和更新都是在内存中完成的,并不会真正渲染到D原创 2021-08-11 10:13:03 · 248 阅读 · 1 评论 -
vue学习Day04
vue学习Day41.数据库版的案例就是用axios向服务器发送请求可以初始化一些默认配置项,比如请求的baseURL地址方法一 :axios.defaults.baseURL=“http://xxx.xxx.xxx.xxx:3000”;Vue.prototype.$http=axios方法二:Vue.prototype.$http=axios.create({baseURL:“http://xxx.xxx.xxx.xxx:3000”})2.vue动画Vue.原创 2021-08-11 09:12:29 · 169 阅读 · 1 评论 -
vue学习Day01-Day03
当当当,最近在边学vue边实习,公司用到的是vue框架,而我之前先学的是react框架,所以我最近要学习vue框架,有些东西是相通的,难度还可以吧~~vue 学习 Day1:1.使用插值表达式会出现闪烁问题,使用“v-text”指令却不会?因为js还没加载完成的话,插值表达式被当成字符串渲染了,等js加载完成再解析成数据。可通过v-cloak解决闪烁问题 V-cloak可以和css规则:[v-cloak]{display:none}一起用,隐藏未编译的插值表达式直到实例准备完毕.原创 2021-08-06 16:05:32 · 231 阅读 · 2 评论 -
JS控制报错:Uncaught SyntaxError: Invalid shorthand property initializer
JS控制报错:Uncaught SyntaxError: Invalid shorthand property initializer 的解决方法:有时候粗心就会在定义对象时,把:写成=,然后就报了这个错误,只能说细心一些喽!低级错误不要再犯啦!!!原创 2021-04-15 14:42:10 · 258 阅读 · 0 评论 -
前端小练习——一些遗忘的知识点
很多时候有些细节老不去看就会忘记,以后我要把一些做题遇到的容易遗忘的细碎知识点整理到博客上。css属性overflow属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制。正确答案: true参数是scroll时候,必会出现滚动条。参数是auto时候,子元素内容大于父元素时出现滚动条。参数是visible时候,溢出的内容出现在父元素之外。参数是hidden时候,溢出隐藏。下面有关html5标签说法错误的有?<audio.原创 2021-04-13 17:48:55 · 241 阅读 · 0 评论 -
防抖和节流
看到别人写的博客里有总结一张非常详细的思维导图,转载一波~转载 2021-04-12 18:18:56 · 110 阅读 · 0 评论 -
this指向,防抖函数中的fn.apply(this,arguments)作用
1.介绍:首先我们要了解apply()的基本知识,apply()和call()都是每个函数或对象都拥有的非继承的方法。2.作用:都是用来改变this的指向的3.下面介绍带参数和不带参数的常见的应用首先想很好理解和应用apply,其根本是对于this的理解。this的三种指向:1.指向this所在函数的直接调用者,2.new的时候,指向new出来的对象,3.事件中指向当前的出发对象总结:this会指向某个对象为什么要用this?因为this的指向不是单一的,可以改变,可以代替将来的调用者,对于一个转载 2021-04-12 16:05:29 · 2795 阅读 · 5 评论 -
React11——React路由
什么是spa?单页Web应用(single page web application,SPA)。 整个应用只有一个完整的页面。 点击页面中的链接不会刷新页面,只会做页面的局部更新。 数据都需要通过ajax请求获取, 并在前端异步展现。路由?什么是路由? 一个路由就是一个映射关系(key:value) key为路径, value可能是function或component 路由分类 后端路由: 理解: value是function, 用来处理客户端提交的请求。 注册路由原创 2021-04-07 15:34:46 · 211 阅读 · 1 评论 -
vue生命周期
网上看到的描述vue2.x的生命周期图示的详细解释,如下图所示:主要的生命周期函数分类: 创建期间的生命周期函数: beforeCreate:实例刚在内存中被创建出来,此时,还没有初始化好数据和方法属性 创建:实例已经在内存中创建OK,此时数据和方法已经创建OK,则还没有开始编译模板 beforeMount:此时已经完成了模板的编译,但是还没有挂载到页面中 安装:此时,已经将编译好的模板,挂载到了页面指定的容器中显示 首先获取到data中的数据=>把数据结合el指转载 2021-04-07 14:56:19 · 96 阅读 · 0 评论 -
React10——消息订阅与fetch
消息订阅-发布机制工具库: PubSubJS 下载: npm install pubsub-js --save 使用: import PubSub from 'pubsub-js' //引入 PubSub.subscribe('delete', function(data){ }); //订阅 PubSub.publish('delete', data) //发布消息 Fetch文档https://github.github.io/fet.原创 2021-03-26 21:15:03 · 115 阅读 · 0 评论 -
axios
1. 第 1 章:axios 的理解和使用1.1. axios 是什么? 前端最流行的 ajax 请求库 react/vue 官方都推荐使用 axios 发 ajax 请求 文档: https://github.com/axios/axios 1.2. axios 特点 基于 xhr + promise 的异步 ajax 请求库 浏览器端/node 端都可以使用 支持请求/响应拦截器 支持请求取消 请求/响应数据转换原创 2021-03-25 17:34:14 · 537 阅读 · 0 评论 -
JS引擎的执行机制
首先,请记住两点:JS 是单线程语言 JS 的Event Loop 是JS的执行机制.要想深入理解JS的执行,就得深入了解JS 的 Event LoopJS 为什么是单线程? 为什么需要异步? 单线程又是如何实现异步的呢?1. JS 为什么是单线程JS 最初被设计用在浏览器中,那么想象一下,如果浏览器中的 JS 是多线程的场景描述:假设现在有两个线程,process1和process2,由于是多线程的 JS ,所以它们对同一个DOM同时进行操作 process1删除了...转载 2021-03-24 20:33:54 · 193 阅读 · 0 评论 -
async/await
async 函数 函数的返回值为 promise 对象 promise 对象的结果由 async 函数执行的返回值决定 await 表达式 await 右侧的表达式一般为 promise 对象, 但也可以是其它的值 如果表达式是 promise 对象, await 返回的是 promise 成功的值 如果表达式是其它值, 直接将此值作为 await 的返回值 注意 await 必须写在 async 函数中, 但 async 函数中可以没有 awai..原创 2021-03-24 20:04:11 · 99 阅读 · 0 评论 -
Promise
1.1. Promise 是什么?1.1.1. 理解1. 抽象表达: 1) Promise 是一门新的技术(ES6 规范) 2) Promise 是 JS 中进行异步编程的新解决方案 备注:旧方案是单纯使用回调函数 2. 具体表达: 1) 从语法上来说: Promise 是一个构造函数 2) 从功能上来说: promise 对象用来封装一个异步操作并可以获取其成功/失败的结果值 1.1.2. promise 的状态改变 pendin...原创 2021-03-24 20:01:50 · 114 阅读 · 0 评论 -
React09——使用脚手架编程
使用create-react-app创建react应用react脚手架xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目 包含了所有需要的配置(语法检查、jsx编译、devServer…) 下载好了所有相关的依赖 可以直接运行一个简单效果 react提供了一个用于创建react项目的脚手架库: create-react-app 项目的整体技术架构为: react + webpack + es6 + eslint 使用脚手架开发的项目的特点: 模块化, 组件化,..原创 2021-03-22 21:18:20 · 596 阅读 · 1 评论 -
React08——DOM的Diffing算法
经典面试题: 1). react/vue中的key有什么作用?(key的内部原理是什么?) 2). 为什么遍历列表时,key最好不要用index? 1. 虚拟DOM中key的作用: 1). 简单的说: key是虚拟DOM对象的标识, 在更新显示时key起着极其重要的作用。 2). 详细的说: 当状态中的数据发生变化时,react会根据【新数据】生成【新的虚拟...原创 2021-03-22 11:02:56 · 135 阅读 · 0 评论 -
React07——新旧生命周期
旧生命周期新生命周期原创 2021-03-18 16:19:36 · 137 阅读 · 0 评论 -
React06——React事件处理&受控组件&非受控组件&函数柯里化
事件处理通过onXxx属性指定事件处理函数(注意大小写) React使用的是自定义(合成)事件, 而不是使用的原生DOM事件 React中的事件是通过事件委托方式处理的(委托给组件最外层的元素) 通过event.target得到发生事件的DOM元素对象<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport"原创 2021-03-18 09:48:25 · 179 阅读 · 0 评论 -
JS中的回调函数,以及ES6中通过promise处理回调
简要介绍:ES6中,可以通过promise来处理回调函数,回调函数经常用于异步操作中,间接来说,可以通过promise优化异步操作。1.什么是JS中的回调函数?回调函数是作为参数传递给另外一个函数,并且改回调函数在函数主体执行完后再执行。举例来说:function callback(m,n){alert("我是回调函数,我在执行");return m+n}function myFunction(callback){ var m=1; var n=2; return ...转载 2021-03-17 16:57:51 · 967 阅读 · 0 评论 -
React05——组件实例三大属性之refs
字符串形式的ref <inputref="input1"/> <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documen..原创 2021-03-17 10:54:31 · 149 阅读 · 0 评论 -
React04——组件实例三大属性之props属性
理解每个组件对象都会有props(properties的简写)属性 组件标签的所有属性都保存在props中作用通过标签属性从组件外向组件内传递变化的数据 注意: 组件内部不要修改props数据编码操作内部读取某个属性值 this.props.name 对props中的属性值进行类型限制和必要性限制第一种方式(React v15.5 开始已弃用): Person.propTypes = { name: Reac...原创 2021-03-13 10:17:26 · 194 阅读 · 0 评论 -
React03——组件实例三大属性之state属性
state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)强烈注意组件中render方法中的this为组件实例对象 组件自定义的方法中this为undefined,如何解决?1)强制绑定this: 通过函数对象的bind() 2)箭头函数 状态数据,不能直接修改或更新<!DOCTYPE html><html lang="en"><head&g..原创 2021-03-12 21:20:42 · 204 阅读 · 0 评论 -
React02——react中定义组件
函数式组件:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>1_函数式组件</title></head><body> <!-- 准备好一个“容器” --> <div id="test"></div> <!-- 引入react核心库 --> <s原创 2021-03-12 20:40:35 · 174 阅读 · 0 评论 -
React01——react简介
React简介 官网 英文官网: https://reactjs.org/ 中文官网: https://react.docschina.org/ 介绍描述 用于动态构建用户界面的 JavaScript 库(只关注于视图) 由Facebook开源 React的特点 声明式编码 组件化编码 React Native 编写原生应用 高效(优秀的Diffing算法) React高效的原因 使用虚拟(virtual)DOM, 不总是直..原创 2021-03-10 09:56:17 · 147 阅读 · 0 评论 -
JavaScript高级05——es6语法
ES6语法 目标能够说出使用let关键字声明变量的特点 能够使用解构赋值从数组中提取值 能够说出箭头函数拥有的特性 能够使用剩余参数接收剩余的函数参数 能够使用拓展运算符拆分数组 能够说出模板字符串拥有的特性ES6相关概念(★★) 什么是ES6ES 的全称是 ECMAScript , 它是由 ECMA 国际标准化组织,制定的一项脚本语言的标准化规范。为什么使用 ES6 ?每一次标准的诞生都意味着语言的完善,功能的加强。JavaScript语言本身也有一些令人不满意的地方。变量提升特性原创 2021-02-20 11:27:31 · 227 阅读 · 0 评论 -
JavaScript高级04——正则表达式
1.正则表达式概述1.1什么是正则表达式正则表达式( Regular Expression )是用于匹配字符串中字符组合的模式。在JavaScript中,正则表达式也是对象。正则表通常被用来检索、替换那些符合某个模式(规则)的文本,例如验证表单:用户名表单只能输入 英文字母、数字或者下划线, 昵称输入框中可以输入中文(匹配)。此外,正则表达式还常用于过滤掉⻚ 面内容中的一些敏感词(替换),或从字符串中获取我们想要的特定部分(提取)等 。其他语言也会使用正则表达式,本阶段我们主要是利用JavaS原创 2021-02-19 15:02:52 · 216 阅读 · 0 评论 -
JavaScript高级03——函数
1.函数的定义和调用1.1函数的定义方式1. 方式1 函数声明方式 function 关键字 (命名函数)function fn(){}2. 方式2 函数表达式(匿名函数)var fn = function(){} 3. 方式3 new Function()var f = new Function('a', 'b', 'console.log(a + b)'); f(1, 2);var fn = new Function('参数1','参数2'..., '函数体') 注意/*Fun原创 2021-02-16 18:58:27 · 345 阅读 · 0 评论 -
webpack和gulp
最近学到了node.js,知道了有名的gulp和webpack,但是不知道两者到底怎么去比较,直到我看到了这篇博客转载地址:https://www.cnblogs.com/iovec/p/7921177.html理想的前端开发流程在说构建工具之前得先说说咱期望的前端开发流程是怎样的?写业务逻辑代码(例如 es6,scss,pug 等) 处理成浏览器认识的(js,css,html) 浏览器自动刷新看到效果前端开发就是在不断的 123..123..123.... 循环中进行的,上面的后两步转载 2021-02-16 15:25:22 · 942 阅读 · 1 评论 -
JavaScript高级02——构造函数和原型
1.构造函数和原型1.1对象的三种创建方式--复习1. 字面量方式var obj = {};2. new关键字var obj = new Object();3. 构造函数方式function Person(name,age){this.name = name;this.age = age;}var obj = new Person('zs',12);1.2静态成员和实例成员1.2.1实例成员实例成员就是构造函数内部通过this添加的成员 如下列代码中un原创 2021-02-14 19:34:15 · 165 阅读 · 1 评论 -
Js交换值的10种方法
Js交换值的10种方法在开发过程中又是我们需要对值进行交换。一般我们都在用一种简单的解决方案:“临时变量”。不过还有更好的办法,而且不只有一个,有很多。有时我们在网上搜寻解决方案,找到后复制粘贴,但是从没想过这小段代码是怎样工作的。现在我们该学习一下应该怎样轻松高效地交换值了。1 使用临时变量先是最简单的一种。function swapWithTemp(num1,num2){ console.log(num1,num2) var temp = num1; num1 = .转载 2021-01-26 16:46:41 · 1658 阅读 · 0 评论 -
JavaScript高级01——面向对象
1.面向过程与面向对象1.1面向过程 面向过程就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候再一个一个的依次调用就可以了。1.2面向对象 面向对象是把事务分解成为一个个对象,然后由对象之间分工与合作。1.3面向过程与面向对象对比2.对象与类2.1对象对象是由属性和方法组成的:是一个无序键值对的集合,指的是一个具体的事物 属性:事物的特征,在对象中用属性来表示(常用名词)方法:事物的行为,在对象中用方法来表示(常用动词)2.1.1创建对象原创 2021-01-05 09:36:04 · 103 阅读 · 0 评论 -
JavaScript基础小节——手写重点整理02
接上一篇博客《JavaScript基础小节——手写重点整理01》:点这里 继续手写整理了一些我认为容易混淆的一些知识点如图所示:原创 2020-12-28 15:43:36 · 144 阅读 · 0 评论