📢前言代码取自开源项目50projects50days,用作个人学习和巩固三件套的知识,增加了注释,可能会有小改动。
在线演示地址
📝实现思路及效果
💻代码index.html1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>导航栏最小化</title&g ...
📢前言代码取自开源项目50projects50days,用作个人学习和巩固三件套的知识,增加了注释,可能会有小改动。
在线演示地址
📝实现思路及效果
💻代码index.html12345678910111213141516171819202122232425262728293031323334353637<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>倒计时动画</title> <link rel="sh ...
📢前言代码取自开源项目50projects50days,用作个人学习和巩固三件套的知识,增加了注释,可能会有小改动。
在线演示地址
📝实现思路及效果
💻代码index.html12345678910111213141516171819202122232425262728293031<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>3d盒子背景</title> <!-- 引入一个字体样式 并检验是否安全 ...
前言马上要秋招了,搜集整理了一些Vue面试题,包括组件、指令、API等相关内容,巩固基础😎秋招冲冲冲!!!本篇包括:
✅keep-alive的理解✅nextTick的理解✅vue组件之间的通信方式✅Vuex的理解及使用场景
keep-alive的理解
Props:
include - string | RegExp | Array。只有名称匹配的组件会被缓存。
exclude - string | RegExp | Array。任何名称匹配的组件都不会被缓存。
max - number | string。最多可以缓存多少组件实例。
用法:
<keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 <transition> 相似,<keep-alive> 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在组件的父组件链中。
当组件在 <keep-alive> 内被切换时,它的 mounted 和 unmounted 生命周期钩子不会被调用,取而代之的是 activated 和 deactiva ...
前言马上要秋招了,搜集整理了一些Vue面试题,包括组件、指令、API等相关内容,巩固基础😎秋招冲冲冲!!!本篇包括:
✅计算属性和侦听器的区别✅事件修饰符✅单页应用(SPA) VS 多页应用(MPA)✅如何解决SPA首屏加载速度慢✅v-if和v-for的优先级
计算属性和侦听器的区别计算属性(computed)是自动监听依赖值的变化,从而动态返回内容(动态显示新的计算结果)。
监听(watch)是一个过程,在监听的值变化时,可以触发一个回调,并做一些事情。回调函数有两个参数,一个 val (修改后的 data数据),一个 oldVal(原来的 data 数据)。Vue 实例将会在实例化时调用$watch(),遍历 watch对象的每一个属性。
两者用于不同情况下完成计算,显示数据的操作。它们的区别主要来源于用法,只是需要动态值,那就用计算属性;需要知道值的改变后执行业务逻辑,才用 watch,用反或混用虽然可行,但都是不正确的用法。
下面给出这两个特性的基本用法:
计算属性
12345678910111213141516<div id="app"> & ...
前言本篇博客内容来源于B站视频-up主耐心的钠珀学长,部分内容结合博主个人经历:
高中和大学最显著的三大区别。我一个个和你讲清楚。我回想一下,如果是我刚高考完,甚至到大二,我可能都看不懂这个视频,因为真的有点超越我当时的认知水平。但是回过头来看,如果说我不在大学里面被打肿,不迷茫个一年半载,🤡我根本不可能想通这些问题。
公平与对错高中分对错,讲公平;大学没有对错,别讲公平。
中学时,同学之间告状的对象是老师,内容无非是:谁抄了谁谁谁的作业;老师谁谁上课总说话,都是这些破事。但是上了大学之后,我才知道:原来大部分的人都在抄,从小测到作业、上机,甚至是考试;大家上课也没有认真听讲,基本都在睡觉、玩手机。原来励志奖学金也有很大一部分都设置给了家境本来就很好的同学。
当我们还在讲对错,讲公平的时候,别人的各种骚操作直接把我们秀翻了呀。当我们会意识到这一点的时候,心态可能就直接崩了。举个例子,大家请跟我思路听一下是不是这个道理:如果说你在玩一场必须要玩下去的游戏,开局了大概一会儿之后,你发现这个游戏百分之三十的玩家都在开挂,他们一开局血量都是满,金币都是无限的,装备都是从父母那边继承管的。
...
前言马上要秋招了,搜集整理了一些Vue面试题,包括组件、指令、API等相关内容,巩固基础😎秋招冲冲冲!!!本篇包括:
✅ webpack和vite的对比✅ v-if和v-show的区别✅ 绑定class的数组用法✅ 组件中data为什么是函数✅ 生命周期
Webpack 和 Vite对比
vite凭什么比webpack快
webpack启动需要打包
webpack dev serve在启动时,会把所有的包都build一遍,从入口文件起索引整个项目的文件,编译成一个或多个js文件,不管模块是否被执行,都会被打包到bundler里。随着项目的复杂程度上升,模块增加,打包后的bundler也会越来越大,打包速度会越来越慢。即项目越复杂,启动时间越来越长。
Vite在启动时不需要打包,不需要拆分模块的依赖,不需要编译,启动速度非常快。
由于现代浏览器本身就支持ES Module,会自动向依赖的Module发出请求。vite充分利用这一点,将开发环境下的模块文件,就作为浏览器要执行的文件,而不是像webpack那样进行打包合并。
vite 请求哪个模块再对该模块进行实时编译 webpack全 ...
📢前言代码取自开源项目50projects50days,用作个人学习和巩固三件套的知识,增加了注释,可能会有小改动。
在线演示地址
📝实现思路及效果
注意一下几点:
各元素的位置与显示格式,尤其是对于justify-content,属性值为flex-start还是center
生成密码内容的位置不要先入为主想成input
calc的用法,详情见代码注释
监听固定的几个按钮(复制、生成、5项规则),使用Math.random()生成所需字符,构建密码
复制原理的实现:将生成的字符串放置到新创建的textarea中,使用select()选中该区域的文本,使用copy命令复制成功后,将创建的textarea移除
💻代码index.html123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657<!DOCTYPE html><html lang="en"><head> & ...










