一名女程序猿的博客

1. 先创建一个js文件//directive.js文件import Vue from 'vue'// v-dialogDrag: 弹窗拖拽Vue.directive('dialogDrag', { bind(el, binding, vnode, oldVnode) { const dialogHeaderEl = el.querySelector('.el-dialog__header') const dragDom = el.querySelector('.el-dia

由于当表单只有一个文本框时，按下回车将会触发表单的提交事件， 导致页面的刷新。解决方法1：加一个隐藏的文本框，即表单不只有一个文本框<el-form-item style="margin-bottom:0;display:none;"> <el-input></el-input></el-form-item>解决方法2：阻止form的enter(回车键)事件<el-form @submit.native.prevent> &

在项目中创建print.js文件，将下面代码复制粘贴//print.js// 打印类属性、方法定义/* eslint-disable */const Print = function (dom, options) { if (!(this instanceof Print)) return new Print(dom, options); this.options = this.extend({ 'noPrint': '.no-print' }, options); .

遇到的问题：项目第一次运行时，没问题不报错，然后保存项目，热更新重新加载时，控制台会输出以下信息，导致项目断开，需要重新运行这就是webpack 运行项目内存溢出(Last few GCs)解决方法安装increase-memory-limitnpm i -g increase-memory-limit在运行项目，热更新加载项目时就不会在报错内存溢出啦...

-webpack中的插件主要是用来完成loader和配置无法完成的事情-常见的几种Plugins： HtmlWebpackPlugin，MiniCssExtractPlugin，OptimizeCssAssetsWebpackPlugin，NamedChunksPlugin，ProvidePluginHtmlWebpackPlugin参考文档html-webpack-plugin插件默认会创建一个HTML模板，并自动引入打包生成的几个主要的chunk包也可以通过template属性配置自己的

混入：公共方法复用，可以使用混入，减少代码冗余定义一个js，将公共方法写入const mixin = { data() { return { msg: "混入信息" }; }, methods: { getmsg() { console.log(this.msg); } }};export default mixin;要用到这个公共方法的页面，将混入js引用，注册<script> import m.

<template> <div> <div class="fullscreen-button" @click="toggleFullscreen" v-show="is">全屏</div> <div class="fullscreen-button" @click="toggleFullscreen" v-show="!is">退出全屏</div> </div></template>

:data={需要传的参数}:data={id:memberId}<el-upload class="upload" ref="upload" :action="uploadUrl" :headers="uploadHeaders" accept=".jpg, .jpeg, .png, .bmp" :limit="1" :data={id:memberId} :before-upload="picBeforeUpload" :on-success="picSuccess" :

<div v-for="(item, index) in contractData" :key="index" class="contractItem" > ... <el-upload ref="upload" :action="uploadUrl" :headers="uploadHeaders" accept=".pdf, .jpg, .png, .jpeg" multiple .

<el-input v-model.trim="password" placeholder="请输入密码" @paste.native.capture.prevent="handlePaste"></el-input>@paste.native.capture.prevent事件修饰符说明:native: 表明这个是dom的原生事件,如果不加native, vue会认为paste是一个自定义事件,必须要在组件内手动触发, 那么在粘贴的时候自然就不会触发了

第一种：this.$router.push({ query: {} });第二种：let path = this.$route.path; //先获取路由路径this.$router.push(path); //再跳转路由路径，query参数没带过去，所以被清除了

vue项目中使用fullcalendar插件 （官网地址 https://fullcalendar.io/)1.npm下载"@fullcalendar/core": "^4.3.1","@fullcalendar/daygrid": "^4.3.0","@fullcalendar/interaction": "^4.3.0","@fullcalendar/timegrid": "^4.3.0","@fullcalendar/vue": "^4.3.1",2.页面引入-script-//引

总结了七种方法，1.路由懒加载路由配置,component: resolve => require(['@c/home/home'], resolve),引入路由var router = new VueRouter({ mode: 'hash', routes: [ { path: '/home', component: resolve => require(['@c/home/home'], resolve)

谷歌插件谷歌插件网 http://www.cnplugins.com/window电脑1.下载下来的安装包后缀名改成.rar2.解压到对应新建文件中3.有下划线的去掉下划线4.打开开发者模式-加载已解压程序就可以了在这里插入图片描述...

在mounted里监听popstate事件，change里面写要改变的方法逻辑，来改变高亮和面包屑<template> <!-- 菜单 --> <div class="menu"> <div class="btn" @click="isExpand"> <i class="iconfont iconcollapse"></i> </div>

用ref控制元素隐藏显示<div ref='box'>我是盒子</div>this.$refs.box.$el.style.display = 'none'或者在元素还未渲染使用setTimeoutsetTimeout(() => { _this.$refs.box.$el.style.display = 'none';}, 100);

vue项目优化打包上传到线上后，加载很慢，使用gzip安装compression-webpack-plugincnpm install compression-webpack-plugin --save-devvue.config.js配置Gzip压缩 // 导入compression-webpack-pluginconst CompressionWebpackPlugin = require('compression-webpack-plugin');// 定义压缩文件类型con

借鉴于：https://www.jianshu.com/p/d42c508ea9de官方推荐使用一种update:my-prop-name 的模式来替代事件触发，目的是为了优雅而不粗鲁的实现父子组件间的双向绑定！先来完成一个小功能：通过父组件按钮将子组件显示出来，如图：父组件代码：<template> <div> <input type="button" value="我是父组件中的按钮"

vue踩坑：vue+ element ui 表单验证有值但验证失败。要对应！！！！！！！！1+2=>31,2必须和3名称保持一致

当Vue项目部署至nginx服务器后会出现405错误，首先检查一下，请求接口的方法是否正确，然后看看请求是否发送到后台了，最后按照以下步骤执行！！！原因：出现这个错误，是因为未在nginx.conf中配置api的请求地址。解决方法：如我的api请求地址为：http://172.21.0.88:8080/api，那么我就在nginx.conf中的server{}里面添加以下配置：location /api/{ proxy_pass http://172.21.0.88:8080;}添加

准备工作 ： 环境要求vue cli要求node版本8或者更高（8.10.0+推荐） vue cli3 需要node版本>=8.9, （官方推荐：8.11.0+ ）有node的情况下就可以使用npm进行安装了1.打开项目文件夹进入cmd 输入 `npm install -g @vue/cli@3` 2.下载好之后输入vue create ‘你的项目名’ 回车创建3.接着就会进入问答环节（选择一些配置）3.1 如果你是第一次使用3.0版本的话，下面的第一个选项是没有的可以忽略

1、路由懒加载当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。所以在router文件夹下 index.js 做如下配置2、不生成.map文件webpack默认会生成map文件，map文件是用来调试代码的。此外，这里还要注意sourcemap的配置分 开发（dev...

页面刷新后，想保存页面未保存的数据。我们总是习惯于放在浏览器的sessionStorage和localStorage中。但是用了vue后，vuex便可以被应用了。vuex优势：相比sessionStorage，存储数据更安全，sessionStorage可以在控制台被看到。vuex劣势：在F5刷新页面后，vuex会重新更新state，所以，存储的数据会丢失。为了克服这个问题， vuex-pe...

vue在引用路径的时候可以用 ./ 的写法引用如下：import './api/index'这个代表在相同文件下绝对路径的意思。项目中还有常见的@用法：import util from '@/assets/js/util'这个@是在 webpack.base.conf.js 文件里配置的，找到下面这段话 resolve: { extensions: ['.js', '.vu...

页面传的数值动态改变，接口接受的参数也就动态更改，但接收的数据有时候不会及时不变，通过this.$forceUpdate()页面强制刷新来解决这个问题

vue+element-ui中table常见问题转载 https://blog.youkuaiyun.com/gao_xu_520/article/details/80049254

大家熟知适用于Vue的组件库很多在做移动端的Vue项目中适用Mint-UI,Mui,Vant这三个，但在我做项目中这三个组件都用过，前两个坑很多（Mint-UI,Mui），在引入相关组件之后，会出现路由无法配置，图标无法更改等一系列问题，强烈推荐使用Vant！！！！！Vant官网有详细安装说明https://youzan.github.io/vant/#/zh-CN/quickstart...

现在Vue流行axios进行数据请求这个个项目中接口域名基本一致，所以在引入axios后设置全局配置可以省略每次调接口的地址：在每次调接口时直接写文档接口,不加斜线eg: url：“api/postcomment”在post传参时遇到问题：请求内容参数可以打印到，但是参数却不存在所以思考是不是参数格式问题引入qs模块，转换格式（注：qs是一个增加了一些安全性的查询字符串解析和序...