分类：VUE

2020
10-24

Vue表单提交点击事件只允许点击一次的实例

常用出现场景：商城点击订单提交1、使用Vue封装事件body：<template><div><el-button@click.once="submitOrder()">提交订单</el-button></div></template>方法：methods:{submitOrder(){//处理逻辑}}2、使用原生JS事件在数据data里面声明一个flag属性data(){return{isSubmit:true;}}body:<template><div><el-button@click="submitOrder()">提交订单</el-button></div></template>方法：methods:{submitOrder... 继续阅读 >
2020
10-24

vue-cli —— 如何局部修改Element样式

最近在做vue项目时用到了Element，发现这玩意儿用起来很舒服，很新颖，上手也很快，而且效果足够酷炫。但是后面发现一个很大的问题，那就是Element的样式有限，这极大地限制了项目的应用广度，所以我们有必要对Element内部的CSS进行一定的覆盖，来改变其样式。在修改Element样式时，遇到了一些问题，这里简单做一些记录，便于以后查阅。我在用el-switch做开关切换时，使用默认样式：代码如下：效果：现在我想把蓝色字... 继续阅读 >
2020
10-24

Vue select 绑定动态变量的实例讲解

Vue select 绑定动态变量的实例讲解 概述根据后台的数据生成多个select，由于数据的数量不定，所以v-model绑定的变量名也不定。所以通过数据的id或者下标进行变量拼接。页面能够成功渲染，但是当进行下拉框的选值时，组件不刷新，选中的结果并没有展示Code<divv-for="(item,index)intagAllDate":key="index"><el-form-item:label="item.name"><el-selectv-model="editData['line_'+index]"multipleplaceholder="请选择"style="width:100%;">... 继续阅读 >
2020
10-24

关于vue属性使用和不使用冒号的区别说明

关于vue属性使用和不使用冒号的区别说明 vue中冒号：是v-bind的缩写。一直最常见的做法是代表绑定一个变量。但是我今天用到复选框是时候缺出现选不中的情况<el-checkboxv-model="checked">备选项</el-checkbox>checked:1但是没有选中然后我想可能是没有写true-label，于是这样写。因为true-label接收一个数值或者字符串。我的默认值是数值。<el-checkboxv-model="checked"true-label=1false-label=0>备选项</el-checkbox>但是还是没有选中然后看了但是定义的chec... 继续阅读 >
2020
10-24

Vue实现简单的留言板

Vue实现简单的留言板 本文实例为大家分享了Vue实现简单的留言板的具体代码，供大家参考，具体内容如下<!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><linkrel="stylesheet"type="text/css"href="css/bootstrap.css"/><styletype="text/css">body{/*margin:0;*/padding-left:10px;}#app{width:400px;height:auto;}.form-group{margin-top:10px;}.form-grouptextarea{resize:none;height:144p... 继续阅读 >
2020
10-24

Vue+Bootstrap收藏（点赞）功能逻辑与具体实现

Vue+Bootstrap收藏（点赞）功能逻辑与具体实现 Vue+Bootstrap收藏（点赞）功能逻辑与具体实现（原创），供大家参考，具体内容如下点赞功能逻辑点赞功能说明：连接了数据库，在有登录功能的基础上。点赞功能具体实现目标，如下：1、用户点击一次加入收藏，数量加一，再次点击取消收藏，数量减一；2、当多用户收藏，喜欢数量累加；3、如果用户已收藏，显示红心（点亮图标），未收藏，否之。；点赞功能说明：点赞功能用到两个表，点赞表和数据表的count。功能分析：具体实现如图... 继续阅读 >
2020
10-23

vue实现简单加法计算器

vue实现简单加法计算器 本文实例为大家分享了vue实现简单加法计算器的具体代码，供大家参考，具体内容如下只需要简单两步1.模板结构，设计界面2.处理数据和控制逻辑代码：<!DOCTYPEhtml><html><head><title></title></head><body><divid="app"><div><h1>简单计算器</h1><div><span>数值A：</span><span><inputtype="text"v-model='a'>//通过v-model指令实现数值a的绑定</span></div><div><span>数值B：</span><span><inpu... 继续阅读 >
2020
10-23

解决vue安装less报错Failed to compile with 1 errors的问题

解决vue安装less报错Failed to compile with 1 errors的问题 1、创建vue项目后安装less，执行npminstalllessless-loader--save-dev下载版本为：less-loader@6.1.0，less@3.11.3，重启服务报错，报错信息如下：2、报错原因less本版太高需要降低版本，执行代码先移除之前版本：npmuninstallless-loader下载指定版本：npminstallless-loader@5.0.0-D3、重启代码就可以了，若还是报错可移除文件node_modules，重新下载cnpminstall补充知识：vue项目运行报错：94%assetoptimizati... 继续阅读 >
2020
10-23

使用vue构建多页面应用的示例

先了解一些单页面和多页面的区别mm多页应用模式MPA单页应用模式SPA应用构成由多个完整页面构成一个外壳页面和多个页面片段构成跳转方式页面之间的跳转是从一个页面跳转到另一个页面页面片段之间的跳转是把一个页面片段删除或隐藏，加载另一个页面片段并显示出来。这是片段之间的模拟跳转，并没有开壳页面跳转后公共资源是否重新加... 继续阅读 >
2020
10-23

vue 单页应用和多页应用的优劣

多页应用每一次页面跳转的时候，后台服务器都会给返回一个新的html文档，这种类型的网站也就是多页网站，也叫做多页应用。为什么多页应用的首屏时间快？首屏时间叫做页面首个屏幕的内容展现的时间，当我们访问页面的时候，服务器返回一个html，页面就会展示出来，这个过程只经历了一个HTTP请求，所以页面展示的速度非常快。为什么搜索引擎优化效果好（SEO）？搜索引擎在做网页排名的时候，要根据网页内容才能给网页权重，来进行网... 继续阅读 >
2020
10-23

记一次vue跨域的解决

好久不见，今天想写的是前段时间碰到的一个小问题。其实故事背景是前端的同学跟我说他们前端请求不了我后端的数据，说是跨域了。其实跨域的问题，在如今前后端的时代非常常见，如果图方便的话，一般是在后端的请求以及拦截器中设置header，但是有一些业务需求单纯后端是解决不了的。还是需要前端自行来处理，这次碰到的就是前端需要自行处理的情况。这里我不细说跨域的解决方案，只聊聊我是怎么解决的。如果大家想要知道更详细的跨... 继续阅读 >
2020
10-23

Vue全局使用less样式,组件使用全局样式文件中定义的变量操作

Vue全局使用less样式,组件使用全局样式文件中定义的变量操作 当你想要在vue项目的一个组件中使用全局样式文件中定义好的变量，此时只在main.js中import是不行的。目录结构如下：即在MHeader.vue中想要使用src下的less下的variables.less文件中定义好的变量。此时，只用import在main.js中导入variables.less文件是会报错的。解决办法：1、安装less和less-loadernpmilessless-loader-D2、要想全局使用还需使用一个插件(sass-resources-loader),没有写错，就是sassnpmisass-resources-lo... 继续阅读 >
2020
10-23

vue将文件/图片批量打包下载zip的教程

vue将文件/图片批量打包下载zip的教程 vue将文件/图片批量打包下载各种格式都可以,只要url能够打开或者下载文件即可.1.通过文件的url,使用js的XMLHttpRequest获取blob2.将blob压缩为zip由于异步并行加载文件,速度还是蛮快的,我141个4M多的图片,1分左右加载完成,49个4M的图片4秒添加依赖//npminstalljszip//npminstallfile-saver在页面的script中引入依赖importJSZipfrom'jszip'importFileSaverfrom'file-saver'代码/**文件打包*arrImages:文件list:[{fi... 继续阅读 >
2020
10-23

vue+springboot+element+vue-resource实现文件上传教程

vue+springboot+element+vue-resource实现文件上传教程 vue页面设置<el-uploadclass="upload-demo"action="":before-upload="beforeUpload"//上传前操作:before-remove="beforeRemove"//移除钱操作:multiple="false"//禁止多选:http-request="myUpload"//文件上传,重写文件上传方法,action的路径不会起作用accept=".jar"//限制文件选择类型:drag="false":data="param"//参数:file-list="fileList"... 继续阅读 >