- 博客(87)
- 收藏
- 关注
RSS订阅
原创 2021年最新前端面试题（js,vue,webpack,css,react）总结
一.javascript1.javascript 有哪几种数据类型undefined，null，string，boolean，number，symbol(ES6)，BigInt。。。object里面包含的function、Array、Date2.target和currentTarget区别event.target 返回触发事件的元素 event.currentTarget 返回绑定事件的元素$(document).ready()方法和window.onload有什么区别(1)、w
2021-06-24 22:34:48
3188
10
原创 cantnot find module @babel/plugin-proposal-optional-chaining 报错
cantnot find module @babel/plugin-proposal-optional-chaining
2024-02-28 10:55:52
2090
原创 console的用法
c 是console的占位符，用于指定输出样式或应用 CSS 样式到特定的输出文本。但，%c 占位符只在部分浏览器中支持，如 Chrome、Firefox 等。console.error(‘这是一个报错’)console.warn(‘这是一个警告’)
2024-01-04 16:24:46
585
转载 vue使用websocket
这样写websocket是在该页面实例化一个websocket，每次刷新页面或者重新进入该页面都会新建一个websocket实例，在真实业务中很少会这样处理。所以就需要将websocket定义为全局实例，跟随vue实例的创建而创建，销毁而销毁。因为使用websocket的目的只是做消息推送，所以使用了set存储客户端的连接。根据个人习惯，echarts根据数据更新自动刷新，我喜欢这样写，图表不更新的时候可以尝试一下。echarts的使用在此就不再赘述了，不了解的话，可以点击 vue使用echarts。
2023-05-08 10:38:26
5498
1
原创 watch监听的几个方法
对象内某个属性的变化监听 "student.name": { handler(newValue, oldValue) { console.log("单个属性监听", newValue, oldValue); } },监听整个对象变化/** * vue中watch首次加载时不会调用的，只有值变化时才能执行，若要首次调用，需要使用immediate属性。请使用如下方法 * https://www.cnblogs.com/shin
2022-01-18 10:42:44
10018
原创 直接供前端调用的，免费访问的接口api
https://jsonplaceholder.typicode.com/postshttps://www.free-api.com/
2021-12-21 17:36:23
536
原创 解决移动端键盘遮挡输入框问题
this.$nextTick(()=>{ let documentInput = document.getElementsByTagName('input'); for(let i=0;i<documentInput.length;i++){ documentInput[i].onclick = function(){ this.scrollIntoView(); } }
2021-12-14 16:12:09
2995
原创 js判断输入银行卡格式的
将输入123456898877766改成1234 5678 7776 的4个一组的形式原理：输入的时候道达个添加一个空格，删除到达空格的时候自动删除一个空格。'form.bankCard'(newVal, oldVal){ if(newVal.length < oldVal.length){//删除 if(newVal.substr(-1) == ' '){//newVal.replace(/(\s*$)/g, "").length == thi
2021-12-07 15:37:46
428
原创 sourcetree回滚的问题
1.打开develop分支的日志/历史，鼠标选中将要回退到的那个历史提交记录，右键-》重置当前分支到此次提交2.在弹窗中 使用模式选择 强行合并–丢弃所有改动过的工作副本，点击确定3.等待重置完，可以看到本地仓库的develop分支已回退到 “提取 release分支的某次提交到 develop分支”提交。而且本地仓库落后远程仓库两个提交记录。4.依然是同样的操作。选中最新的提交历史记录，右键-》重置当前分支到此次提交5.这次选的使用模式是软合并 – 保持所有本地改动，点击确定6.最
2021-12-03 15:35:30
720
原创 vue3.0五分钟就能直接上手用
1.setup(props,context) props：上个组建的参数、 context //1.attrs是上个页面传过来的属性，没有用props承接的都会在attrs里面展示，用props承接的都不展示在attrs内 //2.emit是抛出事件，如下方法：emitFn //3slots插槽，context.slots2.ref，需要用value来修改 let count = ref(0); count.value let
2021-11-29 17:28:15
369
原创 vue搭建简单的mock数据
1.安装服务npm install -g json-server2.新建mock文件项目目录public下创建 mock 文件夹mock 文件夹下添加 db.json 文件，内容如下3.添加启动命令package.json 添加命令“mock”: “json-server --watch public/mock/db.json”,“mockdev”: “npm run mock & npm run dev”4.启动 mock 服务器npm run mock 命令
2021-11-22 14:29:32
651
原创 ES6，很多人不会用的地方
const obj = { a:1, b:2, c:3, d:4, e:5,}const a = obj.a;const b = obj.b;const c = obj.c;const d = obj.d;const e = obj.e;const f = obj.a + obj.d;const g = obj.c + obj.e;//改进const {a,b,c,d,e} = obj;const f = a + d;const g = c
2021-11-16 13:54:39
504
原创 移动端ios出现输入框无法输入的情况
加上这段css即可[contenteditable="true"], input, textarea { -webkit-user-select:auto!important; -khtml-user-select: auto!important; -moz-user-select: auto!important; -ms-user-select: auto!important; -o-user-select: auto!important; user-select: auto!i
2021-11-16 10:01:05
2107
原创 用new Promise去封装接口
方法封装export const promiseAjax= () => { return new Promise((resolve, reject) => { getFundOpenApplyByMobile().then(res => {//这里是接口方法 let result = res.data resolve(result)//接口返回成功，抛出成功结果 }, error=>{
2021-11-12 11:24:09
761
原创 数组和字符串有哪些方法
// 数组filter //有返回值（数组），return是布尔值，true的时候item返回到数组内map //有返回值（数组），return任意类型，return直接在数组内forEach //没有返回值。arr.forEach(function(self,index,arr){}) 三个参数，不支持break，只支持return相当于continuefor //break跳出循环，reurn必须在函数内，且终止当前函数every //有返回值（布尔值），循环中所有的return
2021-08-29 21:47:54
169
原创 vue3.0-第八章之provide/inject
provide/inject实现祖孙组件之间的值传递父组件：用provide传递值到子组件和孙子组件<template> <div class="parent"> <h3>我是parent组件{{name}}-{{price}}</h3> <child/> </div></template><script>import { reactive, to
2021-08-11 20:52:39
209
原创 vue3.0-第六章之shallowReactive / shallowRef / readonly / shallowReadonly
1.shallowReactiveshallowReactive监听了第一层属性的值，一旦发生改变，则更新视图;其他层，虽然值发生了改变，但是视图不会进行更新import {shallowReactive} from 'vue'export default { setup() { const obj = { a: 1, first: { b: 2, second:
2021-08-05 13:31:30
282
原创 vue3.0-第五章之toRef/toRefs
1.toRef说明：创建ref对象，是的value值指向另一个对象中的属性。重点：只能处理一个对象中的一个属性说明：1.toRef将person内的值拆出来，第一个参数是需要改变的对象，第二个参数是需要改变的该对象的属性2.必须要用toRef，如果直接用ref操作的话，如下图：操作的dom的响应式纯粹是return里面的name,age,salary,，并不是person内的值，也就是操作name,age,salary,的时候，原person内的值并不会改变2.toRefs重点：处理
2021-08-04 22:30:53
456
原创 vue3.0-第四章之hook
hook就是将一些公共方法，公共的组建属性提取出去，封装成一个js文件，类似于mixin，举例：页面上鼠标点击，获取鼠标坐标demo.vue文件<template> <div> <div>鼠标点击的位置：x:{{point.x}},y:{{point.y}} </div> </div></template><script>// import {ref} from 'vue'import u
2021-08-04 14:17:26
801
原创 vue3.0-第三章之 生命周期第二节
1.vue3.0和vue20.0的生命周期的区别vue3.0中可以继续使用vue2的生命周期，但是有两个被更名，beforeDestory 更改为 boforeUnmountdestroyed 更改为 unmounted2.如果在vue3里面的setup里面使用生命周期的话，使用的名称和外面的名称会有些区别。（且如果要使用的话，需要import引入该生命周期钩子）代码：以onBeforeMount为例import {onBeforeMount} from 'vue'setup(){
2021-08-04 10:20:00
208
原创 vue3.0-第二章之 生命周期第一节
1.computed计算属性1）必须要引入computedimport {reactive,computed} from 'vue'使用：computed放在setup里面作为方法使用setup(){ let p = reactive({ firstName:"张", lastName:"三", }) let fullName = computed(()=>{//计算属性（需要引入） return p.firstName
2021-08-03 22:51:41
227
原创 vue3.0-第一章之setup，ref / reactive
1.setup触发的时机是beforeCreate之前，所以setup内部访问不到this的概念2.setup的写法与beforeCreate同级，内部有两个参数，且内部必须要用return暴露出去props：上个组建的参数context：1.attrs是上个页面传过来的属性，没有用props承接的都会在attrs里面展示，用props承接的都不展示在attrs内2.emit是抛出事件，如下方法：emitFn3.slots插槽，context.slotssetup(props,co
2021-08-02 13:54:49
427
原创 Lodash中节流（throttle）和防抖（debounce）
1.节流throttle API走起_.throttle(func, [wait=0], [options={}])func (Function): 要节流的函数。[wait=0] (number): 需要节流的毫秒数。[options={}] (Object): 选项对象。[options.leading=true] (boolean): 指定调用在节流开始前，默认true。[options.trailing=true] (boolean): 指定调用在节流结束后，默认true。用法
2021-07-20 11:34:47
20857
原创 vue路由拆成多个文件
1.原始的一个文件注册所有的路由：import Vue from "vue";import VueRouter from "vue-router";// 引入组件import home from "../views/home.vue";import about from "../views/about.vue";Vue.use(VueRouter);const routes = [ { path:"/", component: home },
2021-07-19 16:21:09
463
原创 vue组建创建之后公共引入，不用每个文件内都引入
1.正常情况下单个文件内引入，注册并使用<template> <div id="app"> <HelloWorld msg="Welcome to Your Vue.js App"/> </div></template><script>import HelloWorld from './components/HelloWorld.vue'export default { name: 'App', c
2021-07-19 16:17:01
632
原创 html的meta标签
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> // width 设置viewport宽度，为一个正整数，或字符串‘device-width’ // device-width 设备宽度 // height 设置viewport高度，一般设置了宽度，会自动解析出高
2021-07-14 16:28:25
164
原创 让图文不可复制
-webkit-user-select: none; -ms-user-select: none;-moz-user-select: none;-khtml-user-select: none;user-select: none;
2021-07-14 16:24:46
97
原创 audio元素和video元素在ios和andriod中无法自动播放问题解决
原因： 因为各大浏览器都为了节省流量，做出了优化，在用户没有行为动作时（交互）不予许自动播放；音频，写法一 <audio src="music/bg.mp3" autoplay loop controls>你的浏览器还不支持哦</audio> 音频，写法二 <audio controls="controls"> <source src="music/bg.ogg" type="audio/ogg"></sourc
2021-07-14 16:21:46
571
原创 消除transition闪屏
.css { -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; -webkit-perspective: 1000; }过渡动画（在没有启动硬件加速的情况下）会出现抖动的现象， 以上的 解决方案只是改变 视角 来启动硬件加速的一种方式；启动硬件加速的 另外一种方式： .css { -webkit-transform: tra
2021-07-14 16:17:04
1126
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人