vue
包淼淼
我是一只程序喵
展开
-
vue 下载导出table为excel
1、安装npm install file-saver xlsx --save-dev2、下载导出组件<template> <el-button type="primary" icon="el-icon-download" @click="getConfig">下载</el-button></template><script>export default { name: 'd2-export-csv', props: {原创 2021-07-27 16:41:46 · 577 阅读 · 0 评论 -
使用element-ui 的上传组件upload完成自定义上传到天翼云oss云服务器
首先配置天翼云,如下操作1、要求在使用 OOS 之前,首先需要在 www.ctyun.cn 注册一个账号(Account)。 创建 AccessKeyId 和 AccessSecretKey。AccessKeyId 和 AccessSecretKey 是您访 问 OOS 的密钥,OOS 会通过它来验证您的资源请求,请妥善保管2 使用方式<!—引入本地资源--><script src="./oos-sdk-x.x.x.min.js"></script>原创 2020-11-23 16:53:42 · 1646 阅读 · 3 评论 -
vue canvas 签名组件,base64格式转图片,上传七牛
组件代码:<template> <div> <div id="canvas" ref="canvas"> <div id="clearCanvas" ref="clearCanvas" @click="clearSign">清除</div> <!-- <p id="saveCanvas" ref="saveCanvas">保存</p> --> </div&.原创 2020-10-30 19:28:49 · 1388 阅读 · 0 评论 -
el-date-picker选择时间格式化[00:00:00,23:59:59],选择当日及之前时间
<el-date-picker v-model="form.date" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" class="width-200" :picker-options="pickerOptions"> </el-date-picker>//选择当前及之前时间 pickerOptions: { disabledDate (time) { ...原创 2020-06-10 19:05:28 · 4257 阅读 · 0 评论 -
vue 使用swiper 获取activeIndex
1、installnpm install swiper vue-awesome-swiper --save2、页面具体代码<template> <div class="container-box"> <div class="slogan-box"> <img src="../assets/images/cpjs_b...原创 2020-04-21 19:50:07 · 6103 阅读 · 0 评论 -
Element UI 上传图片组件(支持多传和单传),报错Cannot set property 'status' of null
使用组件页面代码:<d2-upload v-model="form.uploaderUrlArray" :limit="5" accept=".png,.jpg,.jpeg" multiple />组件代码,我这里图片是上传到七牛服务器的。注意fileLIst是只读的,不能修改。我们这里使用uploadList来保存我们需要改动的数组,否则报错Cannot set prope...原创 2020-03-24 15:35:23 · 2756 阅读 · 2 评论 -
promise,async await异步
promise:参考链接async await: 参考链接原创 2020-03-16 19:12:50 · 110 阅读 · 0 评论 -
Element-UI el-table 多选,多选数据删除后数据回显
详情图:选择药品-》删除已选择药品<template> <div> <el-button type="primary" icon="el-icon-plus" plain @click="dialogVisible=true">选择药品</el-button> <el-dialog title="选择药品" :vi...原创 2020-02-05 23:04:33 · 2277 阅读 · 0 评论 -
element-ui table 多页 单选数据回显;多选数据回显
单选:注意row-key、:reserve-selection="true"<template> <div> <el-button type="primary" icon="el-icon-plus" plain @click="open" size="medium">选择商品</el-button> <el-dial...原创 2020-01-20 10:42:31 · 1870 阅读 · 0 评论 -
vscode设置vue属性多了格式化不换行
问题描述:vue有很多属性的时候,vscode格式化会自动换行,每个属性占一行,看起来很难受解决方法:首先打开vscode的 》文件 》 首选项 》设置搜索vetur.format.defaultFormatter.html ,下面有个下拉框,选择js-beautify-html (PS:需要你先安装这个插件)点击左侧三个点 选择打开setting.json,加入如下代码,然后...转载 2019-12-31 11:51:15 · 8522 阅读 · 6 评论 -
vue h5项目px rem的转化 VScode使用插件Px2rem
1、安装插件2、设置默认字体大小3、根目录设置index.html<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0">...原创 2019-11-04 15:08:39 · 767 阅读 · 0 评论 -
Elements in iteration expect to have 'v-bind:key' dir
在学习vue过程中遇到Elements in iteration expect to have 'v-bind:key' directives.' 这个错误,查阅资料得知Vue 2.2.0+的版本里,当在组件中使用v-for时,key是必须设置的。解决方式一:设置对应的key注意上面key值不要用对象或是数组作为key,用string或number作为key,否则报错:[Vue war...转载 2018-11-20 15:36:57 · 434 阅读 · 0 评论 -
vue中$router以及$route的使用
参考:https://segmentfault.com/a/1190000016662929路由基本概念route,它是一条路由。{ path: '/home', component: Home }routes,是一组路由。const routes = [ { path: '/home', component: Home }, { path: '/about', com...原创 2019-04-02 17:56:48 · 1020 阅读 · 0 评论 -
vue + element-ui Table的数据多选,多页选择数据回显,分页记录保存选中的数据
参考:https://www.cnblogs.com/jiangweichao/p/9620940.html业务的需要:我要对与会人员勾选,记录所选的与会人员,并且点击到别的页面上时也要记录所勾选的。第一次尝试,每次点击下一页数据都会清空。然后我就去element ui官网查看了api.实现如下:在table一定要定义以下事件和列表属性: 1、row-key, 2、reserv...原创 2019-05-22 19:19:11 · 3772 阅读 · 2 评论 -
Duplicate keys detected: '0'. This may cause an update error.
参考:https://blog.csdn.net/sunfellow2009/article/details/83781144错误原因一个template中有两个一样的v-for<div class="info" v-for="(item, index) in currentFriend.content" :key="index"> <div class="...转载 2019-06-12 17:08:24 · 2353 阅读 · 0 评论 -
vue.set() (this.$set) 的用法
参考:https://blog.csdn.net/gaoxin666/article/details/83656714经常操作数组数据,并且要求实时更新视图数据,这个时候首先想到的是 vue.set() 方法(注:当发现model上的数据发生改变,而页面上的视图数据没有改变,推荐使用该方法。),该方法的使用首先要在页面引入vue,应该这样写:import Vue from 'vue',这样才能...原创 2019-06-12 17:13:04 · 1215 阅读 · 0 评论 -
vue控制台报错Duplicate keys detected: 'xxxx'. This may cause an update error.解决方案
转自:https://blog.csdn.net/Dream_xun/article/details/85064277vue项目中报了一个这样的错:Duplicate keys detected: 'C1812170006'. This may cause an update error.虽然不影响使用,但是报错还是得解决的只要一进入该页面,就会出这个红色的错误,网上查了资料,说是...转载 2019-06-14 11:15:23 · 74319 阅读 · 7 评论 -
VM8888:1 WXMLRT_$gwx:./components/FormButton.vue.wxml:template:2:330: Template `data-v-2e0e74f0-defa
错误:VM8888:1 WXMLRT_$gwx:./components/FormButton.vue.wxml:template:2:330: Template `data-v-2e0e74f0-default-7` not found.原因:自己使用mpvue写微信小程序,这里因为缓存原因,导致自己项目代码与小程序编译代码不一致。解决方法:项目重新编译即可...原创 2019-06-25 16:28:39 · 2159 阅读 · 0 评论 -
vue组件中data必须是一个函数
参考:https://www.cnblogs.com/wangjiachen666/p/9876266.htmlhttps://www.jianshu.com/p/839cbef3be41原创 2019-04-08 15:07:09 · 152 阅读 · 0 评论 -
vue-ssr框架nuxt填坑
参考:https://blog.csdn.net/xxbc5286072/article/details/83022209原创 2019-03-18 10:48:20 · 413 阅读 · 0 评论 -
This dependency was not found: * common/stylus/index.styl in ./src/main.js To install it, you can ru
有如下错误:This dependency was not found:* common/stylus/index.styl in ./src/main.jsTo install it, you can run: npm install --save common/stylus/index.styl解决:1、首先 npm install stylus-loader stylus...原创 2018-11-18 16:37:30 · 904 阅读 · 0 评论 -
在phpstorm中使用stylus发生错误 ,但是可以正常运行
在phpstorm中使用stylus发生错误,一些stylus不能识别,而且标红报错 1. 在phpstorm中装 vue stylus插件 File 》 Settings 》 Plugins 》 搜索 vue 和 stylus, 搜索到后安装,然后重启2. 在vue文件中写style时, 加入 <style lang="stylus" type="text/...原创 2018-11-21 14:36:01 · 318 阅读 · 0 评论 -
vue中npm run dev运行项目不能自动打开浏览器!
上个项目结束就很久没有使用vue了,最近打算用vue搭建自己的个人站点就准备先创建项目。然后就出现了一系列问题,可能是很久没用吧,太生疏了,之前又不小心把环境变量删除了,结果各种不是内部或外部命令。这里要说的问题就是一个让我很不爽的问题: I Your application is running here: http://localhost:8080这段话的意思是:你的程序运行...原创 2018-11-16 19:11:23 · 790 阅读 · 0 评论 -
windows环境下搭建vue+webpack的开发环境
前段时间一直在断断续续的看vue的官方文档,后来就慢慢的学习搭建vue的开发环境,已经有将近两周了,每到最后一步的时候就会报错,搞的我好郁闷,搁置了好几天,今天又接着搞vue的开发环境,终于成功了。我要把我所参考的文档和实际遇到的问题分享给大家。由于本人也是初级菜鸟一枚,如果有错误,还望谅解指正。下面言归正传:所参考的文档链接:http://blog.csdn.net/syyling/arti...原创 2018-11-16 18:51:21 · 125 阅读 · 0 评论 -
expected indentation of 0 spaces but found 2 . vue eslint规则和idea冲突
使用vue创建工程时,在vue页面里,用到script时,idea默认会缩进两个空格,而eslint校验时期望,script下的首行不要缩进。因此会提示如下报错:expected indentation of 0 spaces but found 2 . 解决办法:1、不校验缩进,在rule里增加如下规则:'rules': { 'indent': 'off' }...原创 2018-11-18 17:32:37 · 1541 阅读 · 0 评论 -
vue eslint indent 检测问题 VUE初写小项目问题之命令行报错:Expected indentation of 4 spaces but found 6
一、问题刚开始用一个小项目练手,用vue-cli初始化项目,直接安装了所有的东西,如vue-router、ESLint、unit tests等等,当时只懂得vue-router是什么。问题来了,在vue页面写代码时,命令行报了很多错,几乎全是Expected indentation of 4 spaces but found 6类似这样的 二、经过看了报的错,就直接删除了多余的空格。...原创 2018-11-18 17:21:57 · 4923 阅读 · 2 评论 -
Vue生命周期中mounted和created的区别
一、什么是生命周期?用通俗的语言来说,就是Vue中实例或者组件从创建到消灭中间经过的一系列过程。虽然不太严谨,但是也基本上可以理解。通过一系列实践,现在把所有遇到的问题整理一遍,今天记录一下created和mounted的区别:二、created和mounted区别?官方图解如下:我们从图中看两个节点:created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视...原创 2018-10-30 18:16:47 · 1128 阅读 · 0 评论 -
vue中v-text,v-html, v-model, {{}}之间的异同
首先我们知道vue中有很多自定义指令,以v- 开头,例如:v-text,v-bind,v-model, v-if,等在这些指令中,部分指令之间是很容易被混淆,所以今天决定自己总结一下以下几个相似指令之间的异同:1.v-textv-text是用于操作纯文本,它会替代显示对应的数据对象上的值。当绑定的数据对象上的值发生改变,插值处的内容也会随之更新。注意:此处为单向绑定,数据对象上的值改变...原创 2018-10-31 17:38:50 · 307 阅读 · 0 评论 -
vue中组件名字写法
<template> <div class="singer"> <!--<list-view :data="singers"></list-view>--> <listview :data="singers"></listview>原创 2018-11-23 14:48:21 · 2302 阅读 · 0 评论 -
vue之watch用法
对应一个对象,键是观察表达式,值是对应回调。值也可以是方法名,或者是对象,包含选项。在实例化时为每个键调用 $watch() ;//使用官方vue-cli脚手架书写<template> //观察数据为字符串或数组 <input v-model="example0"/> <input v-model="example1"/> /当单观察...原创 2018-11-26 18:52:15 · 88 阅读 · 0 评论 -
Plugin/Preset files are not allowed to export objects,webpack报错/babel报错的解决方法
全部异常如下:今天在学习webpack的时候安装插件出现了上面的异常,百度的时候,发现有一个外国朋友也遇到这样的问题,大致是插件不兼容。解决办法:删除你的node_modules打开你的package.json 把一下插件版本换成下面的版本,然后再次重新安装 ( cnpm i ) "babel-core": "^6.26.0", "babel-loa...原创 2019-03-18 10:44:12 · 2153 阅读 · 0 评论 -
children must be keyed
错误 <transition-group> children must be keyed: <li>vue2 中,使用v-for="item in items",必须有:key="item.property"但是如果item只有一个字段,没有属性,怎么办呢也可以参考 https://www.cnblogs.com/CreteWu/p/8496234.html...原创 2018-12-26 11:31:04 · 6138 阅读 · 1 评论 -
Vue mixins混入
参考 https://cn.vuejs.org/v2/guide/mixins.htmlhttps://www.w3cplus.com/vue/vue-mixins.html混入基础混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。例子: //...原创 2018-12-11 16:51:18 · 211 阅读 · 0 评论 -
Vue生命周期详解
参考:https://baijiahao.baidu.com/s?id=1612792369370353687&wfr=spider&for=pc一.Vue生命周期简介官网:https://cn.vuejs.org/v2/api/#beforeCreate Vue实例从创建到销毁的过程,就是生命周期。详细来说也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲...原创 2018-12-13 17:07:46 · 150 阅读 · 0 评论 -
[Vue warn]:Error in render: "TypeError: Cannot read property 'length' of null"
错误定位不到,不知道哪里有错。当把music-list组件的props:{songs:default:}中的null改为【】就不会报错,类似这种错误,我们如何定位问题?比如这种错误,根本不能告诉我们错误代码行?????首先,根据错误提示你可以知道报错是哪个组件,其次顺着错误堆栈往上找,发现发生在 Vue._render 阶段,就知道是模板渲染的时候报错,最后根据报错信息 Cannot ...原创 2018-12-13 10:06:35 · 7656 阅读 · 1 评论 -
Uncaught ReferenceError: jp2 is not defined,用jsonp抓取qq音乐总是说回调函数没有定义
问题如下参考链接:https://segmentfault.com/q/1010000010051040用jsonp抓取qq音乐总是说回调函数没有定义,我的要实现时候的步骤1。第一步我要实现的目的问题:如题我的部分代码:import originJSONP from 'jsonp'export default function (url, data, optio...原创 2018-12-12 17:56:30 · 3169 阅读 · 0 评论 -
Type of the default value for 'songs' prop must be a function
eslint常会出现这样的错误提示,控制台打印:Type of the default value for 'songs' prop must be a function 解决办法有两种如下:1:写一个函数,return一个数组2: ES6 箭头函数写法就可以解决这个问题...原创 2018-12-12 15:42:37 · 543 阅读 · 0 评论 -
Vue事件解读之$emit
Vue事件分两部分,一是DOM绑定事件,二是自定义事件。DOM事件在Vue中可通过v-on指令或事件语法糖@来为DOM元素绑定事件<div v-on:click="doSomething"></div><div @click="doSomething"></div>自定义事件Vue自定义事件是为组件间通信设计,自定义事件提供$...转载 2018-11-26 18:56:31 · 499 阅读 · 1 评论 -
Vue加载单文件使用vue-loader报错
报错信息如下原因参考官方文档:https://vue-loader.vuejs.org/migrating.html#a-plugin-is-now-required解决方法:参考 :https://blog.csdn.net/MessageBox_/article/details/81434193...原创 2018-10-24 13:59:32 · 971 阅读 · 0 评论