- 博客(70)
- 收藏
- 关注
RSS订阅
原创 promise加强
await就是一个等待Promise对象产出结果的操作手段 功能就是暂停async函数的执行，等待Promise处理后的结果。excutor有两个参数---> 一个是resolve 一个是reject ---->两个参数都是函数 都是可以执行的。async 函数是通过一个隐式的Promise返回一个pending状态 有async必须有await 反之则可以。async的意思是当前这个异步函数与同一作用域下的程序是异步关系。excutor执行器是在new Promise的时候调用执行的。
2022-09-21 14:03:41
426
原创 vue适配h5 vw配置
vue项目创建好之后，执行下列步骤安装postcss-loader要实现使用vw来实现移动端的适配，我们先需要安装postcss但cli4已经自带有postcss了所以我们不用再装了，可以直接安装postcss-loader就好了，如果是cli4以下的需要这一步，可以vue -V查看版本npm i postcss-loader --save-dev然后安装postcss-px-to-viewport实现vw适配就是要利用这么一个插件：postcss-px-to-viewport。它可以将
2022-05-09 10:30:35
685
2
原创 系统滚动条样式优化
::-webkit-scrollbar 滚动条整体部分 ::-webkit-scrollbar-thumb 滚动条里面的小方块，能上下左右移动(取决于是垂直还是水平) ::-webkit-scrollbar-track 滚动条的轨道(里面装有thumb) ::-webkit-scrollbar-button 滚动条轨道两端的按钮，允许通过点击微调小方块的位置 ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分(除去) ::-webkit-scrollbar..
2022-05-05 09:52:06
816
原创 简单易懂的promise
promise有三种状态；分别为:pending,resolved,rejected:,初始状态为pending,而他又可以变为其他两种状态；//先创建一个promise函数 methods:{ promiseTest(){ //创建一个promise const p1=new Promise((resolve,reject)=>{ }) console.log(p1,'
2022-03-17 16:12:13
426
原创 手写的几个鼠标移上按钮的特效
<template> <div class="btns"> <button class="btn1">按钮一 <span class="mask mask1"></span></button> <button class="btn2">按钮二 <span class="mask mask2"></span></button> <button c...
2022-03-17 14:58:14
564
1
转载 移动端放大缩小
data() { return { displacement: { scale: 1 } }}, mounted() { // this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行 let that = this; this.$nextTick(() => { // 获取放大或缩小的区域DOM let matrix_box = document.querySelector.
2022-02-09 15:14:06
407
原创 封装一个防抖函数和一个节流函数
防抖函数和节流函数在我们平时开发的时候很常用，像点击请求这个常见的操作里面就需要使用到防抖函数，防止多次重复请求；首先要弄明白防抖和节流是什么意思 写起来就比较得心应手了；防抖：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。节流：在事件被触发n秒内，不管你触发多少次，只执行一次函数。看到这个定义的时候肯定想到了用setTimeout来写那就来写吧先创建一个防抖的js叫debounce.js防抖有两种情况，一种是触发后立即执行，还有一种是触发之后不是立即执行的有
2021-12-13 13:45:58
1322
原创 vue的自定义指令
vue自带的v-for和v-if指令经常用也很好用，但是vue也可以自定义一些好用的指令；一下也想不到什么简单的例子就随便写一点：写一个点击切换样式的：基本就是这样根据你点击时获取对应的index，再赋值给中间变量curIdx，然后再动态改变class来实现样式转换，这是常见的写法，那我用自定义指令来写一下这个：首先我使用自定义指令肯定要先引入，再注册，再使用 ，如下：（这个指令引入路径错了 不想截图了 懒）这时候保存会报错，因为我这边还没写这个changeStyle,...
2021-12-08 18:07:04
825
原创 filter的使用
最近有点闲，想想写点什么。。。。写一点vue的filter过滤器的使用想一个可以使用过滤器的场景。写一个表格，里面有几组数据，循环出来，给数组一个状态，根据这个状态来显示不同的东西以前的想法是在获取到数据的时候处理数据把数据改成状态 那样也可以达到想要的需求 但是有了过滤器 会让你的代码更高级也更方便先来个数据吧首先文件夹里面创建一个filter文件夹，里面创建个filter.js，就是要使用的过滤器了，再里面创建个order.js里面是要展示的数据，暴露出来...
2021-11-23 12:00:09
689
原创 vue的mixin提升
刚写想了想这个mixin实现的功能可以用组件完成 依托vuex其实也能实现 但是为什么要有mixin这个东西呢？于是百度了一下有了一点总结mixin与vuex的区别：Vuex:主要是做组件的状态管理的，他里面的变量和参数在每个组件都可以修改和使用，在其他地方进行了修改之后，其他组件里面的变量值也会发生改变。mixins:可以用来定义共用的变量，在每个组件中使用，引入组件中之后，各个变量是相互独立的，值的修改在组件中不会相互影响。mixin与公共组件的区别：组件：在父组件中引入子组件，等于
2021-11-22 16:50:24
916
2
原创 vue的mixin的简单使用
1新建一个libs文件夹 再建个myui文件夹 里面写上个index.js mixin导出2新建一个vue的文件里面就写个Button 写几种不同的class样式3在index.js也就是mixin里面引入这个Button并注册4因为这个BUTTON样式要可以动态改变，所以这个BUTTON的class不能写死写成如下的样式5在相关页面引入引入这个组件并用mixins注册，6使用引入的组件修改个btnstyle属性看对不对样式改变了，是想要...
2021-11-17 16:48:57
1033
1
转载 温习一下JavaScript
1. JavaScript简介 JavaScript 最开始是专门为浏览器设计的一门语言，但是现在也被用于很多其他的环境。 如今，JavaScript 已经成为了与 HTML/CSS 完全集成的，使用最广泛的浏览器语言。 有很多其他的语言可以被“编译”成 JavaScript，这些语言还提供了更多的功能。建议最好了解一下这些语言，至少在掌握了 JavaScript 之后大致的了解一下。 2. 变量我们可以使用 var、let 或 const 声明变量来存储数据。 le
2021-10-09 09:39:37
219
原创 Vue最全知识点，面试必备 覆盖vue3.0
基础篇说说你对MVVM的理解Model-View-ViewModel的缩写，Model代表数据模型，View代表UI组件,ViewModel将Model和View关联起来 数据会绑定到viewModel层并自动将数据渲染到页面中，视图变化的时候会通知viewModel层更新数据了解mvc/mvp/mvvm的区别Vue2.x响应式数据/双向绑定原理Vue 数据双向绑定主要是指：数据变化更新视图，视图变化更新数据。其中，View变化更新Data，可以w通过事件监听的方式来实现，所以 V...
2021-09-30 15:13:24
3039
原创 前端进阶必看
1 promise先思考？promise 是什么?异步回调解决方案promise 如何保证异步执行完了再去执行后面的代码?使用 then 关键字 then 接受两个参数 第一个参数（函数）会在 promise resolve 之后执行 第二个参数（函数）会在 promise reject 之后执行为什么能在异步事件执行完成的回调之后再去触发 then 中的函数?引入事件注册机制(将 then 中的代码注册事件 当异步执行完了之后再去触发事件)怎么保证 promise 链式调用...
2021-09-30 15:10:00
65
原创 css的提升
大哥那复制过来的1.介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？相关知识点：（1）有两种盒子模型：IE盒模型（border-box）、W3C标准盒模型（content-box）（2）盒模型：分为内容（content）、填充（padding）、边界（margin）、边框（border）四个部分IE盒模型和W3C标准盒模型的区别：（1）W3C标准盒模型：属性width，height只包含内容content，不包含border和padding（2）IE盒模型
2021-09-30 14:52:36
219
原创 如何让你的 JS 写得更漂亮
1. 按强类型风格写代码JS是弱类型的，但是写代码的时候不能太随意，写得太随意也体现了编码风格不好。下面分点说明： （1）定义变量的时候要指明类型，告诉JS解释器这个变量是什么数据类型的，而不要让解释器去猜，例如不好的写法：var num, str, obj;声明了三个变量，但其实没什么用，因为解释器不知道它们是什么类型的，好的写法应该是这样的：var num = 0, str = '', obj = null;定义变量的时候就给他一个默认值，这样不仅..
2021-09-30 14:47:07
138
原创 vue面试题
1.vue优点？答：轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十 kb ； 简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习； 双向数据绑定：保留了 angular 的特点，在数据操作方面更为简单； 组件化：保留了 react 的优点，实现了 html 的封装和重用，在构建单页面应用方面有着独特的优势； 视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作； 虚拟DOM：dom 操作是非常耗费性能的， ...
2021-09-30 14:44:37
63
原创 22个ES6面试知识点汇总！
01、问：ES6是什么，为什么要学习它，不学习ES6会怎么样?答：ES6是新一代的JS语言标准，对分JS语言核心内容做了升级优化，规范了JS使用标准，新增了JS原生方法，使得JS使用更加规范，更加优雅，更适合大型应用的开发。学习ES6是成为专业前端正规军的必经之路。不学习ES6也可以写代码打鬼子，但是最多只能当个游击队长。02、问：ES5、ES6和ES2015有什么区别?答：ES2015特指在2015年发布的新一代JS语言标准，ES6泛指下一代JS语言标准，包含ES2015、ES2016、ES.
2021-09-30 13:37:36
370
原创 时间戳转时间到秒
代码如下可直接复制happenTimeFun(num){//时间戳数据处理 let date = new Date(num); //时间戳为10位需*1000，时间戳为13位的话不需乘1000 let y = date.getFullYear(); let MM = date.getMonth() + 1; MM = MM < 10 ? ('0' + MM) : MM;//月补0 let d ..
2021-09-24 10:44:53
1286
原创 将要上传的图片或文件转换成base64的格式
//html部分<div class="input_in"> <button class="top" @click="click_uploads"> <a-icon class="icon" type="upload" />上传文件 </button> <input type="file" multiple .
2021-09-02 15:49:37
697
原创 vue-qr 二维码 批量 导出
首先我们需要安装三个插件"jszip"//zip打包"file-saver"//文件保存"vue-qr"//二维码完整代码如下:src/components/base/qrcode.vue<template> <div> <div v-for="(item, index) in qrCodeData" :key="index"> <vue-qr :id_name="'qcode_' + index"
2021-08-09 09:38:00
724
4
原创 利用vue-qr生成二维码 并且完成下载
第一步安装npm install vue-qr --save引入并注册生成二维码的地方text是二维码生成的内容下载的方法
2021-08-08 21:41:03
427
原创 vue的watch监听
watch监听数据变化使用这个 属性，可以监视 data 中指定数据的变化，然后触发这个 watch 中对应的 function 处理函数该方法可以不用绑定事件<body> <div id="app"> <input type="text" v-model="firstname">+ <input type="text" v-model="lastname">= <input type="text" v-mo
2021-07-06 17:11:53
59
原创 swiper的使用（VUE）
安装（指定版本）npm install vue-awesome-swiper@3 --save-dev组件中使用版本: [email protected]，[email protected]<template> <div class="recommendPage"> <swiper :options="swiperOption" ref="mySwiper"> <swiper-slide>I'm Slide 1</swip
2021-06-29 16:03:11
547
原创 移动端禁止双击放大事件
// 禁用双击放大var lastTouchEnd = 0;document.documentElement.addEventListener('touchend', function (event) { var now = Date.now(); if (now - lastTouchEnd <= 300) { event.preventDefault(); } lastTouchEnd = now;}, { passive: false
2021-06-29 10:02:35
416
原创 reduce用法解析
reduce()能够处理当做for循环，有时候foreach也能够处理，还可以筛选删除，属实逼格有点高1.语法arr.reduce(callback,[initialValue])reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调用 reduce 的数组。callback （执行数组中每个值的函数，包含四个参数） 1、previousValue （上一次调用回调返回的值，或
2021-06-25 10:05:13
465
原创 vue路由跳转时加动画
<transition name="fade"> <router-view /> </transition>.fade-enter-active, .fade-leave-avtive { transition: opacity 1s}.fade-enter, .fade-leave-to { opacity: 0}
2021-06-23 09:16:47
444
原创 vue的动态组件/递归组件/函数式组件
动态组件场景:做一个 tab 切换时就会涉及到组件动态加载<component v-bind:is="currentTabComponent"></component>但是这样每次组件都会重新加载,会消耗大量性能,所以 就起到了作用<keep-alive> <component v-bind:is="currentTabComponent"></component></keep-alive>这样切换效果没有动画效果,
2021-06-18 11:48:13
384
原创 v-for循环静态路径
当v-for循环静态路径是 虽然能够循环出路径 但是图片显示不出来 是因为打包的时候webpack将其路径打包成字符串 所以在渲染路径时候应该引入require,例如： { key:4, url:require('../../assets/nongye.jpg'), },这样就能够识别出来是图片引用路径...
2021-06-02 14:42:14
163
原创 Vuex使用详解
在SPA单页面组件的开发中 Vue的vuex和React的Redux 都统称为同一状态管理，个人的理解是全局状态管理更合适；简单的理解就是你在state中定义了一个数据之后，你可以在所在项目中的任何一个组件里进行获取、进行修改，并且你的修改可以得到全局的响应变更。下面咱们一步一步地剖析下vuex的使用:首先要安装、使用 vuex首先在 vue 2.0+ 你的vue-cli项目中安装 vuex :npm install vuex --save然后 在src文件目录下新建一个名为store的文件夹，为
2021-06-02 14:02:05
307
1
转载 vue组件封装指南
vue组件三要素props参数slot定制插槽event自定义事件基本用法在使用 vue-cli 创建的项目中，组件的创建非常方便，只需要新建一个 .vue 文件，然后在 template 中写好 HTML 代码，一个简单的组件就完成了 一个完整的组件，除了 template 以外，还有 script和 style<template> <div class="headComponent"> 子组件{{{myData}} </div>&
2021-06-01 10:15:29
3259
2
原创 根据页面滚动多少来判断是否展示相关界面（vue）
首先创建一个函数handleScrollhandleScroll(){ //距离页面的高度 var scrollTop =window.pageXOffset || document.documentElement.scrollTop || document.body.scrollTop console.log(scrollTop,'scrollTop'); if(scrollTop>=550){ //判断是否展示的条件 还可以是一些其他条件
2021-05-31 14:38:06
170
原创 路由跳转不是在页面的最上面（vue）
在路由设置里面 也有可能在main.jsconst router = new VueRouter({ routes: routers, //判断路由跳转之后是否是发生滚动 如果发生了滚动返回到最上面 scrollBehavior(to, from, saveTop){ if (saveTop) { return saveTop; } else { return {x: 0, y: 0} }}});...
2021-05-31 14:26:43
233
原创 配置axios
1 vue安装axiosnpm install axios -S2 . 在main.js进行全局引入 import axios from 'axios' Vue.prototype.$axios = axios //将axios绑定到vue的原型上配置跨域 在根目录下vue.config.js里边（没有自己去创建） module.exports = { publicPath: './', //配置跨域请求 devServer: { open: true, //是否自动
2021-05-26 14:03:51
274
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人