![](https://img-blog.csdnimg.cn/20190918140053667.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue
vue
前端酱紫
这个作者很懒,什么都没留下…
展开
-
vue纯手写思维导图,拒绝插件(cv即用)
左侧A盒子,右侧F盒子用flex布局B/C/D竖着排列,右侧3个div分别用伪元素分别做3根横线,F盒子设置。竖线,这样一拼接就感觉像是一个思维导图了,理论先这样,但是还没有想到B盒子的左侧横线和F盒子竖线交叉之后,上面圆圈多余的部分怎么去除。有这么个需求,按照层级关系,把表格放在思维导图上,我第一时间想到用插件,但是找了好久都没有找到比较合适的插件,决定自己手写一个。模拟数据 带有层级关系的格式,id是唯一的,这样做为了后期可能操作表格的时候方便找到唯一的表格。刚开始的做法是直接设置子集的。原创 2022-12-02 12:43:35 · 10597 阅读 · 9 评论 -
vue自定义指令 v-longpress长按触发方法
新建一个vue2项目,在components里面新建一个longpress.vue文件设置按钮 指令,3000是毫秒参数-- 单位毫秒 : 3000 -- > < button v - longpress : 3000 = "longpress" > 长按 < / button > < / div > < / template > < script > export default {return {};console . log("长按指令生效--" , e);原创 2022-12-02 09:58:30 · 1558 阅读 · 0 评论 -
vue自定义指令 v-debounce 防抖
使用场景:点击查询按钮 或者 点击提交保存按钮 的时候点击次数过多,会多次提交,为了避免这种情况发生,我们可以做个防抖,点击一次后 第二次需要间隔一定的时间才能再次点击。新建一个vue2项目,以下代码cv即可使用< template > < div > < button v - debounce = "debounceClick(1000)" > 防抖 < / button > < / div > < / template > < script > export default {原创 2022-11-30 23:58:11 · 2759 阅读 · 0 评论 -
vue自定义指令 v-copy 复制
新建一个项目 按照以下方式把对应的文件改造下就可以了 (cv即食)在vue 的项目里 当我们想直接在标签上加入。把自定义指令引入到main.js里面。就可以复制想要复制的内容该怎么做?vue自定义指令 copy。原创 2022-11-30 23:49:23 · 1373 阅读 · 0 评论 -
VScode 设置 vue代码片段
在tab一下就能把初始化代码框架搭建出来。在xxx.vue空文件里输入。VScodevue单页代码片段。原创 2022-07-19 00:00:07 · 734 阅读 · 0 评论 -
Element-ui的date日期时间组件的bug 报错 prop‘s value. Prop being mutated: “placement“
今天本来想用下Element-ui的date日期时间组件,居然发现使用date组件后一直报错,大概意思是和props相关,但是我的页面组件也没有props,我去看了一下源码发了问题所在,先看报错吧 很重要的一段:`use a data or computed property based on the prop's value. Prop being mutated: "placement" `...原创 2022-07-17 20:44:26 · 3712 阅读 · 3 评论 -
element ui dropdown下拉 复选框+全选+搜索功能 组件 (开箱即食)
dropdown下拉 复选框+全选+搜索功能 组件可以传入默认值默认选中可以全选可以搜索点击确定把选中的值抛出原创 2022-07-12 15:29:41 · 7121 阅读 · 1 评论 -
vue项目 element表格数据行转列数据互转
后台返回的格式一个人名里面带有这个人的所有信息,我们需要数据转化(俗称行转列 ) 这个平时可以用在时间日期上比较多,这个案例只是把这个写法记录下来原创 2022-07-01 01:11:16 · 3294 阅读 · 0 评论 -
vue 里面 new Blob 流文件下载 完整步骤 直接享用
流文件下载 封装成方法,在utils文件夹下:后期使用直接 引入就可以直接使用@/utils/stream.js export default function ({ url, // 请求地址 method, // 请求类型 data, // 请求参数 fileName, // 请求名字 suffix // 文件后缀 }) { // axios请求 axios({ url, method,原创 2021-12-14 14:29:31 · 1416 阅读 · 0 评论 -
vue动态路由加载的思路
vue动态路由加载的思路:前端把页面的路由路径给后台,路径前面尽量带 "@/"比较好,让后台根据不同的角色权限,返回给前端指定的动态路由列表,请求到路由列表后,使用 “addRoutes” 添加到路由里去。title表示中文,path表示跳转的路由,这样路由菜单就有了案例:home.vue<template> <div> <button @click="onlogin">登录按钮</button> </div></t原创 2021-10-19 17:52:48 · 564 阅读 · 0 评论 -
手写 vue 自定义指令(directive) v-loading 加载,项目实战
手写 vue 自定义指令 v-loading目标效果:在vue项目的标签里面使用 v-loading="true" ,如同element-ui里面使用v-loading一样 会展示loading 效果。在这里我做两个laoding效果:一个全屏的loading效果,用于进入页面的时候使用loaidng一个局部的load 效果,用户分页或者加载部分内容的时候load效果目录结构> 多余的文件夹就不展示了> loading里面的5个文件创建好,把代码复制进去,然后在ma原创 2021-10-11 16:52:42 · 2318 阅读 · 0 评论 -
vuex modules 怎么使用?
vuex modules 怎么使用?目录结构:a.js vuex 模块b.js vuex 模块index.js vuexv.vue 结果内容显示src\store\modules\index.jsimport Vue from 'vue';import Vuex from 'vuex';import numbers from './a'import count from './b'Vue.use(Vuex);export default new Vuex.Store({原创 2020-06-07 02:40:56 · 514 阅读 · 0 评论 -
微信小程序 修改 顶部电量 时间的颜色
微信小程序 修改 顶部电量 时间的颜色 onShow: function () { wx.setNavigationBarColor({ frontColor: '#ffffff', backgroundColor: '#ffffff' }) },原创 2021-09-23 11:58:07 · 1011 阅读 · 0 评论 -
2021 秋季 最新前端面试题
promise 表达的导入导出 容易搞混淆es6 classnodejs Buffer缓冲区reactvue3 和vue2有什么不同 ?优缺点试什么 ?MVVM 表达自定义写个v-loadingwebpack原理vite原理防抖节流重绘重排this.$nextTick原理1. HTTP 常用的请求方式,区别和用途?GET: 发送请求,获取服务器数据POST:向 URL 指定的资源提交数据PUT:向服务器提交数据,以修改数据HEAD: 请求页面的首部,获取资源的.原创 2021-09-17 22:40:15 · 301 阅读 · 0 评论 -
vue 项目 下载图片地址 和图片名称
vue 项目 下载图片地址 和图片名称引入:import { downloadImage } from '@/utils/downloadImg'使用:downloadImage(imgurl, imgname)export const downloadImage = (imgsrc, name) => { // 下载图片地址和图片名 var image = new Image() image.setAttribute('crossOrigin', 'anonymous') ima原创 2021-09-16 10:16:59 · 800 阅读 · 0 评论 -
element Upload 上传文件只能上传一次 ,再次点击上传无反应的问题的坑
element Upload 上传文件只能上传一次 ,再次点击上传无反应的问题的坑今天在开发的时候,文件上传都没有问题,但是修改文件数据后,再次上传图片就无反应了,导致整个问题的原因是因为你没有清除当前 fileList,导致它一直保存这你第一次上传文件的信息,只要你把他一刀切掉就好了!那么问题来了,应该怎么清除呢!所以要想继续上传文件,就需要在on-success钩子函数中通过ef 拿到它的document元素进行清除已经上传的文件 看下面的代码: <el-upload class=原创 2021-09-07 09:58:10 · 8711 阅读 · 3 评论 -
input输入框输入数值检测 只能输入数字 ,非数字离开输入框后会清除
input输入框输入数值检测 只能输入数字 ,非数字blur后会清除 // blur 事件 Blur(nums) { this.ruleForm.count = this.blurEvent(nums); }, // 修改事件 Input(val) { let num = this.changeEvent(val); this.ruleForm.count = num; }, // blurEvent(num原创 2021-09-07 09:50:16 · 705 阅读 · 0 评论 -
vue里面提到的挂载是什么意思?
你可以理解为有一堆描述dom的数据需要整理(虚拟dom,其实就是一堆对象储存了一堆数据),然后这些数据用js的API,比如createElement,创造出dom,这个过程是挂载前的动作。 创造出的dom还没有被使用,仅仅在内存中,需要“挂载”,然后你最外层是不是有一个叫app的id的dom?然后挂载就是document.querySelector(‘app’).appendChild(dom),就完成挂载啦。...原创 2021-08-15 23:24:54 · 3990 阅读 · 1 评论 -
SSR服务端渲染 轻便型
SSR服务端渲染 非常易懂主要内容:vue服务端渲染安装vue cli31、首先卸载旧版本(如果事先安装了vue cli1.x或者vue cli2.x,要先卸载掉)npm uninstall vue-cli -g2、安装Vue clinpm install -g @vue/cli3、安装Vue2.xxvue create demo 选择2.x4、安装 express、vue-server-renderernpm install express vue-server-render原创 2021-08-12 23:31:03 · 165 阅读 · 0 评论 -
2021 最新 webpack 面试题
webpack打包原理将所有依赖打包成一个bundle.js,通过代码分割成单元片段按需加载什么是webpack,与gulp,grunt有什么区别webpack是一个模块打包工具,可以递归地打包项目中的所有模块,最终生成几个打包后的文件。区别:webpack支持代码分割,模块化(AMD,CommonJ,ES2015),全局分析webpack 和 gulp 的区别?webpack是一个模块打包器,强调的是一个前端模块化方案,更侧重模块打包,我们可以把开发中的所有资源都看成是模块,通过lo原创 2021-07-04 00:45:08 · 1982 阅读 · 0 评论 -
import require module.exports export....
import require module.exports export…index.vue<script>import list from "./data";import { arr, str, btn } from "./data";var res = require("./result");var fun = require("./fn");export default { data() { return {}; }, mounted() {原创 2021-05-31 23:41:05 · 104 阅读 · 3 评论 -
VUE项目配置ESlint后一些报错解决方式
VUE项目配置ESlint后一些报错解决方式一看就会的超详细教程module.exports = { root: true, 'env': { // 浏览器全局变量 'browser': true, // 启用 ES6 语法支持以及新的 ES6 全局变量或类型 'es6': true, // jQuery 全局变量 'jquery': true }, 'extends': [ 'eslint:recommended', '原创 2021-05-31 23:02:40 · 980 阅读 · 0 评论 -
vue项目 报错 error ‘xxx‘ is assigned a value but never used
vue项目里出现 这样的错误Failed to compile../src/components/edit.vueModule Error (from ./node_modules/eslint-loader/index.js):C:\Users\link\Desktop\elem\src\components\edit.vue 12:9 error 'defaultdata' is assigned a value but never used no-unused-vars✖ 1原创 2021-05-31 22:47:58 · 23262 阅读 · 5 评论 -
vue组件的写法顺序,按照这个来,
vue组件的写法顺序,按照这个来componentspropsdatafiltercomputedwatchbeforeCreatecreatedbeforeMountmountedactiviteddeActivitedbeforeUpdateupdatedbeforeDestorydestoryedmetods原创 2021-05-27 19:19:19 · 417 阅读 · 1 评论 -
diff算法知多少
diff算法1.只比较同一层级,不跨级比较2.key相同:就认为是相同节点,继续深度比较,3.key不同:不继续深度比较4.比较签名:如果不同直接删除标签名,不会深度比较3.标签名相同:继续深度比较...原创 2021-04-27 20:38:13 · 542 阅读 · 0 评论 -
jq视图更新和vue视图更新
jq时代:DOM操作 -》 视图更新vue时代:数据改变 -》虚拟DOM(计算)-》 操作真实的DOM -》 视图更新虚拟DOM就是通过js模拟dom结构原创 2021-04-27 20:20:46 · 298 阅读 · 0 评论 -
监听数组变化
03-监听数组变化<!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"> <原创 2021-04-27 18:42:19 · 488 阅读 · 0 评论 -
02-将对象所有属性变为可侦测
02-将对象所有属性变为可侦测<!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">原创 2021-04-27 18:41:30 · 90 阅读 · 0 评论 -
01-Object.defindProperty属性获取监听修改
01-Object.defindProperty属性获取监听修改<!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-原创 2021-04-27 18:40:20 · 190 阅读 · 0 评论 -
小程序页面跳转bug优化记录,getCurrentPages 奇迹妙用解决问题
团餐地址跳转bug优化记录需求描述:我同事A做的是团餐页面,我做的是团餐地址管理页面,在团餐页面点击收货地址 进入我的地址管理列表页面选择地址后把地址信息address带到团餐页面,点击返回 回到首页。过程1:我和A说我想把带过去的数据存到localstorage里面去,在使用 wx.navigateTo 跳转到团餐页面,在团餐页面onShow 里定义一个方法去检查 localstorage里面有没有我存的数据 address,有的话读取localstorage的address 重新给收货地址赋值,没原创 2021-04-22 20:00:21 · 646 阅读 · 0 评论 -
vue 瀑布流 页面写法思路
vue 瀑布流 页面写法思路请求到数据后把数据按照奇数偶数分成A,B两列,A列放在左边盒子,B列放在右边盒子,分页请求到新数据后,重新按照这个思路分成两列放在左右就行了。可能会遇到某一边多出一项,此时就要做一个判断了分页完了后,两边高度相减要是大于一项的高度,就把最后一项放在另一边...原创 2021-04-01 09:17:38 · 235 阅读 · 0 评论 -
js休眠程序,延时程序
js休眠程序,延时程序,可以延时请求 <script> sleep1 = (time = 1000) => { return new Promise((resolve) => { setTimeout(() => { resolve() }, time) }) }原创 2021-03-25 11:54:13 · 178 阅读 · 0 评论 -
使用 vue-waterfall2插件 vue 瀑布流
一、安装 vue-waterfall2`npm install --save vue-waterfall2二、在main.js里面引入import waterfall from 'vue-waterfall2'Vue.use(waterfall)目录结构:waterfall compontens load.vue index.vue index.lessIndex.vue<template> <div class="container_wat原创 2021-03-22 09:00:48 · 1103 阅读 · 0 评论 -
vue横屏分页加载 vue 分页 左右滑动分页 横着分页
vue横屏分页加载<template > <!-- 5.钢化膜 --> <div class="steelfilm"> <div class="steelfilm-top"> <div class="title"> <img src="@/assets/img/nl-member-privilege/title-left.png" alt=""原创 2021-02-27 23:00:55 · 1940 阅读 · 2 评论 -
vue列表项吸顶 js+css两种 骚操作
先看下想要的效果,在列表里 滑动到哪个日期的时候,哪个日期就吸顶用js的方法思路,获取每一项item的底部距离顶部的高度,把所有的高度放在一个数组里面,在去循环比对,看我们滑动的距离在数组的哪个区间里,在哪个区间就展示展示那个日期,上代码:<template> <div class="box"> <div class="titleTimeStyle">日期 {{ titleTime }}</div> <div class="l原创 2021-01-11 12:55:30 · 560 阅读 · 0 评论 -
vue小程序项目 pdf下载解决方案
vue小程序项目 pdf下载解决方案,过程:先说结果:直接把pdf下载链接给到用户就行了,小程序里面下载真心不好下载,京东微信小程序 也不能下载只能查看和发送邮箱1.iframe标签,未配置域名无法打开非业务域名的地址,让后端配置 小程序下载域名,2.配置域名后 ios可以看 安卓只能下载不能看3.pdfjs-dist插件 也是 ios可以看 安卓只能下载不能看4.pdf-vue插件还不能渲染5.在h5通过navigateTo跳转传pdf链接 带到小程序里面,小程序页面加载的时候使用小程原创 2020-12-29 23:45:31 · 798 阅读 · 0 评论 -
vue自定义指令 v-directives
vue自定义指令 v-directives基于 vue 的自定义指令集合,包含复制粘贴指令 v-copy长按指令 v-longpress输入框防抖指令 v-debounce禁止表情及特殊字符 v-emoji图片懒加载 v-LazyLoad权限校验指令 v-premission实现页面水印 v-waterMarker拖拽指令 v-draggablev-copy需求:实现一键复制文本内容,用于鼠标右键粘贴。思路:动态创建 textarea 标签,并设置 readOnly 属性及移原创 2020-12-21 09:09:13 · 766 阅读 · 0 评论 -
vue项目里使用less 方法
1、首先使用npm下载依赖;npm install --save less less-loader2、安装完成后检查是否安装成功;lessc -v引用方法1、在main.jsimport` `less from ``'less'Vue.use(less)2、然后创建一个.vue文件我们开始玩耍了;注意:独立的vue文件需要引入less开始使用1、less中变量的使用;在less,允许我们使用以变量的形式来定义,定义方式:@k:v; 使用方式:@k;此时就会有一个宽100px原创 2020-12-20 23:24:46 · 1221 阅读 · 0 评论 -
用css写进度条
用css写进度条我们平时写进度条一般是一个父div包裹一个子div,用js控制子div的宽度 实现进度条,我们现在可以用css简单实现进度条了。代码如下:在vue项目里咱们只需要控制数字就行了,非常简单方便<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,原创 2020-12-20 15:28:44 · 6884 阅读 · 5 评论 -
html2canvas 生成图片 以及出现白边问题解决办法 生成海报
html2canvas 生成图片 以及出现白边问题解决办法:我在写demo的时候,pc端调试正常,但是到了移动端图片底部就会出现 一条白边,我的解决办法就是:backgroundColor: “#ff2e46”, 设置背景色就行了。整体代码实现思路:加载的时候判断是pc还是移动端:pc端展示保存按钮,移动端隐藏保存按钮。然后把要变成图片的页面的id (box)传到 html2canvas 里面,html2canvas会把box的页面转化为base64地址,重新赋值img,与此同时要把我们自己设置原创 2020-12-05 21:45:16 · 2482 阅读 · 0 评论