技术Ren-VUE
vue的应用
JessicaLilyAn
热爱技术的小女子一枚,一直成长,梦想成为大牛。
展开
-
Uncaught (in promise) Error: Avoided redundant navigation to current location
vue路由报错: Uncaught (in promise) Error: Avoided redundant navigation to current location 原因: 多次点击跳转同一个路由是不被允许的 解决办法: 在引入vue-router的js文件里加上如下代码即可://push const VueRouterPush = Router.prototype.push Router.prototype.push = function push (to) { ..转载 2020-12-07 09:31:44 · 918 阅读 · 0 评论 -
Vue子父组件方法互调
父组件调用子组件方法:1.设置子组件的ref,父组件通过this.$refs.xxx.method_name(data)调用子组件方法,data参数可选父组件:<template> <div> <h1>我是父组件</h1> <child ref="childname"></child> </div></template><script> import child转载 2020-09-22 11:49:49 · 210 阅读 · 0 评论 -
使用vue + less 实现简单换肤功能
做的换肤效果比较简单,只是顶部导航背景色的改变。下面是效果图。首先,先说一下我最初的思路。我最初的想法是使用less定义变量,然后通过js来切换变量,通过切换的变量来达到换肤的效果。我先新建了一个 theme.less文件,代码如下: @theme:@themea; @themea:pink; @themeb:blue; @themec:gray;如我最开始的想法,应该是通过点击事件来改变变量 @theme 的值。我用了element-u...转载 2020-05-29 10:53:03 · 981 阅读 · 0 评论 -
vue分别打包测试环境和正式环境
vue打包时使用不同的环境变量需求同一个项目通过打包使用不同的环境变量,目前的环境有三个:一、本地------开发环境二、线上------测试环境三、线上------正式环境我们都知道vue默认的打包都是生产模式,所以说打包后的都是线上的东西,现在我们解决一下如何通过不同命令的打包方式使用不同的环境变量。安装cross-envnpm install cross-env ...转载 2020-04-23 11:28:52 · 4678 阅读 · 1 评论 -
vue项目性能优化,优化项目加载慢的问题
一. 对路由组件进行懒加载:如果使用同步的方式加载组件,在首屏加载时会对网络资源加载加载比较多,资源比较大,加载速度比较慢。所以设置路由懒加载,按需加载会加速首屏渲染。在没有对路由进行懒加载时,在Chrome里devtool查阅可以看到首屏网络资源加载情况(6requests 3.8MB transfferred Finish:4.67s DOMContentLoaded 2.61s Load...转载 2020-04-17 17:44:10 · 2644 阅读 · 0 评论 -
Error: No PostCSS Config found in... 报错 踩坑记
项目在本地运行不报错,上传到 GitHub 之后,再 clone 到本地,执行:npm install安装完成之后再执行:npm run dev这时报错Error: No PostCSS Config found in...本以为是 GitHub 上传的问题,后开又试了两回,发现问题依然存在,于是就开始网上寻找办法。解决方案在项目根目录新建postcss.conf...转载 2019-12-11 11:49:19 · 3159 阅读 · 0 评论 -
vue路由监听
watch: { '$route.path': function (newVal, oldVal) { console.log('new=' + newVal + 'old=' + oldVal) //针对路由监听,做操作 } },最近遇到的问题:tab首页 点击查看更多 进入 tab大全出现bug:显示大全页面...原创 2019-12-06 14:04:51 · 143 阅读 · 0 评论 -
vue导出excel数据表格功能
前端工作量最多的就是需求,需求就是一直在变,比如当前端数据写完之后,需要用Excel把数据下载出来。第一步安装依赖包,需要把代码下载你的项目当中 cnpm installfile-saver cnpm installxlsx cnpm installscript-loader第二步在项目中创建一个新的文件夹用于存放Blob和Export2Excel两个j...转载 2019-11-15 11:46:12 · 198 阅读 · 0 评论 -
vue之axios返回400...获取后台返回得信息
this.$api.post('/api/liuyi/manager/app/add', this.$qs.stringify(this.form), }).then(response => { console.log(response) var data = response.data; ...原创 2019-08-02 10:37:31 · 4546 阅读 · 0 评论 -
vue之 axios的post请求及headers token方式
所遇GET请求 和 POST请求的例子<script> import axios from 'axios' //引入axiosexport default { name: 'list', methods:{ getProduct () { axios.get("http://www.aaa.com") .the...原创 2019-07-23 17:42:30 · 33765 阅读 · 2 评论 -
vue之切换路由时清除定时器
微信公号搜索:遇见一朵小花。(或扫描二维码)找我玩啊只讲对你有用的东西。也常常给粉丝寄出自己看完闲置的好书,喜欢看书的可以来看看,还不定期在公众号请大家喝奶茶!想与我聊聊或者有什么问题都可以在公众号找到我。等你哟~...原创 2019-07-04 11:51:30 · 3220 阅读 · 0 评论 -
vue之 如何在组件上绑定原生事件
由于组件上面的事件默认为自定义事件,那么此例中<child @click="handleClick"></child>不会被系统识别为我们理解中的点击事件必须通过$emit方法绑定它才行。<body> <div id="root"> <child @click="handleClick"></child...转载 2019-06-26 14:29:24 · 3019 阅读 · 1 评论 -
Vue之路由拦截
简单来说有全拦截,也有单独路由拦截。本节主要是全拦截const whiteList = ['/login', '/', '/location'] // 免登录白名单router.beforeEach((to, from, next) => { let flag = window.localStorage.getItem('flag') if (flag) { // 判断状态...原创 2019-06-04 11:43:40 · 1770 阅读 · 0 评论 -
vue之axios的封装
1.安装axiosnpm:$ npm install axios -Scdn:<script src="https://unpkg.com/axios/dist/axios.min.js"></script>2.配置axios在项目中新建api/index.js文件,用以配置axiosapi/index.jsimport ax...原创 2019-03-07 16:13:41 · 508 阅读 · 0 评论 -
vue之打包图片路径相关问题解决
npm run build1,vue项目打包后css背景图路径不对的问题当使用npm run dev命令本地访问的时候,背景图片是正常显示的,可使用npm run build命令打包后,访问dist目录下的项目,页面背景图路径就不对了,显示不出背景图。如下两张图对比图一:使用npm run dev命令访问图二:使用npm run build命令打包之后,访问d...原创 2019-03-08 09:18:03 · 4279 阅读 · 0 评论 -
vue之真机测试
1、iconfig 查看ip 2、修改package.json文件3、重启项目即可从手机端访问注意:手机端与pc端 链接ip地址要统一微信公号搜索:遇见一朵小花。(或扫描二维码)找我玩啊只讲对你有用的东西。也常常给粉丝寄出自己看完闲置的好书,喜欢看书的可以来看看,还不定期在公众号请大家喝奶茶!想与我聊聊或者有什么问题都可以在公...原创 2019-03-20 17:23:40 · 715 阅读 · 0 评论 -
vue之 vue google开发调试插件,简便安装,亲测可用
前言:开发vue项目,使用谷歌浏览器,不得不使用调试插件便于调试插件地址如下: 链接:https://pan.baidu.com/s/159HqJMeFSF-w5z-tMi7drw 密码:ueez安装方式: 将该文件下载后,打开google浏览器,然后打开扩展程序,将文件拖入浏览器扩展程序中,浏览器会弹出确认框,确认即可。 成功后如图:微信公号搜索...原创 2019-04-16 11:26:22 · 5974 阅读 · 0 评论 -
vue2.0做移动端开发用到的相关插件和经验总结(2)
https://blog.csdn.net/wdlhao/article/details/82766775转载 2019-04-28 14:11:20 · 177 阅读 · 0 评论 -
vue之 methods的方法的相互调用
vue在同一个组件内;方法之间经常需要互相调用。methods中的一个方法如何调用methods中的另外一个方法呢?可以在调用的时候使用this.$options.methods.test2();new Vue({ el: '#app', data: { test:111, }, methods: { ...原创 2019-05-08 18:52:18 · 10036 阅读 · 0 评论 -
移动端---左滑删除组件
实现思路具体实现思路如下:布局方面我采用的是 rem + flex 布局,具体如何结构和样式可以参考我的代码,值得注意的是后面的删除按钮是我通过定位放在了每一行的最后,超出隐藏了而已 左滑和右滑是通过 touchstart 和 touchend 事件,通过判断滑动开始和结束,水平方向 x 的偏移量,如果大于一定得阈值认为是左滑动,小于一定的阈值则认为是右滑动 左滑...原创 2019-03-07 11:43:50 · 1313 阅读 · 0 评论 -
vue之v-for循环普通数组、对象数组、对象、数字
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <script src="vue.js"></script></head><body> ...转载 2019-06-06 10:11:25 · 1941 阅读 · 0 评论 -
vue知识图谱
微信公号搜索:遇见一朵小花。(或扫描二维码)找我玩啊只讲对你有用的东西。也常常给粉丝寄出自己看完闲置的好书,喜欢看书的可以来看看,还不定期在公众号请大家喝奶茶!想与我聊聊或者有什么问题都可以在公众号找到我。等你哟~...原创 2019-06-13 09:44:25 · 1874 阅读 · 0 评论 -
Vue之$nextTick
我们先来模拟一个场景:有一个div,默认用了v-if隐藏,点击按钮之后,改变v-if的值让他显示出来,并且取到div中的值:<div id=app> <div id="div" v-if="showDiv">我是显示文本</div> <button @click="showAndGetText">获取内容</button >...转载 2019-06-19 15:00:17 · 93 阅读 · 0 评论