![](https://img-blog.csdnimg.cn/20200220214343171.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
vue
该栏主要分析一些vue的相关知识,欢迎大家来关注呀
柠檬不萌只是酸i
研究生在读 | 努力发论文 |
迈出第一步,才是新的开始。
展开
-
vue 项目实现水印效果
目录(1)新建waterMark.js文件(2)页面使用(1)新建引入 waterMark.js文件'use strict'let watermark = {}let setWatermark = (str) => { let id = '1.23452384164.123412415' if (document.getElementById(id) !== null) { document.body.removeChild(document.getE...原创 2020-11-27 17:42:58 · 1641 阅读 · 0 评论 -
vue 前端实现pdf下载.npm install html2canvas jspdf --save
npm install html2canvas jspdf --save// 页面使用<div id='pdfDom'>...........</div><el-button @click="getPdf('#pdfDom')">下载测试</el-button>// main.js 文件import htmlToPdf from './plugins/utils/htmlToPdf';Vue.use(htmlToPdf);..转载 2020-11-27 17:39:42 · 1510 阅读 · 0 评论 -
vue中elementUI 里面的图片上传问题。el-upload
<el-form-item label="封面图"> <el-upload class="avatar-uploader" :action="reqUploadImgApi" name="photo" :show-file-list="false" :on-success="handleAvatarSuccess" :b...原创 2020-02-23 10:56:17 · 1970 阅读 · 0 评论 -
axios网络请求里面跨域cookie的设置
axios数据请求默认的跨域cookie设置是false。axios({ method:'post', data:qs.stringify(data), url:'', withCredentials: true // 设置为true即可})原创 2020-02-03 09:07:12 · 1405 阅读 · 1 评论 -
vue项目中的富文本编辑器的使用(vue-quill-editor)附完整前端代码
今天介绍一个富文本编辑器的工具。vue-quill-editor项目展示:项目中使用如下:yarn add vue-quill-editor<template> <div> <quillEditor style="height:200px;margin-bottom:60px" v-model="cont...原创 2020-01-23 21:14:46 · 1105 阅读 · 0 评论 -
vue项目的history模式打包部署nginx服务器问题。
(1)vue项目里面需要配置:路由里面需要配置 base: / myprojectname / (注:这个名字要与服务器上存放文件夹的名字一致)const router = new VueRouter({ mode: 'history', base:'/myprojectname/', routes})也可以直接打包出myprojectname 文件夹的名字。...原创 2020-01-19 00:13:23 · 1075 阅读 · 0 评论 -
如何关闭vue3.x中eslint的语法检查呢
vue3.x项目目录结构比较简单, 没有之前的build文件,所以我们需要找到 .eslintrc.js 文件,然后删除或注释掉里面的@vue/standard 即可。注:修改完 .eslintrc.js 这个配置文件,记得重启项目奥。...原创 2019-12-15 23:11:32 · 1875 阅读 · 2 评论 -
(二)【左侧栏 模块】vue管理后台项目的实现,vue + vue+router + axios + elementUI
今天这个模块实现的是【左侧栏】和【退出登录】的功能:左侧栏的数据,我是存放在一个文件中,便于修改:config/menuConfig/** * 页面上的一些固定的数据 * * @param title标题 * @param icon图标 * @param id唯一标识 * @param path跳转路由路径 * @param children二级菜单栏 ...原创 2019-11-27 02:09:04 · 466 阅读 · 0 评论 -
解决 Navigating to current location ("/userslist") is not allowed问题。
今天在写一个后台界面的时候,出现了这个报错,Navigating to current location ("/userslist") is not allowed问题。” 不允许导航到当前位置(“/userslist”)“在网上查了下,发现问题,大致如下:原因:当前访问的路由是相同的。解决办法:需要重写路由的push方法在【router/index.js路由页面】...原创 2019-11-26 18:45:04 · 3896 阅读 · 0 评论 -
export 和 export default的区别:
export 和 export default 均可用于导出常量、函数、文件、模块等。在一个文件或模块中,export、import 可以有多个,但是export default仅有一个。通过export 方式导出,在导入时要加{},export default则不需要。输出单个值:export default 输出多个值:export栗子????:export...原创 2019-11-26 16:54:22 · 720 阅读 · 0 评论 -
(一)【登录模块--前后端代码】vue管理后台项目的实现,vue + vue+router + axios + elementUI
之前一直想自己独立做个项目,但总是纠结于没有后端数据,使用模拟的假数据,总觉得不是那么好,测不了接口请求等等之类的。反正就是各种原因吧(也可能是自己太懒找的各种接口),一直都是开始10%,就中断了,也就没有后续了。每次都是信心满满的开始,没有结果的结束。哈哈哈哈哈,你们会不会像我这个小菜鸟这样。不说了(;′⌒`)????桑心。-----------------------------------...原创 2019-11-26 15:35:10 · 575 阅读 · 0 评论 -
vue中 input 里面写入的 maxlength 不生效,maxlength无效
解决办法:【限制长度和字数】:设置input 的type = ' number ' ,然后在oninput里面做判断。<input type="number" v-model='phone_val' oninput="if(value.length>11)value=value.slice(0,11)" placeholder="输入手机号" />...原创 2019-11-11 20:39:24 · 5933 阅读 · 0 评论 -
前端路由,history 模式的路由,打包文件上传服务器后,页面是空白。
路由有两种模式:hash 和 history默认的路由是hash模式。【hash(哈希)模式:】简单理解,hash模式的路由 ,链接上会出现# ,即:http://localhost:8082/#/ 类似这种的。如果想要去掉 # 的话,那就是另外一种模式了,即下面的 history模式。【history模式:】mode: 'history',这种模式的路由看起来会...原创 2019-10-30 22:43:34 · 618 阅读 · 0 评论 -
vue路由莫名的被篡改。 要被页面里面的form标签。。。纠结
问题描述:今天在写页面,页面里面嵌入组件,只要一点击组件,页面的路由就莫名其妙的被改了,而且貌似是提交的内容,但又不是。页面各种找和注释,忽然间,看到了form标签。然后才想起来。form标签会把表单里面的内容提交。建议一般在写页面的时候,界面尽量少点儿使用form标签。解决办法:去掉form标签即可。【再次点击的时候,不会出现此情况了。】...原创 2019-10-29 15:16:26 · 260 阅读 · 0 评论 -
记录总结:vue项目。重定向到公众号网页获取授权拿auth_user。
近期在做一个项目,下面简单描述下项目中遇到的问题,问题不算很难,但是问题不太容易定位。大致逻辑:页面加载进来,先去公众号网页重定向 走getAuther.do 接口,从链接里面拿到code [ auth_user ] 。拿到code后再去请求login.do 登录接口,拿到session。问题描述:用户进入页面后,(1)一直在加载ing,有的甚至卡在了加载ing。(2)有的...原创 2019-10-29 14:28:26 · 1115 阅读 · 0 评论 -
vue项目中使用缓存遇到的坑总结。
缓存选对了,顺风顺水,选错了,全都是坑。[ localStorage 、sessionStorage 、cookie ]vue中的缓存也是比较多的,例如:good-storage、vue-cookie、还有个vue-cookies。等这些都可以用来缓存。(1)good-storage good-storage库地址npm install good-storage/...原创 2019-10-29 14:11:59 · 1316 阅读 · 0 评论 -
如何快速启动npm run build 后的dist文件呢?
(1)通过npm run build 打包后会出现如下:tips: 提示我们打包完的项目,必须要在http server 下才能运行。(2)安装http server。进入 dist 文件夹,然后启动一个http服务即可。或者,你现在已经到apache 里面进行配置去了。其实也可以不用那么麻烦,我们有nodejs环境,只要安装全局 http-server 服务就好了呀。(*...原创 2019-10-23 13:39:07 · 9179 阅读 · 1 评论 -
解决:返回上个页面,倒计时依然存在
可以使用 组件销毁的生命周期。在有倒计时的页面,离开页面后,将定时器清除即可。destroyed() { clearTimeout(that.timer);}原创 2019-10-21 13:30:08 · 1122 阅读 · 0 评论 -
在app.vue里面注册的组件,然后想在首页不显示,需要怎样控制呢?vue切换路由的时候,在哪儿监控路由变化呢?
需求是这样的:除了首页之外,每个页面上都要显示一个【返回的导航栏】。那么问题来了,怎样控制首页返回导航栏的显示与隐藏呢。思路:在【返回的导航栏】组件里面,监听路由的变化,然后在监听里面进行判断即可。代码:<template> <div id="back" v-if="isShowBack"> <div class="back_bo...原创 2019-10-21 13:07:03 · 1759 阅读 · 0 评论 -
vue实现动态修改单价,改变金额
效果展示:代码展示:;<body> <div id="app"> <div>{{msg}}</div><br/><br/> <div v-for="(item,idx) in list" :key="idx"> <div>单价:{{item....原创 2019-10-20 14:59:34 · 1817 阅读 · 0 评论 -
Vue移动端 viewport视口的设置、解决点击响应延时0.3s问题
(1)配置移动端视口: <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">(2)解决点击响应延迟0.3秒的问题:<scriptsrc="https://as.alipay...原创 2019-10-18 23:17:33 · 1816 阅读 · 0 评论 -
vue项目代码设计目录【不定期更新ing】
(1)src目录的文件:(2)常用的依赖文件:(2-1)stylus 依赖包npm install stylus stylus-loader --save-dev// 使用<style lang="stylus" rel="stylesheet/stylus">stylus书写的语法 可以省略 {} 冒号 分号 继承父&(2-2)v...原创 2019-10-18 23:36:10 · 231 阅读 · 0 评论 -
之前一直没有注意,vue-cli脚手架搭建的项目的index.html是怎样加载js 、css的。
<!-- built files will be auto injected -->翻译:“生成的文件将自动注入”在index.html页面,会看到body 里面有一行注释,打包后的文件会被自动的注入。这就是为什么index.html里面没有引入js和css,也直接可以运行了。...原创 2019-10-18 21:16:33 · 1723 阅读 · 0 评论 -
axios请求需要注意的,axios的get请求传入参数需要注意的
const axios = require('axios');// 方法1:// 方法1:axios.get('/user?ID=12345') .then((res)=>{ console.log(res); }) .catch((error)=>{ console.log(error); }) ...原创 2019-10-16 20:00:06 · 6346 阅读 · 0 评论 -
解决:页面刷新的时候,数据没有被储存。 Vuex持久化存储页面数据。
vuex可以进行全局的状态管理,但是刷新页面之后,数据就会消失。这与我们想象的不符。解决办法:我们可以结合本地存储做到数据持久化,也可以通过一些插件来完成。vuex-persistedstate这里我们就使用插件的方法俩完成。【其实插件的原理也是结合了存储方式,只是统一的配置,不需要每次手动写存储方法。】插件:vuex-persistedstate(1)安装插件依赖:npm ...原创 2019-10-14 17:02:22 · 784 阅读 · 0 评论 -
判断h5页面是不是在微信小程序里面打开呢?
(1)安装依赖:npm install weixin-js-sdk --save(2)在App.vue里面引入:import wx from 'weixin-js-sdk'(3)在页面上写判断:judgeEv() { var ua = navigator.userAgent.toLowerCase(); if (ua.match(/Micro...原创 2019-10-14 11:56:20 · 3825 阅读 · 0 评论 -
根据宽带账号的前缀来判断省份areaId、也可以用来判断不同省份地区的客服(10086、10010)等。
// 获取宽带账号的前四位、前三位来判断 areaIdvar broadb = userNumber.substring(0, 4); //获取前四位that.getCityCode(broadb);if (!this.broandbandAreaId) { var broadb = userNumber.substring(0, 3); //获取前三位 (省、直辖市) ...原创 2019-10-12 16:29:13 · 1424 阅读 · 1 评论 -
Vue中路由的实现(简单理解,详细的参考vue-router官网):hash模式和history模式
Vue-Router官网hash模式:const router = new VueRouter({ mode: 'hash', // 配不配置都可以,默认是hash模式 routes: [...]})在浏览器中出现符号“#”(例如:http://localhost:8081/#/)#及#后面的字符称之为hash,用window.location.hash读取;特点...原创 2019-09-23 15:51:59 · 714 阅读 · 0 评论 -
解决:vue项目npm run build 打包后 :src路径里面的本地图片找不到。
问题描述及错误代码:// 本地运行、打包 图片是ok的<img src="../../static/images/orderSeeProgress0.png"> // 本地运行 图片是ok的、打包图片找不到 (因为图片的路径被解析成了字符串)<img src="/static/images/orderSeeProgress1.png"> /...原创 2019-09-23 13:18:56 · 4796 阅读 · 0 评论 -
Error: listen EADDRNOTAVAIL: address not available
webpack-dev-server --inline --progress --config build/webpack.dev.conf.js10% building modules 1/1 modules 0 activeevents.js:174 throw er; // Unhandled 'error' event ^Error: listen EAD...原创 2019-09-23 11:57:19 · 2275 阅读 · 0 评论 -
v-if 条件判断
今天写分页的时候,踩了一个坑。v-if 里面的参数是个变量 。(别忽略了,因为不同场景用到的时候,会忘记)今天在使用vue写分页的时候,页面是这样渲染的,<tr v-for="(item,key) in arr_province" v-if="key>=a && key<b" v-cloak> <td>{{item...原创 2019-07-11 18:23:49 · 5376 阅读 · 0 评论 -
【Vue】Vue打包文件后需要添加版本号Version,来防止更新后的页面有缓存
在build/webpack.prod.conf.js文件里面修改如下:添加const Version = new Date().getTime();并且修改 js 和 css 的打包文件,如下:打包后的js文件:(css文件同理,后面都会添加上版本号,也就是个时间戳)--------完。...原创 2019-09-26 09:58:54 · 5577 阅读 · 2 评论 -
解决vue项目安装scss依赖,出现 TypeError: this.getResolve is not a function 问题
-----------------------------------------------------qq群(vue学习交流):482739794-----------------------------------------------------今天在vue项目中安装scss出现个问题:TypeError: this.getResolve is not a func...原创 2019-10-01 21:47:48 · 3025 阅读 · 0 评论 -
【vue】vue项目中使用scss。 具体的步骤和配置如下
详细的安装步骤如下:(1)安装如下依赖:npm install node-sass --save //安装node-sass npm install sass-loader --save //安装sass-loader npm install style-loader --save //安装style-loader (2)在 build / webpack.base.conf.j...原创 2019-10-01 21:49:16 · 950 阅读 · 0 评论 -
Vue中的 this.$nextTick( callback ) 数据没有渲染完成,就去获取DOM节点,这样是获取不到的。
qq群号(vue学习交流):482739794数据没有渲染完成,就去获取DOM节点,这样是获取不到的。使用this.$nextTick( callback ) [ 渲染完成以后,触发的回调函数]this.$nextTick(function(){ // 数据渲染完成之后才会执行的。})什么情况下会用到 this.$nextTick( callbac...原创 2019-10-07 13:35:13 · 3816 阅读 · 0 评论 -
vue组件动态插入、vue组件按需插入显示、vue组件动态显示
-----------------------------------------------------qq群(vue学习交流):482739794-----------------------------------------------------先来说下项目需求:页面的组件不是直接引入且按照顺序放在页面上的, 而是根据后端返回的数据,来判断,动态的加载某个组件思路步骤...原创 2019-10-10 08:42:39 · 566 阅读 · 0 评论 -
清除每次更新版本的缓存。每次更新版本后,就不会留存有旧版本的缓存啦
最近项目更新版本,总会遇到更新完后,总是有就版本的缓存。我们更新版本,是通过传入时间戳来来判断的。解决办法:在版本更新成功之后,添加清除本地缓存。localStorage.clear(); 这样,每次更新版本后,就不会留存有旧版本的缓存啦。代码查看:// 更新版本upDateVersion() { var that = this; ...原创 2019-10-11 08:28:21 · 1117 阅读 · 0 评论 -
解决vue 使用keepalive 一直缓存的页面的问题。
问题描述: Form01 -> Form02(该页面的信息需要被缓存) -> Form03 Form03-> 返回Form02(信息已经被缓存)-> Form01 Form01-> Form02(信息被缓存,但是不想要这个缓存的) -> Form03解决【不需要被...原创 2019-09-18 14:08:03 · 7795 阅读 · 6 评论 -
vue打包后拿到的dist文件,放到服务器上之后,有文件报404
问题描述:将vue打包后的dist文件放到服务器上访问index.html文件的时候,控制台有.js文件找不到。(如下图所示)问题解决:首先来看下打包后的index.html文件里面引入的js文件。找不到的js文件是这样被打包引入的:因此,要解决打包后404问题,就得修改下配置文件。(配置文件存在的位置)打开该index.js配置文件:将‘ / ’ 改为 ‘ ...原创 2019-08-05 23:19:50 · 4244 阅读 · 0 评论 -
vue学习笔记(六)【class类样式、style样式】
(1):class 里面可以传递一个数组 数组中使用三元表达式 使用对象来代替三元表达式 里面直接使用对象 , 对象的键是类名,对象的值是boolean <div v-bind:class="{ active: isActive }"></div>data(){ return{ isActive...原创 2019-08-05 23:58:40 · 349 阅读 · 0 评论