- 博客(79)
- 收藏
- 关注
原创 【Vue】-- ♡关于vue的那些面试题♡
根组件的data可以是一个对象 普通组件必须是一个函数因为组件是一个可复用得实例 如果是一个对象组件全部指向同一个引用地址其中一个发生改变 其他组件也会受到影响所以说组件得data是一个函数 每次返回一个新对象💭。
2022-10-24 19:12:18
816
原创 【webpack】-- 基本模块化打包流程
webpack中四个核心:entry:“项目入口文件”、output:“输出文件”、plugins:[插件]、loader(可以设置非js文件的转换规则)面试问点:
2022-10-10 20:26:32
1328
2
原创 【axios】-- 一文带你入门axios
axios提供了两种拦截器:请求拦截器(成功,失败)响应拦截器(成功,失败)拦截器的作用:在网络请求时发起请求请求响应时对操作进行相应的处理拦截器的应用场景:请求拦截器成功时,可以添加网页加载的动画等响应拦截器成功时,可以进行数据的相应处理
2022-10-07 09:17:35
1227
原创 【Vue】-- Vuex简单入门教程
简单来说,Vuex就是一个状态机,采用集中式存储帮助我们管理所有组件的共享状态,可以用来解决多组件数据通信,可以把vuex理解成一个仓库,假设有A、B两个组件需要通信传值,那么可以把A组件和B组件的数据放到Vuex中, A组件想要获取B组件数据从vuex中拿 B组件想要获取A组件的数据从Vuex拿。
2022-10-06 08:35:29
665
原创 Vue2与Vue3的区别
此外,在处理单个逻辑关注点时,我们必须不断地“跳转”相关代码的选项块。而这正是组合式 API 使我们能够做到的,我们不需要在不同的选项做不同得操作。的列表也会增长,尤其对于那些一开始没有编写这些组件的人来说,这会导致组件难以阅读和理解。通过创建 Vue 组件,我们可以将界面中重复的部分连同其功能一起提取为可重用的代码段。此外,可以通过在生命周期钩子前面加上 “on” 来访问组件的生命周期钩子。等组件选项来组织逻辑,当组件变得越来越大时,之前,用于替代两者,在组件创建之前执行,一旦。因此,Vue3引入了。
2022-10-05 08:48:50
2074
2
原创 Vue入门【十一】-- 导航守卫与路由模式
路由的两种模式及其区别?hash模式:会在路由路径携带#,不会请求服务器,工作原理是hashchange事件,支持低版本浏览器history模式:不会在路由路径携带#,会请求服务器,工作原理是go/back/ forward,是h5新增的api,不支持低版本浏览器。
2022-10-04 08:46:45
1350
原创 Vue入门【十】-- 编程式导航是什么
**两种传参方式的区别?**query传递的参数会拼接在url地址栏,params传递的参数会携带在$route中(尽管query也会);query传递的参数刷新页面不会失效,而params传递的参数是一次性的,刷新即无。注意:path与params不能一起使用, 不能跳转也不能传参,还可能会报错。
2022-10-03 09:47:11
320
1
原创 Vue入门【九】-- 动态路由和嵌套路由
我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件。例如,我们有一个User组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染。那么,我们可以在vue-router的路由路径中使用“动态路径参数”来达到这个效果:一个“路径参数”使用冒号标记。当user的id 为1时:将id手动修改为2时依旧是这个页面:复用组件时,想对路由参数的变化作出响应的话,你可以简单地 watch $route 对象,或者使用组件内部的导航守卫(后续继续介绍):当匹配到一个路由时,参数值会被设置到。
2022-10-02 12:04:01
1067
原创 Vue入门【八】-- Vue-Router路由基本使用
route:首先它是个单数,译为路由,可以理解为单个路由或者某一个路由;例如Home按钮 => home内容, 这是一条route, about按钮 => about 内容, 这是另一条路由。routes:它是个复数,表示多个的集合才能为复数;可以理解为多个路由的集合,官方定义routes是一个数组;所以routes表示多个路由(route)的集合;router:译为路由器,上面都是路由,这个是路由器,可以理解为一个容器包含上述两个或者说它是一个管理者。
2022-10-01 16:41:24
437
原创 Vue入门【七】-- 动态组件与mixin混入
在这个示例中我们可以看到混入对象与组件中的data中总共拥有着message、foo与bar,并且都含有一个message,在对data做打印操作时,message、foo与bar都被打印了出来,并且message以组件的goodbye优先。
2022-09-28 19:57:11
1034
原创 Vue入门【六】-- 普通插槽与作用域插槽
普通插槽分为默认插槽和具名插槽:其中没有名字的插槽就是默认插槽,具名插槽就是有名字的插槽。作用域插槽的思路:先将数据通过父传子的形式传递给子组件,子组件定义为插槽的形式去在父组件中使用,那么此时便可以在父组件中使用子组件中的数据了。
2022-09-27 19:54:29
596
原创 Vue入门【五】-- 组件通信/组件传值
假设有一个组件A,A组件引入B组件(A为B的父组件),B组件引入C组件(B为C的父组件),即A为C的祖先组件,此时二者可以使用provide / inject进行通信。1.注册C组件时记得在B组件中注册,不要在A中注册2. 在祖先组件A使用provide方法提供传递的数据
2022-09-26 22:15:37
631
原创 【ES6】-- Set与Map | Map与Object
Set和Map的区别Map是键值对,Set是值的集合,当然键和值可以是任何的值;Map可以通过get方法获取值,而set不能,因为它只有值;Set的值是唯一的可以做数组去重,Map由于没有格式限制,可以做数据存储Map和Object的区别一个Object 的键只能是字符串或者 Symbols,但一个Map 的键可以是任意值。Map中的键值是有序的,而添加到Object中的键则不是。Map的键值对个数可以从 size 属性获取,而 Object 的键值对个数只能手动计算。Object 都有
2022-09-25 12:10:52
713
原创 Vue入门【四】-- 事件机制与双向数据绑定
可以用 v-model 指令在表单 、 及 元素上创建双向数据绑定。 它会根据控件类型自动选取正确的方法来更新元素。Vue是数据双向绑定的框架,双向绑定由三个重要部分构成:数据层(Model):应用的数据及业务逻辑视图层(View):应用的展示效果,各类UI组件业务逻辑层(ViewModel):框架封装的核心,它负责将数据与视图关联起来
2022-09-24 23:11:05
325
原创 Vue入门【三】-- 详解computed计算属性
使用场景:computed----当一个属性受多个属性影响的时候,使用computed-----购物车商品结算。可以看到“计算属性”只打印了一次,而“方法”打印了四次, 因此得知:计算属性基于依赖项的值进行缓存,只要依赖的变量不变,都直接从缓存取结果,不再重新调用计算属性。computed中的函数所依赖的属性没有发生变化,那么调用当前的函数的时候会从缓存中读取,而watch在每次监听的值发生变化的时候都会执行。数据域中属性值的变化来触发相应的回调函数,进而实现我们特殊的逻辑业务处理功能。
2022-09-24 16:46:38
1559
原创 【CSDN挑战赛第六期】-- JavaScript/JS详解
CSDN编程竞赛报名地址:https://edu.csdn.net/contest/detail/16CSDN挑战赛第六期大家也太厉害了吧,怎么会有人十分钟不到就写完了,哦买噶也太厉害了捏,真的跟我是同一个星球的生物吗??
2022-09-24 10:39:11
502
1
原创 Vue入门【二】-- watch侦听器之普通监听与深度监听
当被监听的内容是引用数据类型时,watch里面msg(){ } 这种形式只是普通的浅监听,无法满足我们的需求,因此我们需要使用深度监听来实现对数组/对象里的值进行监听。给监听器添加一个deep属性,默认值是false,当我们将其设置为true时深度监听生效。
2022-09-23 17:21:22
3066
原创 Vue入门【一】-- 基本模板语法
vue的核心是用数据驱动视图,因此在学习VUE时我们应该转换思想,不要想着如何去操作DOM,而是去想着如何操作数据。
2022-09-23 15:55:41
474
原创 【TypeScript】-- TS之面向对象
接口可以理解为是抽象到极致的抽象类,接口中只能存在抽象方法和属性。接口通过interface关键字来声明;接口是需要实现得 类是可以继承类实现接口必须具有接口得属性和方法,方法一般情况为一个没有方法体的方法。
2022-09-22 13:53:42
432
原创 【TypeScript】-- 基础入门教程
typescript是Javascript超集,是JavaScript+强类型跨平台:TypeScript 编译器可以安装在任何操作系统上,包括 Windows、macOS 和 Linux。静态类型检查:TypeScript 使用静态类型并帮助在编译时进行类型检查。因此,你可以在编写代码时发现编译时错误,而无需运行脚本。
2022-09-21 18:51:39
511
原创 【ES6】-- js类与类的继承
ES6 要求,子类的构造函数必须执行一次super函数。代表父类的构造函数。因此,当我们的的打印位置出现在super的先后次序不一样时会出现不一样的执行结果。作为函数时,super()只能用在子类的构造函数之中,用在其他地方就会报错。
2022-09-16 17:07:05
405
原创 【ES6】-- 解构赋值超详解
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构,解构的本质属于“模式匹配”,只要,左边的变量就会被赋予对应的值。如果解构不成功,变量的值就等于undefined。解构赋值等号右侧必须存在等号右侧不是数组或者对象时,会先转换成对象,再继续操作。如果是 null、 undefined则抛出错误。
2022-09-14 20:03:48
257
1
原创 【ES6】-- common.js与ES6模块化的差异
这个代码的实质是从test01模块加载 3 个方法,其他方法不加载。这种加载称为“编译时加载”或者静态加载,即 ES6 可以在编译时就完成模块加载,效率要比 CommonJS 模块的加载方式高。以上代码的实质是整体加载test01模块(即加载test01的所有方法),生成一个对象(_test01),然后再从这个对象上面读取 3 个方法。这种加载称为“运行时加载”,因为只有运行时才能得到这个对象,导致完全没办法在编译时做“静态优化”。4.2默认导出一个方法。1.导出方式 列表导出。
2022-09-13 16:45:34
816
1
原创 猿创征文 |【JavaScript】-- js知识点大总结
1.组成:核心js dom(文档对象模型) bom(浏览器对象模型)2.环境:node 浏览器3.特点:1.弱类型语言2.解释性语言3.执行顺序按照解析顺序从上至下执行4.区分大小写4.注释5.标识符命名规则1.由字母数字下划线$组成2.不能由数字开头3.不能以关键字和保留字命名4.使用小驼峰命名6.变量特点:变量声明提前可以重复声明没有块级作用域7.数据类型。
2022-09-08 19:33:59
394
3
原创 猿创征文 | 基于H5实现跨文档通信 & websocket
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。使用websocket可以在服务器与客户端之间建立一个非HTTP的双向连接,这个连接是实时的也是永久的,除非被手动关闭,否则服务器可以随时将消息推送到客户端。
2022-09-01 19:55:16
893
14
原创 【H5】-- 拖拽事件
dataTransfer是一个用来保存拖动及放置过程中的数据的对象,可以保存一项或者多项数据,可以是一种或者多种数据类型,用于拖动拖动元素与放置元素之间的数据传递。来获取到拖动元素中传出来的id,通过数据获取节点,放置节点。在拖动事件中设置 dataTransfer.setData(key,value) 将拖动元素的id传出去;案例中的console.log()都是为了测试的,实际应用时可以不需要将每一条过程都打印出啦。当拖动一个元素放置到目标元素上的时候将会按照如下顺序依次触发。......
2022-08-31 20:28:22
941
2
原创 【H5】前端存储 -- cookie、sessionStorage、localStorage
前端存储分为cookie和webStorage,webStorage又分为sessionStorage(会话存储)和localStorage(本地存储)。
2022-08-31 19:32:07
1296
1
原创 经典算法题 -- 水仙花数
水仙花数是指一个 n 位数 ( n≥3 ),它的每个位上的数字的 n 次幂之和等于它本身。我们可以使用以下代码实现100-1000之间的水仙花数的输出。例如:1^3 + 5^3+ 3^3 = 153。
2022-08-31 09:03:22
2267
2
原创 【JavaScript】-- 数组去重的方法
思路:先定义一个新数组来接收去重后的新数组,使用forEach方法遍历原数组,若该元素在新数组中不存在,即indexOf 等于-1时,使用push方法将其添加入新数组中,最后返回这个新数组。思路:先定义一个新数组来接收去重后的新数组,遍历原数组,判断原数组的元素在新数组中是否存在,若为false,则将其使用push方法添加进新数组,并返回新数组。思路:先定义一个新数组来接收去重后的新数组,利用 filter 过滤并配合 indexOf 查找元素最后返回这个新数组。...
2022-08-30 21:24:50
366
2
原创 【canvas】-- H5新增标签canvas的简单用法
♡‧₊˚ 基本用法 ‧₊˚ ♡获取canvas对象--获取画布取得上下文(context)--获取画笔定义填充样式 / 定义轮廓样式绘制填充图形 / 绘制填充图形
2022-08-30 19:23:53
491
原创 【JavaScript】-- 利用JS实现全选/取消全选
实现要求:点击"全选"框,以下所有选项全部勾选。把"全选"框从选中状态勾选成未选中状态,其他复选框全部取消选中效果。当其他复选框全部选中,"全选框"为选中状态。当其他复选框有一个未选中,"全选框"取消选中状态。...
2022-08-30 18:30:28
3313
1
原创 【jQuery】-- 基本使用步骤
jQuery对象是类数组对象,jQuery的方法都是对类数组中的元素的批量操作注意:jQuery对象可以调用jQuery.prototype中声明的方法,普通的Element元素则不能调用。在使用jquery的时候,拿到一个对象务必要搞明白该对象是Element元素还是jQuery实例如下代码,this是Element元素,如果想调用jQuery方法,需要使用$()将其转换为jQuery实例...
2022-08-29 20:26:40
923
原创 【Ajax】-- 使用Ajax实现异步数据请求
Asynchronous Javascript And XML”(异步的JavaScript和XML),是指一种创建交互式网页应用的网页开发技术,用于浏览器和服务器之间进行数据交互。AJAX在浏览器与Web服务器之间使用(HTTP请求),这样就可使网页从服务器请求少量的信息,而不是整个页面,这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。......
2022-08-29 09:10:22
2000
原创 防抖与节流是什么?如何实现?
若不加入防抖,则我们每次在输入框里输入一个字符,控制台都会打印依次“你输入的值是…” ,而加入了防抖之后,若我每次在输入框中输入三个字符便停顿一次,那么在我们设置的这个时间间隔一秒之后,这个函数才会被执行一次,相应的语句被打印一次。当我们持续触发一个事件时,事件处理程序不会执行,只有当我们在设置的时间间隔里没有触发事件时,事件处理程序才会执行,若在这个时间间隔里被重复触发则重新开始计算。无论事件触发得多么频繁,在规定的时间间隔内只执行一次事件处理程序。无论我们点击得多么频繁,语句也只会三秒再打印一次。...
2022-08-25 20:03:42
444
2
原创 【前端】-- 面试题大合集(持续更新)
当DOM的操作影响元素的几何信息(位置),那么浏览器就需要重新计算元素的几何属性,并将其重新安放在正确的位置,这个过程就叫做重排。事件委托也称为事件代理,就是利用事件冒泡的原理指定一个事件处理程序管理一类事件处理程序。)发生变化,但是没有改变布局,重新将外观绘制出来的过程就叫重绘。目的/优点:减少DOM操作与减少浏览器的重排与重绘,并且新添加的节点也能被添加事件。事件流的三个阶段:事件捕获 ----> 事件触发 --- > 事件冒泡。事件流就是事件执行的顺序,分为冒泡型事件流和捕获型事件流。........
2022-08-25 18:38:28
397
2
原创 【DOM】-- 事件机制
这个对象包含了一些基本信息,比如导致事件的元素、发生的事件类型,以及可能与特定事件相关的任何其他数据。例如,鼠标操作导致的事件会生成鼠标位置信息,而键盘操作导致的事件会生成与被按下的键有关的信息。事件处理程序的名字以"on"开头,因此 click 事件的处理程序叫作 onclick,而 load 事件的处理程序叫作 onload。简单来说,事件流就是时间执行的顺序。在阻止冒泡之前,我们要知道一个对象叫 event ,它代表事件的状态,比如事件在其中发生的元素,键盘状态,鼠标位置,鼠标按钮状态等……
2022-08-24 20:21:42
333
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人