分类：vue

2022
06-18

Vue 详解mixins混入用法大全

Vue 详解mixins混入用法大全 目录前言一、什么是Mixins？二、什么时候使用Mixins？三、如何创建Mixins？四、如何使用Mixins？五、Mixins的特点六、Mixins合并冲突七、与vuex的区别八、与公共组件的区别前言当我们的项目越来越大，我们会发现组件之间可能存在很多相似的功能，你在一遍又一遍的复制粘贴相同的代码段（data，method，watch、mounted等），如果我们在每个组件中去重复定义这些属性和方法会使得项目出现代码冗余并提高了维护难度，针对这种情况官方... 继续阅读 >
2022
06-13

vue实现zip文件下载

本文实例为大家分享了vue实现zip文件下载的具体代码，供大家参考，具体内容如下el-button按钮<el-buttonsize="mini"type="success"@click="downloadHandle(fileName,fileLocation)">下载</el-button>js处理说明request拦截器request.jsaxios引入并创建axios实例，request拦截器添加importaxiosfrom'axios'//创建axios实例constservice=axios.create({baseURL:'',//api的baseURLtimeout:20000,//请求... 继续阅读 >
2022
06-10

vue使用rules实现表单字段验证

vue中表单字段验证的写法和方式有多种，本博客介绍三种较为常用的验证方式。1.写在data中验证表单内容<!--表单--><el-formref="rulesForm":rules="formRules":model="rulesForm"label-width="200px"><el-form-itemlabel="用户名称:"prop="userName"><el-inputv-model="rulesForm.userName"style="width:300px"maxlength="50"/></el-form-item></el-form><el-form>：代表这是一个表单<el-form... 继续阅读 >
2022
05-27

Vue项目中token验证登录(前端部分)

本文实例为大家分享了Vue项目中token验证登录的具体代码，供大家参考，具体内容如下1、前言最近在做毕业设计，我是做后端的，前端并不是很懂，看vue这个框架看了近两个礼拜才有点入门的感觉，所以这篇文章写的可能不怎么好，仅作记录，有什么不对或不足的地方欢迎大神指出。2、问题做一个登录界面，我选择的是用token进行验证登录，我用的前端框架是Vue.js和element-ui,如何在vue中使用token进行验证登录。3、思考1、利用token... 继续阅读 >
2022
05-27

Vue实现用户登录及token验证

Vue实现用户登录及token验证 在前后端完全分离的情况下，Vue项目中实现token验证大致思路如下：1、第一次登录的时候，前端调后端的登陆接口，发送用户名和密码2、后端收到请求，验证用户名和密码，验证成功，就给前端返回一个token3、前端拿到token，将token存储到localStorage和vuex中，并跳转路由页面4、前端每次跳转路由，就判断localStroage中有无token，没有就跳转到登录页面，有则跳转到对应路由页面5、每次调后端接口，都要在请求头中加token6、后... 继续阅读 >
2022
05-27

VUE实现token登录验证

VUE实现token登录验证 本文实例为大家分享了VUE实现token登录验证的具体代码，供大家参考，具体内容如下实现这个登录功能的过程真是一波三折，中途出现了bug，整了两三天才解决了问题，心力交瘁，简直一个头两个大，感觉自己的毅力和耐心又提升了一个层次。好在最终在同学的帮助下解决了bug，不过我又再次感受到了作为一个菜鸟的浅薄，大佬的问题屡次触及到我的知识盲区......现在详细地记录一下实现token登录验证的步骤，以防以后再犯错。1.封装store对... 继续阅读 >
2022
05-24

vue3实现一个todo-list

vue3实现一个todo-list 目录功能介绍项目的搭建可以参考这篇文章相关代码总结实现方式不是最优,主要是为了学习vue3的一些新语法以及属性功能介绍项目的搭建可以参考这篇文章vue3.x+vite+element-ui+vue-router+vuex+axios搭建项目相关代码index.vue<template><divclass="todo-list"><el-cardclass="box-card"><template#header><divclass="card-header"><span>工作计划</span><el-buttonclass="... 继续阅读 >
2022
05-20

Vue2.x配置路由导航守卫实现用户登录和退出

Vue2.x配置路由导航守卫实现用户登录和退出 目录前言一、配置路由导航守卫1.全局导航守卫2.局部导航守卫二、用户登录1.axios配置2.用户登录代码三、用户退出1.实现代码总结前言之前在Vue的学习中通过路由导航守卫控制实现了用户登录模块的功能，现在再次做项目时又要通过Vue配置路由导航守卫来实现相同的功能，在此将实现过程进行记录与总结（本文基于Vue2.x进行实现）提示：以下是本篇文章正文内容，下面案例可供参考一、配置路由导航守卫1.全局导航守卫如果项目中只... 继续阅读 >
2022
05-20

Springboot+Vue-Cropper实现头像剪切上传效果

使用Vue-Cropper这一组件实现头像上传，供大家参考，具体内容如下效果展示先看一下效果吧，如果效果不能满足你的需求，就不必再浪费时间往下看了点击选择图片之后然后再点击上传图片就可以上传成功，具体效果和页面布局就是这样前端代码使用先建议详细阅读vue-cropper官方文档，里面介绍的很详细，可以根据自己的需求进行修改：链接补充一点：整个项目中使用了elelment-ui组件库，使用前先导入element-ui关于解释我会在代码中添加... 继续阅读 >
2022
05-20

Springboot+Vue-Cropper实现头像剪切上传效果

使用Vue-Cropper这一组件实现头像上传，供大家参考，具体内容如下效果展示先看一下效果吧，如果效果不能满足你的需求，就不必再浪费时间往下看了点击选择图片之后然后再点击上传图片就可以上传成功，具体效果和页面布局就是这样前端代码使用先建议详细阅读vue-cropper官方文档，里面介绍的很详细，可以根据自己的需求进行修改：链接补充一点：整个项目中使用了elelment-ui组件库，使用前先导入element-ui关于解释我会在代码中添加... 继续阅读 >
2022
05-17

vue使用Google Recaptcha验证的实现示例

vue使用Google Recaptcha验证的实现示例 我们最近的项目中需要使用谷歌机器人验证，这个最主要的就是要有vpn，还需要有公司申请的google账号（自己申请的没用）用于商用的，利用这个账号去申请秘钥，然后有了秘钥之后就可以了。部分代码如下：1.首先正是我封装的google机器人验证组件：<template><divref="grecaptcha"></div><!--<divid="robot"></div>--></template><scriptsrc="http://www.recaptcha.net/recaptcha/api.js?οnlοad=ReCaptchaLoad... 继续阅读 >
2022
05-17

解决vue中使用swiper 插件出错的问题

由于我自己在写一个demo时候用到了该插件，出现了一些问题，所以就简单查了一下该插件的用法以及一些常见的错误1.出现Get.../maps/swiper.min.js.map500(InternalServerError)使用min版本时缺少SourceMap文件1.禁止SourceMap提示，删除swiper.min.js文件的最后一行//#sourceMappingURL=swiper.min.js.map即可2.如需要使用SourceMap，完整包里面有该文件swiper.min.js.map，请放在相应的位置。关于SourceMap2.出现不能... 继续阅读 >
2022
05-17

vue中v-model指令与.sync修饰符的区别详解

目录v-model.sync细微之处的区别总结功能作用场景：v-model<!--父组件--><template><!--v-model指令是语法糖--><Childv-model="model"></Child><!--把v-model指令展开后相当于下面的代码--><!--v-model绑定的默认事件是input,默认prop是value属性--><Child:value="model"@input="model=$event"></Child></template>你也可以通过子组件中的model选项来修改v-model... 继续阅读 >
2022
05-15

JS基于VUE组件实现城市列表效果

本文实例为大家分享了基于VUE组件实现城市列表效果的具体代码，供大家参考，具体内容如下基本思想是，将城市列表数据缓存在本地然后在页面上用JS实现即时模糊查询和首字母定位查询等为了保护项目，删除了部分代码效果实现H5：<template><divid="city"><divclass="search-city-back"><divclass="search-city"><imgsrc="../assets/img/Shop/search.png">... 继续阅读 >
2022
05-12

基于Vue技术实现递归组件的方法

描述本文介绍的是基于Vue技术实现递归组件的方法。用Vue实现一级列表、二级列表的展示很简单，但是想要实现无限级，光是套上一个又一个的v-for是行不通的，这个时候就需要用到递归的方法，所谓递归，就是不断调用自身，递归组件就是不断调用自身组件来实现无限级列表展示。如下图：代码实现1、tree组件在目录下创建一个tree.vue的组件。<!--tree树形组件--><template><divclass="container"><divv-for="itemintr... 继续阅读 >