【Vue2从基础到进阶】
Vue从基础到实战进阶
不停喝水
Web. Write Less,Do More
展开
-
[跨越5种解决方案] 浏览器安全协议 vonfig.js cors库 配置请求头 nginx
1.浏览器禁用安全协议如果两个地址的 协议, 地址,端口 三者任何一个不一样 发送ajax请求就会发生跨域的行为在公司开发的过程中, 只需要自己给浏览器设置特定的字段,禁用了他的安全协议就可以任意访问在原始桌面浏览器上面 右键新建快捷方式, 然后再上面右键 查看属性; 然后再属性的目标位置, 加上一个空格,再接上下面的一段话; 并且要在c潘下面创建 一个下面的目录 --disable-web-security --user-data-dir=C:\MyChromeDevUserDa原创 2020-12-01 21:51:00 · 206 阅读 · 0 评论 -
【vue】用el-checkout-group实现穿梭框el-transfer效果
vue 用el-checkout-group实现穿梭框效果。原创 2022-08-08 10:20:37 · 826 阅读 · 0 评论 -
【vue】el-table里面点击展开嵌套el-input和el-select 动态切换数据
【vue】el-table里面点击展开嵌套el-input和el-select 动态切换数据。原创 2022-08-02 17:51:49 · 2765 阅读 · 3 评论 -
【vue】copy功能中替换字符串中的空格,换行符\r\n或\n去除
【vue】copy功能中替换字符串中的空格,换行符\r\n或\n去除。原创 2022-07-25 21:38:52 · 4289 阅读 · 0 评论 -
【vue】表单锚点定位
vue表单锚点定位原创 2022-07-04 23:57:34 · 571 阅读 · 0 评论 -
【vue】 如何使ElementUi中的el-dropdown传入多参数
【vue】 如何使ElementUi中的el-dropdown传入多参数原创 2022-07-04 18:10:15 · 1145 阅读 · 0 评论 -
【vue】el-date-picker 禁止选中当前时间以后的时间 (default-time),以及清空bug处理
el-date-picker中default-time原创 2022-06-23 21:51:19 · 2924 阅读 · 0 评论 -
【vue】笔记本默认设置125%或者150%缩放,导致布局错乱的解决方法
【vue】笔记本默认设置125%或者150%缩放,导致布局错乱的解决方法原创 2022-06-20 22:04:52 · 8748 阅读 · 29 评论 -
【vue】父子组件传值多个参数时候如何通过v-bind简写?
父子组件传值多个参数时候如何通过v-bind简写原创 2022-06-15 14:09:10 · 1919 阅读 · 0 评论 -
【vue】window.open默认打开txt文件,改为下载文件
window.open默认打开txt文件,改为下载文件原创 2022-06-14 10:42:52 · 2034 阅读 · 3 评论 -
【Vue】关于Vue代码可读性的几点思考
近来入坑了一个Vue项目,感觉掉进了祖传屎山中,可读性极差,更别说可维护性了。故借此提几点关于Vue代码可读性的建议原创 2022-06-02 10:55:18 · 470 阅读 · 0 评论 -
【vue】分页pagination 和搜索search联动 bug处理
<!-- 搜索 --> <el-col :xs="8" :sm="6" :md="6" :lg="6"> <el-input v-model.trim="query.keywords" placeholder="请输入产品名称搜索" clearable @clear="search()" @keyup.enter.native="search()"> <el-button slot="append" ic.原创 2021-01-21 10:06:44 · 403 阅读 · 0 评论 -
【vue】el-upload 图片上传的封装
<el-form-item label="产品图片"> <el-upload action="/api/common/uploadImg" :headers="requestHeader" accept=".png, .jpg, .gif, .jpeg" list-type="picture-card" :file-list=.原创 2021-01-18 23:24:29 · 744 阅读 · 1 评论 -
【vue】表单校验之上传文件校验
问题描述:正常吧fileList放在payForm里面的话,验证每次输入其他input都会导致上传文件的刷新所以需要把保存文件和验证文件分开存储,来验证,这样才能不出现界面BUG <el-form ref="payForm" :model="payForm" :rules="payFormRules" label-width="150px"> <el-form-item label="支付款项账号:" prop="pay_account"> &原创 2021-01-18 23:22:26 · 2230 阅读 · 0 评论 -
【vue】数据字典和 模块设计
<template> <el-main> <h1>数据字典</h1> <div class="search-box" style="overflow:hidden"> <div style="float:right"> <el-button type="primary" size="small" @click="showDialog('add')">新增字典</e...原创 2021-01-18 23:23:20 · 811 阅读 · 0 评论 -
【vue】 SKU属性值 和 数据字典的多层数据展示
<el-table-column prop="dic_data" label="字典项"> <template slot-scope="{ row }">{{ row.dic_data }} </template> </el-table-column>// 获取字典数据 async getDictList() { this.loading = true const params = { ..原创 2021-01-18 23:23:30 · 382 阅读 · 0 评论 -
【vue】=> 上传图片测试和打包上线404服务的问题
上传图片的问题这是封装的上传照片组件<template> <div> <el-upload :action="action" :headers="requestHeader" accept=".png, .jpg, .gif, .jpeg" list-type="picture-card" :file-list="fileList" :on-success="handleSuccess"原创 2021-01-18 23:23:04 · 434 阅读 · 1 评论 -
【vue】出现多个同样的组件如何封装组件封装复用
父组件里面<el-button type="primary" @click="showDialog()">添加品牌</el-button><el-button type="primary" icon="el-icon-edit" size="mini" @click="showDialog(scope.row)"></el-button><!-- 添加/修改品牌弹框 --><el-dialog title="操作品牌" :visi原创 2021-01-18 23:23:41 · 1197 阅读 · 0 评论 -
【vue】element 封装的分页使用
<el-pagination layout="total, sizes, prev, pager, next, jumper" background :total="pagination.total" :current-page.sync="pagination.current" :page-size.sync="pagination.limit" />import paginati...原创 2021-01-29 09:20:34 · 139 阅读 · 0 评论 -
【vue 】dic_data 数据字典
<template> <el-main> <h1>数据字典</h1> <div style="overflow:hidden"> <div style="float:right"> <el-button type="primary" size="small" @click="showDialog('add')">新增字典</el-button> <原创 2021-01-25 20:48:12 · 1134 阅读 · 0 评论 -
【vue】element 分页封装.js
/** * @type {import('vue').ComponentOptions<import('vue').default>} */const paginationMixin = { data() { return { pagination: { limit: 10, current: 1, total: 0 } } }, methods: { /** * @pa.原创 2021-01-29 11:28:53 · 170 阅读 · 0 评论 -
【vue】excel导出
<el-col :span="4" :offset="15"> <el-button type="primary" size="small" @click="exportClient">导出客户</el-button> <el-button type="primary" size="small" @click="bathImportAction('action:show')">批量导入</el-button>原创 2021-02-01 15:33:30 · 179 阅读 · 0 评论 -
【Vue】数据增删 进行computed计算动态筛选 不再显示已添加的数据
<el-option v-for="item in lastCLue" :key="item.id" :label="item.clue_title" :value="item"></el-option>createProjectDialog: { visible: false, projectForm: { clue_id: undefined, project_title: '', p原创 2021-03-09 19:54:58 · 217 阅读 · 0 评论 -
【vue】element 前端处理 省市区三级联动 公共组件
src/components/AreaCascader/index.vue<template> <el-cascader :value="data_array" :options="areaData" @change="handleChange"></el-cascader></template><script>import areaData from '@/utils/area.json'export default { n原创 2021-03-15 19:31:34 · 400 阅读 · 0 评论 -
【vue】前端下载文件自定义文件名称
下载文件自定义文件名称文件下载名称不想和后端提供的URL一样怎么办呢?1.首先给按钮去绑定一个事件2.正常我们的下载处理方式3.自定义下载的文件名字文件下载名称不想和后端提供的URL一样怎么办呢?1.首先给按钮去绑定一个事件按钮的处理 <div class="list-item-download" @click="downLoadArticle(item.url , item.title) </div>2.正常我们的下载处理方式1.直接通过后端返回的url,原创 2022-05-31 16:09:51 · 5443 阅读 · 2 评论 -
【Vue】Video.js 提示no compatible source was found for this media
video.js问题:video.js 提示no compatible source was found for this media1.html2.js3.重点问题:video.js 提示no compatible source was found for this media查了很多文章,凡在vue项目中引入video.js插件,都会出现视频播放器中间出现一个大叉号导致视频无法播放,同时控制台出现no compatible source was found for this media的错误提醒原创 2022-05-09 16:35:25 · 8996 阅读 · 3 评论 -
【Vue】vue中过渡动画之列表添加删除动画实现
vue中过度动画之列表添加删除动画实现一:原因二:思路三:实现四:注意点一:原因UI设计师对接时提出的优化做购物车页面,勾选进购物车的商品列表可删除,但是删除调完接口刷新数据, 消失的太突兀了,所以要优化一下。二:思路1.完成页面结构及 添加数据和删除数据逻辑2.包裹列表使用transition-group标签,将该有的类名加上。这样写了效果是有了,但是过渡比较生硬,如何让它平滑一点?3.加v-move类名三:实现<template> <div id="app原创 2022-02-16 17:32:12 · 1778 阅读 · 2 评论 -
Vue => 造轮子-创建一个Vue-Cli
原创 2021-09-25 00:04:50 · 100 阅读 · 0 评论 -
Vue => Vue监听组件滚动事件
在dom元素上加ref,利用this.$refs.content获取到元素,添加滚动监听事件,希望得到的结果是滚动触发事件scrollHander,现在情况是失效,并没有监听到滚动动作,或者说滚动动作并没有出发事件问题:监听事件的参数写错了,带括号就直接调用了函数,去掉括号就好了<template> <div class="main"> <div class="content" ref="recordwrapper"> </div>.原创 2021-09-08 16:27:51 · 1421 阅读 · 0 评论 -
Vue =>在vue项目中使用百度地图API,根据经纬度获取省市区具体名称
1、在百度地图开放平台注册账号并登录网址:http://lbsyun.baidu.com/index.php?title=jspopularGL2、在我们的vue项目中的public文件夹下的index.html中引入并记得替换上你的ak<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=你的ak"></script>3.vue页面methods:getLocation() {原创 2021-08-18 15:12:32 · 1548 阅读 · 0 评论 -
Vue => Vue+Element-ui<InfiniteScroll 无限滚动应用>
0.需求分析在产品给我提了一个需求的时候,不想要手动点击分页 那么久只能想到滚动刷新请求,正好element是有这个应用的,拿来吧你!1.页面布局<template> <div id="box"> <div class="box" v-infinite-scroll="load" infinite-scroll-disabled="disabled" > <ul class="list" > <l原创 2021-08-05 10:32:47 · 535 阅读 · 2 评论 -
Vue => 使用keep-alive实现页面返回上一页缓存筛选内容以及分页
APPmain.vue<template> <section class="app-main"> <transition name="fade-transform" mode="out-in"> <router-view :key="key" /> <keep-alive> <router-view v-if="$route.meta.keepAlive" :key="key" />原创 2021-07-30 14:48:56 · 542 阅读 · 0 评论 -
Vue => Element form表单方法resetFields无效 使用 Object.assign巧妙重置data数据
重置数据如果在搜索想重置数据千万不要这样去重置如果有100个数据,那么要100个数据手动区赋值?nonono无法清空之前遇到resetFields无效时都是自己手动用this.ruleForm = Object.assign({},this.ruleForm, this.$options.data().ruleForm)这种方式来清数据,用了这么久的form表单,resetFields真的是有时候生效有时候又不生效的,于是看了下Element源码,终于发现了其中的奥秘源码的f原创 2021-07-19 14:18:26 · 1169 阅读 · 2 评论 -
Vue => Element-UI 入门基本用法,按需导入,表单校验隐藏用法和源码解析
简介饿了么开源组件库github 4w+ star基本用法1.初始化项目vue create element-test2.安装npm i element-ui -S3.Vue 插件import ElementUI from 'element-ui'Vue.use(ElementUI)4.引用样式import 'element-ui/lib/theme-chalk/index.css'5.element-ui 案例<template> <div i原创 2021-07-18 16:07:20 · 887 阅读 · 1 评论 -
Vue进阶 => 组件通信 provide 和 inject,过滤器 filter,监听器 watch,class 和 style高级用法,Vue.observable
1.组件通信 provide 和 inject<html> <head> <title>组件通信 provide 和 inject</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="root"> <原创 2021-07-10 17:37:24 · 343 阅读 · 0 评论 -
Vue进阶 =>源码分析$emit 和 $on,directive,Vue.component ,Vue.extend,Vue.use
1.$emit 和 $on其实就是事件绑定和数据绑定下面的例子:我们可以打开断点调试一步步的看下去就懂了<html> <head> <title>$emit 和 $on</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div原创 2021-07-07 23:38:31 · 315 阅读 · 1 评论 -
lodash => lodash使用 或某个函数使用 例如:cloneDeep()使用
this.editForm = _.cloneDeep(data)原创 2021-01-11 15:36:51 · 450 阅读 · 2 评论 -
插槽显示图片 => 并且可以点击预览
<el-table-column prop="auth_file" label="下单附件"> <template slot-scope="{row}"> <!-- <img :src="scope.row.auth_file" style="height:70px"> --> <el-image style="width: 100px; height: 10原创 2021-01-18 23:02:22 · 403 阅读 · 0 评论 -
vue => 文件上传失败问题 file传送失败
问题:传xlsx文件失败,传不过去1.问题分析我传之前能打印出data.file2.为什么打印的时候只有uid:xxxxxne这个时候,我们要仔细看下我们的参数名称,headers里面的参数,会发现,需要form-data!!!的type才能传过去失败情况code:uid:xxxxxne这样才是传成功的form Data 是个file:(binary)...原创 2021-03-30 20:09:45 · 1207 阅读 · 0 评论 -
vue => JSON格式转换显示
场景:如果后端可能直接给你返回json格式的数据使用:如果不是JSON就正常返回字符串1 .显示logContent(xxx.abc.jsonA)2.计算属性 computed: { logContent() { return function(data) { try { return JSON.parse(data) } catch (error) { return data原创 2021-03-29 13:55:09 · 283 阅读 · 0 评论