Vue.js
牧马少女
牧马少女的学习笔记。
展开
-
vue页面嵌套外部url
我的需求是一进入页面通过调接口获取页面的url,然后把url嵌套到当前页面。<template> <div class="page-content" id="bi-div"></div></template><script> import reportFormApi from '@/api/reportForm' export default { name: 'reportComponent', props原创 2021-12-17 10:26:38 · 4788 阅读 · 1 评论 -
Vue + iView实现Excel上传
1、HTML部分<Col span="2">上传文件:</Col><Col span="22" class="uploadExcelBox"> <Upload ref="uploadExcel" :loading="uploadLoading" :action="uploadFileUrl" accept="xlsx,xls" :format="uploadFormat" :before-upload="beforeImgFile" :on-succ原创 2021-06-21 20:09:04 · 1310 阅读 · 10 评论 -
Vue实现三级路由
https://segmentfault.com/a/1190000018127192转载 2020-09-03 17:41:39 · 2435 阅读 · 0 评论 -
Vue表单添加回车事件使下一个input获取焦点
话不多说,先贴代码:1、form表单代码<el-form ref="loginForm" :model="loginForm" :rules="loginRules" status-icon> <el-form-item prop="username"> <el-input v-model="loginForm.username" placeholder="请输入管理员账号" name="username" type="text" auto-.原创 2020-08-04 10:54:16 · 2866 阅读 · 2 评论 -
vue给input添加回车事件无效
如下图,我给input添加了回车事件,但是按了回车之后始终无法触发事件。v-on:keyup.enter="submitForm"解决方法:加上.native修饰v-on:keyup.enter.native="submitForm"转载 2020-08-04 10:12:08 · 1684 阅读 · 0 评论 -
vue-element-admin使用Tinymce富文本插件的踩坑填坑
vue-element-admin项目的作者已经封装好了Tinymce富文本组件,我直接在Git上下载demo运用到自己项目里。这是Git地址:https://github.com/PanJiaChen/vue-element-admin一、Bug描述:(组件的代码和demo基本一致的前提下)我在编辑弹窗里引用了Tinymce富文本组件,如下图,table的每条数据都有一个“修改”按钮,每次点击“修改”按钮,则弹窗里显示该行对应的HTML。可是从第二次开始每次富文的内容都和第一次的一样,按道理不原创 2020-07-29 16:11:52 · 6712 阅读 · 15 评论 -
让Vue项目更丝滑的几个小技巧
一、数据不响应,可能是用法有问题比如下面这段代码:<template> <div> <div> <span>用户名: {{ userInfo.name }}</span> <span>用户性别: {{ userInfo.sex }}</span> <span v-if="userInfo.officialAccount"> 公众号: {{转载 2020-07-23 19:21:37 · 374 阅读 · 1 评论 -
Vue axios发送post请求参数太多,接口报错:No ‘Access-Control-Allow-Origin‘ header is present on the requested resou
场景描述: 在进行修改操作时,因为表单里有富文本组件,用户在富文本里编辑的html可能会很长,富文本里的html作为参数传给接口执行updata操作时报错。Access to XMLHttpRequest at 'http://192.168.*.**:8888/base/infoNews/update? ... ...' from origin 'http://192.168.3.7:8805' has been blocked by CORS policy: Response to p...原创 2020-07-04 14:46:05 · 1549 阅读 · 0 评论 -
npm install 报错 : gyp ERR! configure error
问题:(在Xshell上操作测试版本的项目) 新拉代码之后,npm install 报错,报错信息如下:gyp ERR! configure error gyp ERR! stack Error: EACCES: permission denied, mkdir '/home/work/buildqx/vue-admin-template/node_modules/node-sass/.node-gyp'报错截图:解决方法:npm install --unsafe-per...原创 2020-06-29 20:01:57 · 1834 阅读 · 0 评论 -
在vue项目中使用element-tree-grid(表格树)
Git Demo 网址 :https://github.com/ProsperLee/element-tree-grid相关技术贴:https://www.lagou.com/lgeduarticle/41612.html一、使用方法:1、通过npm安装element-tree-gridnpm install element-tree-grid --save2、在main.js中注册element-tree-gridvar ElTreeGrid = require('el..原创 2020-06-18 13:10:22 · 4398 阅读 · 3 评论 -
vue调接口的2种写法
方法一:1、例如在src/api/post.js 文件:import request from '@/utils/request'//获取数据const get = (param) => { return request({ url: '/api/post/get',//接口url method: 'post', params: param })}export default { get,}2、在..原创 2020-06-13 20:25:31 · 11427 阅读 · 1 评论 -
vue 路由刷新之后当前页无法访问
去掉这个属性就好了原创 2020-06-04 15:56:32 · 1169 阅读 · 1 评论 -
使用ES6新特性async await进行异步处理,实现同步效果。
在vue项目里定义了一个全局函数,如下:每次都返回空数组。因为接口调用后还未返回数据,该函数就将result return了。Vue.prototype.getCity = function(){//获取城市列表 var result = []; getCityList().then(res=>{ if(res.code==0){ //console.log(res.data); resu..原创 2020-05-25 14:47:02 · 660 阅读 · 0 评论 -
Vue项目代码优化,提高网页加载速度。
一、在编译时不生成.map文件,减少webpack打包后的压缩文件,提高首页编译速度。修改config/index.js文件:productionSourceMap: false二、开启Gzip压缩1、修改config/index.js文件:productionGzip: true,开启Gzip压缩 。productionGzip: true,productionGz...原创 2019-03-19 11:46:07 · 4338 阅读 · 3 评论 -
asset size limit: The following asset(s) exceed the recommended size limit (244 KiB). This can impac
警告提示:翻译过来就是:资产规模限制:以下资产超过了建议的规模限制(244 KiB)。这可能会影响web性能。错误原因,资源(asset)和入口起点超过指定文件限制,需要在 vue.config.js 文件内做如下配置:module.exports = { //webpack配置 configureWebpack: { //关闭 webpack 的性能提示 performance: { hints:false } //或者转载 2020-05-23 16:02:17 · 9006 阅读 · 0 评论 -
vue报错:exports is not defined
报错如下:【原因】在项目中全局搜索exports,其他的文件都是配置文件,只有1个js文件是自己最近新增的,写了exports,估计出问题就是这个文件了。该文件是用来声明全局函数的,百度查了一下,是声明函数时的写法没有按照ES6的语法来写。接下来,放代码://以前的错误写法exports.install = function(Vue,options){}//正确的写法let base={};base.install = function(Vue,opti...转载 2020-05-23 15:57:55 · 18170 阅读 · 0 评论 -
在vue store 中定义全局变量
使用环境:项目里很多页面都会使用到的静态变量,数据里小,一般情况下也不会有改动,可以不需要通过接口获取的。1、在store下面新建publicSet.js文件。2、publicSet.js:这些值一般都是接口的参数,很多接口都会用到的参数。只获取,不能修改它。所以这里就不写actions了。//系统里公共的数据,例如来源类型、岗位类型const state = { source:[ { id:"1", tex原创 2020-05-14 20:43:44 · 2764 阅读 · 0 评论 -
https://github.com/sass/node-sass/releases/download/v4.13.1/win32-x64-72_binding.node
问题:执行命令 npm install 后报错Cannot download"https://github.com/sass/node-sass/releases/download/v4.13.1/win32-x64-72_binding.node"解决方案:npm i node-sass --sass_binary_site=https://npm.taobao.org...转载 2020-02-07 11:02:16 · 2777 阅读 · 1 评论 -
vue + elementUI 项目里使用qiniu插件实现上传图片功能
总结:按照七牛官网一步步来就可以实现。官网链接:https://developer.qiniu.com/kodo/sdk/1283/javascript具体实现步骤:1、npm 安装qiniu依赖npm install qiniu-js2、npm 安装plupload依赖npm install plupload --save3、在上传页面引入插件依赖var ...原创 2020-01-02 20:47:55 · 1468 阅读 · 1 评论 -
vue 给标签添加右键事件
<!-- Dom --><el-button @contextmenu.prevent.native="rightClick(item,$event)"></el-button><!-- js -->rightClick(item,eve){ console.log(item);console.log(eve);},原创 2019-12-25 16:09:10 · 3610 阅读 · 0 评论 -
ElementUI的el-dialog弹窗打开时css的bug
问题描述:el-dialog弹窗没打开时,页面有滚动条,会占据浏览器右侧15px左右的宽度。dialog打开之后,遮罩层占整个浏览器的宽度,且没有滚动条。网页头部滚动条消失,导致网页头部向右移动15px左右。每次打开dialog网页头部就向右移动;关闭dialog网页头部就向左移动。直接影响美观。解决方法:在项目的入口文件添加以下css。<style lang=...原创 2019-12-18 15:07:42 · 3593 阅读 · 3 评论 -
npm run dev 浏览器中打开两次
解决方法:vue.config.js 下的 devServer.open 设置为 false // true默认打开浏览器 package.json 的 dev 命令设置为 vue-cli-service serve--open转载 2019-12-10 09:48:35 · 839 阅读 · 0 评论 -
webpack:webpack One CLI for webpack must be installed. These are recommended choices... ...
执行:npm install webpack-cli -g原创 2018-08-01 16:30:59 · 591 阅读 · 0 评论 -
在vue项目中引入js-cookie
js-cookie官网1、在index.html里引入js.cookie.min.js2、执行指令npm install js-cookie --save3、就可以开始使用cookie了更多cookies使用方法请查看如果报错:VM1269:1 Uncaught ReferenceError: Cookies is not defined是因为...原创 2019-09-05 10:57:14 · 1979 阅读 · 0 评论 -
vue项目中添加 js-cookie 依赖
1、安装js-cookienpm install --save js-cookie2、在mian.js里引入依赖import Cookies from 'js-cookie'; //引入cookie操作依赖原创 2019-09-04 19:44:51 · 5312 阅读 · 0 评论 -
TypeError: this.getResolve is not a function
问题描述:执行 npm install vue-style-loader css-loader sass-loader --save-dev 安装了css相关依赖之后,npm run dev,项目报错:TypeError: this.getResolve is not a function原因:安装的sass-loader的版本为最新8.0.0,查看网上资料说是版本过高导致编译错误。...转载 2019-09-04 18:34:51 · 25291 阅读 · 7 评论 -
vue组件之间的通信
一、子组件把数据传给父组件:this.$emit()步骤如下:compChart.vue为子组件,sdCompare.vue为父级页面。1、在子组件中声明变量sericesArr2、在子组件用$emit()传值给父页面。3、在父页面中使用子组件<comp-chart></comp-chart>的地方,使用@方法名="子组件方法名"...原创 2018-09-07 17:35:31 · 2179 阅读 · 1 评论 -
Vue : component lists rendered with v-for should have explicit keys.
vue项目警告: component lists rendered with v-for should have explicit keys. See https://vuejs.org/guide/list.html#key for more info.解决方案: 使用 v-for 的对象需添加 :key原创 2018-08-29 19:41:38 · 7311 阅读 · 0 评论 -
vue的生命周期
1、什么是vue生命周期? 答: Vue 实例从创建到销毁的过程,就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程,我们称这是 Vue 的生命周期。2、vue生命周期的作用是什么? 答:它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻辑。3、vue生命周期总共有几个阶段? 答:它可以总共分为8个阶段:...原创 2018-08-02 18:12:50 · 276 阅读 · 0 评论 -
vue的单页应用中使用setInterval给函数定时,跳转至别的页面后依然在频繁访问接口的解决方案
1、使用setInterval()的时候取到它返回的id值。 2、在离开当前页面,执行销毁操作的时候使用clearInterval(id)来终止定时函数。原创 2018-08-11 12:07:08 · 3765 阅读 · 0 评论 -
vue 的生命周期实例
1、在test.vue文件内写好dom结构; 2、在script标签内写好beforeCreate(创建前),created(创建后),beforeMount(载入前),mounted(载入后),beforeUpdate(更新前),updated(更新后),beforeDestroy(销毁前),destroyed(销毁后); 3、在methods里写好change方法。 4、刷新页面...原创 2018-08-11 10:32:14 · 259 阅读 · 0 评论 -
npm run dev 报错:this dependency was not found:
根据提示执行下载指令。原创 2018-08-02 10:43:45 · 5574 阅读 · 0 评论 -
npm run dev 报错:missing script:dev
报错信息: 解决方法: package.json 里面没有 “scripts”: {“dev”: “xxx”} 这段了。原创 2018-07-31 18:38:23 · 50940 阅读 · 6 评论 -
运行vue项目前的环境配置
下载安装方式: https://www.runoob.com/nodejs/nodejs-install-setup.html原创 2019-03-19 15:00:08 · 1900 阅读 · 0 评论 -
Vue.js--获取网页的路由
参考原文:https://www.jianshu.com/p/cb918fe14dc6原创 2018-07-07 15:04:37 · 4785 阅读 · 0 评论 -
vue.js 获取url上的参数
方法一:原创 2018-06-27 14:14:17 · 9221 阅读 · 0 评论 -
Vue:父组件调用子组件内函数的方法
参考网址:https://blog.csdn.net/a5534789/article/details/53415201Demo:1、新建一个空的vue对象,命名为eventHub; 2、在父页面 hsi.vue 使用 this.root.eventHub.root.eventHub.root.eventHub.emit(‘function1’,’parame’); 随...原创 2018-06-29 18:17:46 · 19330 阅读 · 0 评论 -
vue:取route上的信息
this.$route.name 取url上最后一个路由的名称,?之前的路由名称。this.$route.matched取url上第一个路由的名称,最高一级的路由名称。原创 2018-09-20 17:56:40 · 1220 阅读 · 0 评论 -
响应路由参数的变化
官方文档:https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html#%E5%93%8D%E5%BA%94%E8%B7%AF%E7%94%B1%E5%8F%82%E6%95%B0%E7%9A%84%E5%8F%98%E5%8C%96原创 2018-09-20 18:38:10 · 602 阅读 · 0 评论 -
vue调函数时参数this的写法
js写法:@click="switchChecked(this)"Vue写法:@click="switchChecked($event)"原创 2019-07-25 14:54:47 · 1308 阅读 · 0 评论