分类：Vue

2022
09-29

vue实现文件上传和下载

本文实例为大家分享了vue实现文件上传和下载的具体代码，供大家参考，具体内容如下文件上传vue中的文件上传主要分为两步：前台获取到文件和提交到后台获取文件前台获取文件，主要是采用input框来实现<el-dialog:title="addName":visible.sync="dialogAddFile"width="500px"style="padding:0;"@close="resetAdd">附件名称：<el-inputv-model="addFileName"autocomplete="off"size="small"style="width:300... 继续阅读 >
2022
09-29

Vue使用百度地图实现城市定位

本文实例为大家分享了Vue使用百度地图实现城市定位的具体代码，供大家参考，具体内容如下Vue项目运行环境：Vue2.0，VueCli3.0步骤一：登录百度地图开放平台在控制台---->应用管理---->我的应用下面创建一个应用。目的是获取ak步骤二：在public文件夹的index.html文件中导入百度地图，拼上你的ak步骤三：在项目的根目录中创建vue.config.js文件如果有vue.config.js文件的话，直接添加以下代码即可。vue.config.js文件在VueCl... 继续阅读 >
2022
09-20

Vue使用高德地图实现城市定位

本文实例为大家分享了Vue使用高德地图实现城市定位的具体代码，供大家参考，具体内容如下一前端选择框点击跳转至地图选址页面<van-rowclass="address_item"><van-colspan="6"class="item-title">收货地址</van-col><van-colspan="18"><pclass="item"><van-iconname="arrow"class="arrow"/><van-iconname="location-o"/><span><van-fieldv-model="mapname"placeholder="点击选择"readonlyv-o... 继续阅读 >
2022
09-03

Vue之vue.$set()方法源码案例详解

在使用vue开发项目的过程中，经常会遇到这样的问题：当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的。这是因为新加入的属性不是响应式的，因此不会触发视图的更新，通常使用静态方法Vue.set()或者实例方法this.$set()解决，使用方式：对象：this.$set(target，key,  value)数组：this.$set(target，index,  value)... 继续阅读 >
2022
07-11

vue实现表单验证功能

本篇主要讲述如何基于NUXT的validate方法实现表单的验证。将验证方法封装后，使用的时候只需像:rules="filter_rules({required:true,type:'mobile'})"这么一行代码便可在页面中实现验证了。首先看一下实现效果一、新建一个validate.js文件：该文档中放所需的一些验证规则，下面直接看代码：/***Createdbyjiachenpanon16/11/18.**/exportfunctionisvalidUsername(str){constvalid_map=['admin','editor']return... 继续阅读 >
2022
07-11

Vue入门实战之天气预报

本文实例为大家分享了Vue实现天气预报的具体代码，供大家参考，具体内容如下效果图实现代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><metahttp-equiv="X-UA-Compatible"content="ie=edge"/><title>天知道</title><linkrel="stylesheet"href="css/reset.css"/><linkrel="stylesheet"href="css/i... 继续阅读 >
2022
07-06

Vue实现天气预报小应用

这是本人在自学vue框架时候所模仿的一个网站，可以查询一些城市的天气情况，大家可以看看：html代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><metahttp-equiv="X-UA-Compatible"content="ie=edge"/><title>焕鑫知道</title><linkrel="stylesheet"href="css/reset.css"/><linkrel="stylesheet"href="css/index... 继续阅读 >
2022
07-06

Vue+Openlayer中使用select选择要素的实现代码

Vue+Openlayer中使用select选择要素的实现代码 效果图：  实现代码：<template><divid="map"ref="map"style="width:100vw;height:100vh"></div></template><script>import"ol/ol.css";import{Map,View}from"ol";import{OSM,VectorasVectorSource}from"ol/source";import{VectorasVectorLayer,TileasTileLayer}from"ol/layer";importGeoJSONfrom"ol/format/GeoJSON";importSelectfrom"ol/interaction/Select";import{altKe... 继续阅读 >
2022
07-06

Vue实现天气预报功能

本文为大家分享了Vue实现天气预报功能的具体代码，供大家参考，具体内容如下1、功能描述在搜索框中输入城市，下方出现今天及未来四天的天气情况。搜索框下面固定了几个城市，点击可以快速查询。2、html代码<divid="app"><divid="srchbar"><inputtype="text"v-model="city"@keyup.enter="srch(city)"id="ipt"><a@click=srch(city)id="btn">search</a></div><nav>... 继续阅读 >
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="... 继续阅读 >