- 博客(44)
- 收藏
- 关注
RSS订阅原创 JS小游戏之接粽子
各位小伙伴们，端午节都吃粽子了吗？吃完粽子，来一起用代码做个接粽子小游戏吧！ 选择难度后点击开始，倒计时30秒内会掉落粽子，点击粽子可得分，简单得10分，很难得20分，超级难得30，倒计时结束后游戏结束。 开始游戏 点击开始游戏，开始计时，时间30秒，页面上方开始随机掉落粽子，玩家通过点击粽子可获得积分，计时结束，弹出“时间结束”弹窗，粽子不再掉落。游戏难度选择 玩家通过点击单选框来选择游戏的难度，难度越高，粽子掉落越快，粽子体积也
2022-06-06 16:09:19
1556
原创 vue 后台权限管理 以及过程中所遇到的问题
本次使用的是vue-admin-template-master模板1.首先从后端那里获取用户权限的接口2. 在路由导航里面每次跳转路由就向store派发一个获取用户权限接口 // 获取用户信息 权限 await store.dispatch('user/getInfo')3.在store actions里面调取用户权限接口以及储存用户权限到state里面 // 获取用户权限 async getInfo({ commit, state }) { ..
2022-05-24 09:59:42
1842
原创 前端面试题（12）
一,forEach和map的区别?相同点都是循环遍历数组中的每一项forEach和map方法里每次执行匿名函数都支持3个参数，参数分别是item（当前每一项）、index（索引值）、arr（原数组）匿名函数中的this都是指向window只能遍历数组都有兼容问题不同点map速度比foreach快map会返回一个新数组，不对原数组产生影响,foreach不会产生新数组，map因为返回数组所以可以链式操作，foreach不能二,setTimeout 和 setInterval区别？
2022-02-07 19:53:42
588
原创 前端面试题（11）
1.$nextTick的使用当你修改了data 的值然后马上获取这个 dom 元素的值，是不能获取到更新后的值， 你需要使用 $nextTick 这个回调，让修改后的 data 值渲染更新到 dom 元素之后在获取，才能成功。2.delete和Vue.delete删除数组的区别delete只是被删除的元素变成了empty/undefined其他的元素的键值还是不变。 Vue.delete直接删除了数组改变了数组的键值。3.vueslot简单来说，假如父组件需要在子组件内放一...
2022-01-23 17:29:28
144
原创 uni-app基本使用
uniapp小程序组件+apivue语法组件 view text input image 没有div，div默认会被转换为viewapi uni.showToast({}) 没有window（h5端有window）CSS 推荐的单位rpx750rpx = 1个屏幕的宽度语法95%等同于vue的语法pages.jsonglobalStyle 全局配置"navigationBarTextSt...
2022-01-20 00:15:36
1231
原创 JS常见的一些面试题
值类型key和value储存在栈中undefinedStringNumberBooleanSymbol*null例子：let a = 100let b = aa = 200console.log(b) // 100引用类型栈中储存key和内存地址真正的value储存在堆中ArrayObjectfunction例子：let a = {age:20}let b = a;// a的内存地址赋值给b// a和b引用同一块内存b.age ...
2022-01-17 19:29:18
268
原创 react语法以及基本使用
定义facebookmeta 出品的一款构建javascript应用的库单向数据流组件虚拟dom节点安装与创建安装：npm i create-react-app -g安装脚手架create-react-app myreact创建项目cd /myreact进入项目目录npm start 启动项目npm run eject 暴露webpack配置文件npm run build 打包项目jsx语法javascript混合xml（html）语法格式目的更好
2022-01-16 14:44:59
551
原创 小程序云开发
意义1.前端程序员，可以借助云开发直接管理后端业务逻辑，与数据库2.不用购买服务器，配置域名，https让前端成为全栈，成为可能前端云函数数据库前端编写云函数，上传云端前端调用云函数，云函数区执行服务器功能（操作数据库，储存文件）云函数cloudfunctions目录 右键新建云函数组成1.云函数入口文件const cloud = require('wx-server-sdk')cloud.init()2.云函数入口函数e...
2022-01-16 13:34:05
147
原创 微信小程序组件化
组件化使用新建右键 新建Component引用xxx.json"usingComponents": { "item":"/components/item/item" }使用<item></item>插槽默认插槽<item> <text>嵌套内容</text></item> 组件内部<slot></slot>具名插槽组件的js的option...
2022-01-13 20:37:48
581
原创 前段面试题（10）
1、闭包的概念？优缺点？闭包的概念：闭包就是能读取其他函数内部变量的函数。优点：避免全局变量的污染希望一个变量长期存储在内存中（缓存变量）缺点：内存泄露（消耗）常驻内存，增加内存使用量2、虚拟DOM实现原理？虚拟DOM本质上是JavaScript对象,是对真实DOM的抽象状态变更时，记录新树和旧树的差异最后把差异更新到真正的dom中3、watch、methods和computed的区别?watch为了监听某个响应数据的变化。computed是自动监听依赖值的...
2022-01-04 20:19:06
398
原创 react全家桶笔记总结（1）
React的特点1.声明式编码2.组件化编码3.React Native 编写原生应用4.高效（优秀的Diffing算法）React高效的原因使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。 DOM Diffing算法, 最小化页面重绘。安装与创建安装：npm i create-react-app -g安装脚手架create-react-app myreact创建项目cd /myreact进入项目目录npm start 启动项目np..
2021-12-29 21:59:40
485
原创 前段面试题（9）
一.组件间通讯1.props/$emit父组件A通过props的方式向子组件B传递，BtoA通过在B组件中$emit,A组件中v-on的方式实现。2.$emit/$on通过一个空的Vue实例作为中央事件总线，用它来触发事件和监听事件,轻量地实现了任何组件间的通信3.vuex4.$attrs/$listeners当一个组件没有声明任何prop时，可以通过v-bind="$attrs"传入内部组件二.Promise的作用Promise是一种常用的异步解决...
2021-12-28 17:16:29
532
原创 webpack详解
一.webpack简介：1.1webpack是什么：webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理。它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。1.2 webpack五个核心概念1）Entry入口(Entry)指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。...
2021-12-28 17:11:45
1924
原创 前段面试题（8）
1、forEach、for in、for of三者区别forEach更多的用来遍历数组for in 一般常用来遍历对象或jsonfor of数组对象都可以遍历，遍历对象需要通过和Object.keys()for in循环出的是key，for of循环出的是value2、var、let、const之间的区别var 可以重复声明变量，而let不可以重复声明var 是不受限于块级作用域的，而let是受限于块级作用域va 声明的变量会挂载到window上，而let不与window...
2021-12-25 17:32:34
271
原创 Vue技术栈（3）
Vue组件化原理我们写的组件实际就是一个options对象当我们声明完一个组件时候,Vue内部通过extend全局方法继承Vue构造函数生成一个子类，同时会合并options如果是全局组件注册调用Vue.components，会将组件(我们实际写的组件就是一个options再转化为一个组件类)转化为一个组件类然后挂载Vue.options.components，同时vue内部也把Vue构造函数挂载到options._base，方便以后我们局部注册组件拿到extend方法,然后转...
2021-12-24 21:44:59
391
原创 前段面试题（7）
1.栈和堆的区别？栈（stack）：由编译器自动分配释放，存放函数的参数值，局部变量等；堆（heap）：一般由程序员分配释放，若程序员不释放，程序结束时可能由操作系统释放。2.eval是做什么的？它的功能是把对应的字符串解析成JS代码并运行；应该避免使用eval，不安全，非常耗性能3.什么是window对象?什么是document对象?window对象代表浏览器中打开的一个窗口。document对象代表整个html文档。实际上，document对象是window对象的一个属性。4.哪些操作会.
2021-12-24 21:33:13
389
原创 前段面试题（6）
1、对于即将到来的vue3.0特性你有什么了解的吗？Vue3.0的目标是让Vue核心变得更小、更快、更强大2、虚拟DOM的优缺点？优点：（1）保证性能下限（2）无需手动操作DOM（3）跨平台缺点:（1）无法进行极致优化3、虚拟DOM实现原理用JavaScript对象模拟真实DOM树，对真实DOM进行抽象；diff算法—比较两棵虚拟DOM树的差异；pach算法—将两个虚拟DOM对象的差异应用到真正的DOM树。...
2021-12-23 21:54:06
219
原创 前段面试题（5）
1.VueSSR是什么？SSR也就是服务端渲染，也就是将Vue在客户端把标签渲染成HTML的工作放在服务端完成，然后再把html直接返回给客户端。2.SSR优缺点？优点：SSR有着更好的SEO（搜索引擎优化）、并且首屏加载速度更快。缺点：开发条件会受限制，服务器端渲染只支持beforeCreate和created两个钩子，当我们需要一些外部扩展库时需要特殊处理，服务端渲染应用程序也需要处于Node.js的运行环境。服务器会有更大的负载需求。3.Vu...
2021-12-22 21:55:48
435
原创 前段面试题（4）
1.闭包是什么？有什么特点闭包可以简单理解成：定义在一个函数内部的函数。其中一个内部函数在包含它们的外部函数之外被调用时，就会形成闭包。特点：1.函数嵌套函数。2.函数内部可以引用外部的参数和变量。3.参数和变量不会被垃圾回收机制回收。2.异步同步 异步：向服务器发送请求，必须等请求到内容，才能刷新页面，用户才能看到新内容 同步：向服务器发送请求，这时可以做其他事情，内容请求到时，用户不用刷新页面，也可以看到新内容3.document.write和innerHTM...
2021-12-20 21:44:49
74
原创 vue技术栈（2）
软件架构模式MVC概述：传统的MVC指的是，用户操作会请求服务端路由，路由会调用对应的控制器来处理，控制器会获取数据，将结果返回给前端，页面重新渲染。1.视图（VIew）：用户界面。2.控制器（Controller）：业务逻辑。3.模型（Model）：数据保存（数据库访问）。MVVM概述:在MWVM模式中,View(视图)和Model(数据)是不可以直接通讯的,在它们之间存在着ViewModel这个中间介充当着观察者的角色。当用户操作View(视图), ...
2021-12-20 21:41:12
188
原创 vue技术栈（1）
Vue项目如何做性能优化代码层面的优化v-if 和v-show区分使用场景1.v-if 是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建;也是惰性的:如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。2.v-show就简单得多，不管初始条件是什么，元素总是会被渲染，并且只是简单地基于cSS的display属性进行切换。computed和 method区分使用场景computed :是计算属性,依赖其它...
2021-12-18 17:45:27
339
原创 前段面试题（3）
1.Vue的性能优化1>.对象层级不要过深，否则性能就会差。2>.computed和watch区分场景使用3.>图片懒加载4.>路由懒加载5.>适当采用keep-alive缓存组件2.vue路由的传递params路由的参数配置形参{path:"/produce/:id"}传递参数<router-linkto="/produce/...
2021-12-18 17:37:59
282
原创 前段面试题（2）
1.vuex的getter特性是什么getter可以对state进行计算操作，它就是store的计算属性虽然在组件内也可以做计算属性，但是getter可以在多给件之间复用如果一个状态只在一个组件内使用，是可以不用getters2.vue2.x中如何监测数组变化使用了函数劫持的方式，重写了数组的方法，Vue将data中的数组进行了原型链重写，指向了自己定义的数组原型方法。这样当调用数组api时，可以通知依赖更新。如果数组中包含着引用类型，会对数组中的引用类型再次递归遍...
2021-12-17 21:46:38
89
原创 前段面试题（1）
一.vuex有哪几种属性有五种,分别是State,Getter,Mutation,Action,Module(就是mapAction)1.state：vuex的基本数据，用来存储变量2.geeter：从基本数据(state)派生的数据，相当于state的计算属性3.mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个mutation都有一个字符串的事件类型(type)和一个回调函数(handler)。回调函数就是我们实际...
2021-12-15 21:53:13
93
原创 几个例子让你彻底明白深拷贝和浅拷贝
浅拷贝是能拷贝值类型（简单数据类型）深拷贝，拷贝引用类型（互相不影响）先创建一个对象obj1 let obj1 = { name: "zhouhe", age: 18, friend: [ "小红", "小李", "小明", { name: "10086", say() { alert("你的话费余额不足"); ..
2021-12-11 17:52:58
772
原创 前段面试必背的15道题
1.什么是闭包?应用场景闭包就是函数嵌套函数的特殊形式： 1.函数作为参数被传入 2.函数作为返回值被返回闭包其实也是自由变量的特殊表现形式：1.自由变量：没有在当前作用域声明的变量 2.自由变量的值和作用域是在函数定义的时候去欸的那 ...
2021-12-08 21:43:10
124
原创 axios的基本使用
axios定义：axios 前端 ajax请求工具1. 在浏览器与nodejs可以使用2. 可以拦截请求与相应3. 扩展与封装自定义方法4. 不依赖dom节点安装npm i axios -Svue全局挂载import axios from ‘axios’Vue.prototype.$http = axios;get请求axios.get(url)axios.get(url?na...
2021-12-07 21:40:00
202
原创 Git命令基本使用
添加暂存盘git add my.txtgit add *.txtgit add .从暂存盘撤回git checkout my.txt提交到版本库git commit -m “提示文本”切换版本库git reset --hard 版本号 git reset --hard HEAD^^记录 git log 提交记录...
2021-12-04 16:39:21
282
原创 Vuex概念和基本使用
概念 在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方 式，且适用于任意组件间通信。何时使用？ 多个组件需要共享数据时搭建vuex环境创建文件：src/store/index.js//引入Vue核心库import Vue from 'vue'//引入Vueximport Vuex from 'vuex'//应用Vuex插件Vue.use(Vuex)/...
2021-12-03 20:50:25
107
原创 Vue课堂笔记知识总结（4）
全局事件总线（GlobalEventBus）一种组件间通信的方式，适用于任意组件间通信。安装全局事件总线：new Vue({ ...... beforeCreate() { Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm }, ......}) 使用事件总线：接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。methods(){ .
2021-12-03 20:38:38
109
原创 Vue路由详解及使用
对路由理解一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。前端路由：key是路径，value是组件。基本使用 1.安装vue-router 命令：npm i vue-router 2.应用插件： Vue.use(VueRouter) 3.编写router配置项://引入VueRouterimport VueRou...
2021-12-03 20:21:55
1039
原创 npm命令
npm介绍 npm是nodejs自带的包（插件）下载管理工具，使用npm命令要先安装nodejs nodejs安装路径http://nodejs.cn/download/使用场景 -允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。 -允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。初始化项目 npm init 会产生一个package.jso...
2021-12-02 21:54:18
877
原创 Vue课堂笔记知识总结（3）
组件1. 理解: 用来实现局部(特定)功能效果的代码集合(html/css/js/image…..)2. 为什么: 一个界面的功能很复杂3. 作用: 复用编码, 简化项目编码, 提高运行效率全局组件：Vue.component("组件名",{template:''})局部组件：const steper={template:``}注册组件：new Vue({components:{steper}})使用组件：<steper></steper>基本使用流程
2021-11-29 21:53:44
106
原创 Vue课堂笔记知识总结（2）
类绑定： 属性:class="值" 对象:class="{'x':true,'y':false}" 数组:class="[c1,c2,c3]"样式绑定 :style="{color:'red','fontSize':'48px'}"行内样式自定义指令写法：//第一种：directives: { 属性名(element,binding){ }}/...
2021-11-24 21:51:37
205
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人