![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
迷茫人生真的
这个作者很懒,什么都没留下…
展开
-
WebSocket协议-Socket.io 客户端API
websocket原创 2022-09-19 17:42:00 · 478 阅读 · 0 评论 -
Redirected when going from “/a“ to “/b“ via a navigation guard
vue-router vue重定向原创 2022-09-17 14:35:05 · 258 阅读 · 0 评论 -
页面触底自动加载 Vue 组件
js触底加载 vue触底加载原创 2022-09-13 18:33:45 · 2667 阅读 · 0 评论 -
Vue路由的页面跳转打开新页面
vue 页面跳转 vue路由打开新页面原创 2022-09-03 13:29:32 · 1111 阅读 · 0 评论 -
vue-cli3 配置全局scss变量
1. 找到vue.config.js文件,如果没有的话,则自己在根目录新建一个即可 2. 在文件内编写如下代码:module.exports = { css: { loaderOptions: { sass: { data: `@import "@/styles/_variable.scss";` } } }}3. 重启项目,即可使用注意:如果编写完以上代码,重启项目后出现这个错误:注意:如果编写完以上代码,重启项目后出现这个错误原创 2021-10-06 17:29:23 · 604 阅读 · 0 评论 -
vue项目打包到服务器报错net::ERR_ABORTED 404 (Not Found)
解决关于vue项目打包后上传到服务器,访问页面报错net::ERR_ABORTED 404 (Not Found)当访问页面时出现以下报错该如何解决?首先需要创建文件然后复制以下代码到vue.config.jsmodule.exports = { publicPath: "./"}...原创 2021-07-09 13:10:37 · 1636 阅读 · 2 评论 -
web防抖、节流的使用
工作中经常会使用到 防抖节流 例如 微信支付等/** * 函数节流 */// 二、函数节流// 定义// 规定在一个单位时间内,只能触发一次函数,如果这个单位时间内触发多次函数,只有一次生效; 典型的案例就是鼠标不断点击触发,规定在n秒内多次点击只有一次生效。 // 实现原理// 其原理是用时间戳来判断是否已到回调该执行时间,记录上次执行的时间戳,然后每次触发 scroll 事件执行回调,回调中判断当前时间戳距离上次执行时间戳的间隔是否已经到达 规定时间段,如果是,则执行,并更新原创 2021-07-06 10:26:45 · 292 阅读 · 0 评论 -
element UI Upload limit 限制 上传文件,第二次后无法上传的坑
主要原因是第一次上传文件后,浏览器还保存着我们已经上传的文件,所以要想继续上传文件,就需要在on-success钩子函数中r通过ef 拿到它的document元素进行清除已经上传的文件<el-upload class="upload-demo" ref="upload" :action="url" :headers="headers"原创 2021-04-25 14:57:06 · 5559 阅读 · 2 评论 -
vue 嵌套路由 子页面给父页面传值 方法!
vm.$emit( eventName, […args] )参数:{string} eventName[…args]触发当前实例上的事件。附加参数都会传给监听器回调。原创 2021-04-25 09:19:52 · 1208 阅读 · 0 评论 -
element中表格表头设置背景色以及居中设置
element中表格表头设置背景色以及居中设置在el-table中设置:cell-style="rowClass":header-cell-style="headClass"在methods中进行如下设置:// 表头样式设置headClass () { return 'text-align: center;background:#eef1f6;'},// 表格样式设置rowClass () { return 'text-align: center;'}...原创 2021-04-19 18:48:31 · 837 阅读 · 0 评论 -
vue router切换过渡效果
/* * @description vue过渡动画 */@charset "utf-8";.fade-transform-leave-active,.fade-transform-enter-active { transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);}.fade-transform-enter { opacity: 0; transform: translateX(-30px);}.fade-t原创 2021-04-17 22:52:47 · 284 阅读 · 0 评论 -
css cursor 禁用 图标 cursor: not-allowed;
css cursor 禁用 图标 cursor: not-allowed;红色圆圈一个斜杠原创 2021-01-10 17:09:48 · 2999 阅读 · 0 评论 -
vue 进度条 组件
<template> <div class="step-face"> <div v-for="(item, index) in stepArray" class="step" :class="index+1>value?'will-step':index+1==value?'doing-step':index+1<value?'complete-step':''" :key="index"> <span class="i...原创 2021-01-10 16:37:34 · 479 阅读 · 0 评论 -
vue中配置scss全局变量
在写项目的过程中,如果用的是scss来编写样式代码,常常需要定义各种变量,例如主题色、主字号之类的,因此我们会把这些变量写到一个单独的_variable.scss文件内,但是每次都要在vue单文件内引入这些变量未免太繁琐了,所以有没有办法可以默认把变量文件作为全局文件进行引入呢?答案是肯定的,可以用下面的方法进行配置,可以根据当前使用的框架和环境来进行方法的选择。 二、使用@vue/cli(即vue-cli3)脚手架时1. 找到vue.config.js文件,如果没有的话,则自己在根目录新建一个即可2原创 2020-12-06 16:53:09 · 1314 阅读 · 1 评论 -
腾讯地图vue
最近在使用腾讯地图api(以下以位置数据可视化API为例),在初建项目之后,按照官网的说法,直接引入再将官网的初始化例子放一个方法在mounted中调用即可看到腾讯地图,但是我引入之后,一直报TMap undefined,在网上搜到一种npm引入地图的方式,但是那个库太老了,没有GL的,别的就没搜到什么有用的东西了(也可能是因为我搜的说法不对),后来一位大佬指点,在控制台console一下window,发现TMap在window里,所以官网上说用TMap的,我都得用window.TMap。后来发现这种外原创 2020-11-18 17:03:52 · 492 阅读 · 0 评论 -
vue项目打包优化(让打包的js文件变小)
通常在一个vue项目中会用到很多插件什么,swiper,axios,vuerouter,vuex,…,那么使用了很多插件势必会造成打包的js文件过大,影响加载速度,造成不好的用户体验,那么我就来讲一件我自己总结打包方式,(让js文件变下)我使用的命令是 vue ui 可视化打包操作进入可视化面板默认情况下,vue-cli 3.0生成的项目,隐藏了webpack配置项,如果我们需要配置webpack需要通过vue.config.js来配置。在项目根目录中创建vue.config.js文件,m原创 2020-09-12 22:04:05 · 4882 阅读 · 1 评论 -
PubSub-js 订阅消息和发布消息的使用
什么是 pubsub?PubSubJS is a topic-based publish/subscribe library written in JavaScript.即 一个利用JavaScript进行发布/订阅的库详细参考概念pubsubjs使用发送消息:PubSub.publish(名称,参数)订阅消息:PubSub.subscrib(名称,函数)取消订阅:PubSub.unsubscrib(名称)具体事例我这里用于Vue中兄弟组件的传值发布消息触发事件订阅消息坑! 记得原创 2020-09-08 22:32:35 · 1146 阅读 · 1 评论 -
vuex存储和本地存储(localstorage、sessionstorage)的区别
1. sessionStorage sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除。用法:储存: 1. 点(.)运算符 sessionStorage.lastname = ‘JSAnntQ’;2. 方括号([ ])运算符 sessionStorage[‘lastname’] = ‘JSAnntQ’;3. localStorage.setItem原创 2020-09-08 16:21:24 · 490 阅读 · 0 评论 -
vue cil 脚手架 实现跨域
请求聚合免费天气接口的时候 请求的时候说跨域可以使用vue proxy 代理1.新建一个vue.config.jsmodule.exports = { lintOnSave: false, devServer:{ open:true, proxy: { //配置跨域 '/api': { target: 'http://v.juhe.cn/weather/index', //这里后台的地址模拟的;应原创 2020-09-08 13:25:56 · 253 阅读 · 2 评论 -
ES6拷贝方法对象拷贝
ES6 中对象拷贝方法:方法一: Object.assign()/ 对象浅拷贝, 复制所有可枚举属性const obj1 = {a: 1};const obj2 = {b: 2};// copy obj1 and obj2 to a new obj;Object.assign({}, obj1, obj2)方法二 :Res参数//等同于方法一, 属于对象浅拷贝const obj1 = {a: 1, b: 2};// obj2 equal obj1const obj2 = {原创 2020-09-04 16:55:11 · 5026 阅读 · 0 评论 -
在使用better-scroll的时候遇到过的错误之一-Can not resolve the wrapperDOM
在使用better-scroll的时候遇到过的错误之一[BScroll warn]: Can not resolve the wrapper DOM. Vue better-scroll[Vue warn]: Error in mounted hook: “TypeError: Cannot read property ‘children’ of undefined”明明已经了DOM节点,为什么还会报错呢????出错的原因很简单------------------------------>你原创 2020-09-03 21:45:35 · 1577 阅读 · 0 评论 -
解决better-scroll导致点击事件失效的原因和解决方法
引入了better-scroll,但是在增加点击事件的时候 ,点击失效原创 2020-09-03 19:50:49 · 885 阅读 · 5 评论 -
vue移动端配置移动端尺寸适配(px2rem)
**什么是postcss-px2rem**postcss-px2rem会将你代码中的px转换为rem使用方法1. 安装npm install postcss-px2rem --save**2. 配置修改vue.config.js(vue-cli3 构建的项目比以前的精简许多,如果没有请在根目录新建vue.config.js文件)**module.exports = { css: { loaderOptions: { css: {},原创 2020-09-01 18:24:02 · 2761 阅读 · 5 评论 -
修改vue/cli项目的标题
在 vue.config.js 中通过如下配置设置页面标题:chainWebpack: (config) => { config .plugin('html') .tap((args) => { args[0].title = 'Custom Title'; return args; });}然后在 html 页面中使用 <%= htmlWebpackPlugin.options原创 2020-08-31 15:52:38 · 1593 阅读 · 0 评论 -
mutation-types:将常量放在单独的文件中,方便协作开发。
刷大佬的源码的时候刷到[FunctionName] (){ … },表示一脸懵逼,查阅资料后知原来如此,记录一波,代码如下: // mutation-types.jsexport const SOME_MUTATION = 'SOME_MUTATION' // store.jsimport Vuex from 'vuex'import { SOME_MUTATION } from './mutation-types' const store = new Vuex.Store({原创 2020-08-29 01:39:24 · 1967 阅读 · 0 评论 -
vue-router的模糊匹配和精确匹配
场景:最近在做的这个项目有一个场景是个人中心页面,有几个嵌套的二级路由,其中有一个订单的子路由下面还嵌套着几个三级路由。这里二级路由是通过点击router-link进行点击跳转,三级路由是通过二级路由中的查看详情等按钮进入的。问题就在这里当跳转到三级路由的时候对应的二级路由的router-llink如何保持激活样式。router.js文件中的三极路由的path属性中要写入二级路由的path属性path: '/order',name: 'order',component: resolve =>原创 2020-08-27 18:40:22 · 4161 阅读 · 1 评论 -
vue-router路由中 this.$router 与this.$route区别
his.router与this.router与this.router与this.route 两者相差 一个 r 但是差距蛮大的 一开始没注意这些 细节 数据没获取到 也没有报错 嫩是 耽误了一会时间 寻找this.$router 实际上 就是全局 路由对象 任何页面 都可以 调用 push(), go()等方法this.$route 表示当前正在用于跳转的路由器对象,可以调用其name、path、query、params等属性;...原创 2020-08-27 17:07:59 · 314 阅读 · 0 评论 -
vue-router-link选择样式设置
第一种:在router-link组件上 添加属性 active-class=‘ative’在css中设置 .actve样式即可第二种 在css中写样式 router-link-exact-active<template> <div id="app"> <div class="nav"> <router-link to='/home'>首页</router-link> <router-link to='/abou原创 2020-08-27 13:09:16 · 9614 阅读 · 2 评论 -
vue脚手架编译成功自动打开设置
在脚手架根目录创建一个vue.config.jsmodule.exports = {devServer:{ open:true}}原创 2020-08-27 13:03:16 · 388 阅读 · 1 评论 -
关于 Vue 引用 animate.css 动画 不起作用的问题(版本兼容性)神坑
1. Vue 官网引用的是 animate.css 3.5 版本<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">2. 不能引用 animate.css 最新版本 例如:(4.0)<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/原创 2020-08-24 01:49:16 · 2027 阅读 · 6 评论 -
vue生命周期
一、vue生命周期有哪些?beforeCreate created 创建前 创建后beforeMount mounted 挂载前 挂载后beforeUpdate updated 更新前 更新后beforeDestroy destroyed 销毁前 销毁后二、使用了keep-alive 会多两个生命周期activated deactivated三、对生命周期的理解创建前 ...原创 2019-09-25 19:24:27 · 230 阅读 · 0 评论 -
vue使用fastclick
1.下载fastclicknpm install fastclick2.在main.js中引入import FastClick from ‘fastclick’if ('addEventListener' in document) { document.addEventListener('DOMContentLoaded', function() { Fast...原创 2019-09-23 16:49:33 · 370 阅读 · 0 评论 -
vue-watch 深度监听!!
watch:{} 对象,可监听数据,数据发生变化, 处理函数目的: watch虽可监听,但只是浅监听,只监听数据第一层或者第二层,何为第二层?let obj = {name: ‘xx’, child: {age: 11}};child之后的值就为第二层或者深层实现目标: 如果 要监听一个对象中的属性,属性最高也是第二层了,watch可能监听不到,所有要使用深度监听:watch: {...原创 2019-08-30 15:48:32 · 269 阅读 · 0 评论 -
vue点击其它区域隐藏
vue点击其它区域隐藏mounted() {//点击颜色其它区域隐藏document.addEventListener(‘click’, this.handleDocumentClick);document.addEventListener(‘touchstart’, this.handleDocumentClick);},methods:{handleDocumentClick(e...原创 2019-08-22 15:45:58 · 551 阅读 · 0 评论