分类：Vue

2020
11-08

解决VUE项目使用Element-ui 下拉组件的验证失效问题

解决VUE项目使用Element-ui 下拉组件的验证失效问题 问题描述：在使用Element-ui组件做项目开发时候有可能会使用下拉框组件,如果下拉框组件的option选项是使用v-if指令遍历的,这样也没有问题,但是如果加上multiple属性,也就是可以多选就会出现下拉框验证时失效问题.问题现象：如图所示,明明已经选择了选项,可是验证还是为空,因此不能提交请求解决思路：如果说找遍组件里的方法都无法获得我们适合使用的,那就要动用原生基本功了console.log一下v-model在此组件上绑定的属性,你发现你... 继续阅读 >
2020
11-06

vue router-link 默认a标签去除下划线的实现

我就废话不多说了，大家还是直接看例子吧~.router-link-active{text-decoration:none;}vue的router-link默认的a标签点击会有一个阴影补充知识：vue-router更改router-link点击时样式默认类：router-link-active：可以通过在样式表中重新定义基类：linkActiveClass：在创建路由时进行全局配置，linkActiveClass：/配置自定义类/以上这篇vuerouter-link默认a标签去除下划线的实现就是小编分享给大家的全部内容了，希望能给大家一... 继续阅读 >
2020
11-06

vue中的计算属性和侦听属性

计算属性计算属性用于处理复杂的业务逻辑计算属性具有依赖性，计算属性依赖data中的初始值，只有当初始值改变的时候，计算属性才会再次计算计算属性一般书写为一个函数，返回了一个值，这个值具有依赖性，只有依赖的那个值发生改变，他才会重新计算<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"co... 继续阅读 >
2020
11-06

vue 判断页面是首次进入还是再次刷新的实例

我就废话不多说了，大家还是直接看代码吧~<template><div>判断页面是首次进入还是再次刷新</div></template><script>exportdefault{data(){return{}},mounted(){//第一种方法//if(window.name==""){//console.log("首次被加载");//window.name="isReload";//在首次进入页面时我们可以给window.name设置一个固定值//}elseif(window.name=="isReload"){//... 继续阅读 >
2020
11-06

vue created钩子函数与mounted钩子函数的用法区别

vue created钩子函数与mounted钩子函数的用法区别 1：在使用vue框架的过程中，我们经常需要给一些数据做一些初始化处理，这时候我们常用的就是在created与mounted选项中作出处理。首先来看下官方解释，官方解释说created是在实例创建完成后呗立即调用。在这一步，实例已完成以下配置：数据观测(dataobserver)，属性和方法的运算，watch/event事件回调。然而，挂载阶段还没开始，$el属性目前不可见。这话的意思我觉得重点在于说挂架阶段还没开始，什么叫还没开始挂载，也就是说... 继续阅读 >
2020
11-06

如何利用vue实现波谱拟合详解

主页面-功能介绍小白初入职场第一篇总结，废话比较多，求轻喷~波谱拟合用来对某种材料或物质的谱图进行识别和分析，每种物质可以有多种成分，每种成分用component1、component2...表示，用Addanothercomponent和Removecomponent来控制每种成分的增加和删除，每种成分由多种原子核构成，即nuclei，用Addnucleus和Remove nucleus来控制每种成分内原子核数量，每新增一个原子核，波谱就会分裂一次，谱峰数量由（1->2->4->8..... 继续阅读 >
2020
11-06

关于Vue中$refs的探索浅析

最近公司在做一个新项目，出需求，原型图，UI图，接下来就轮到我了，画页面。在画页面的过程中，涉及到父子路由，于是，便自然想到了<router-view></router-view>，按照以往的操作，确定父子关系，配置好路由，就OK了。但是，对照需求文档，仔细一看，后期联调肯定要涉及父子页面传递参数啊，比如下图：我要在父页面拿到子页面form表单的数据,如何做？首先我想到的就是，通过this.router.push({name:"",params:{}}),将参数带... 继续阅读 >
2020
11-06

vue实现点击出现操作弹出框的示例

如上图所示，这次要实现一个点击出现操作弹框的效果；并将这个功能封装成一个函数，便于在项目的多个地方使用。具体思路是：封装一个组件，组件保护一个插槽，我们可以根据不同的场景，利用插槽随意在这个弹框里插入任何元素，这个弹框显示时根据我鼠标的点击位置，定位弹窗的位置，并在组件里面监听鼠标抬起事件，触发事件时将弹窗隐藏；接着在函数中利用createElement和appendChild方法将弹出框创建并插入到页面中；&n... 继续阅读 >
2020
11-06

前端vue如何使用高德地图

首先，注册Key1、注册开发者账号，成为高德开放平台开发者  2、登陆之后，在进入「应用管理」页面「创建新应用」3、为应用添加Key，「服务平台」一项请选择「Web端(JSAPI)」然后，书写代码   在vuecli public文件夹中的index.html添加导入 JSAPI的入口脚本标签<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="... 继续阅读 >
2020
11-06

解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题

解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题 如下所示：解决办法：删掉项目中node_modules文件夹;然后再重新下载一下cnpminstall补充知识：vue在npmrundev时报错Error:Cannotfindmodule‘xxx‘今天在做项目时出现了下面这个错误，找了很多博客，都说改一下代码写法就行了。不过视情况而定，有点时候有些代码改起来很麻烦，千丝万缕的关系，不是说改一下代码就行了的。然后就试了很多方法，最后发现是node版本的原因，当时用的是node的最新版本@14.6.0，个人认为是... 继续阅读 >
2020
11-06

vue 全局封装loading加载教程(全局监听)

vue 全局封装loading加载教程(全局监听) 前言：为了页面美观，请求接口的时候延迟没有数据，页面感觉狠卡顿，封装loading，请求接口成功后隐藏掉（我这是用的vant组件根据自己情况进行改变）。第一步：建立loading.vue<template><divclass="loading"><van-loadingsize="36px"vertical>加载中...</van-loading></div></template><script>exportdefault{props:{},data(){return{};},computed:{},created(){},mounted(){},};</script><stylescoped></... 继续阅读 >
2020
11-06

vue 使用vant插件做tabs切换和无限加载功能的实现

vue 使用vant插件做tabs切换和无限加载功能的实现 样例：1.创建vue项目，不再详述2.引入vant之前用过很多插件做这个功能，但是效果都不尽人意，出现各种问题，直到遇到vant这个插件，完美的解决了这些小问题，如有问题，欢迎联系我安装依赖npmivant-S在main.js中引入importVantfrom'vant';import'vant/lib/index.css';Vue.use(Vant);3.在页面中使用官方写的比我写的好多了，大家可以借鉴，看源代码可能比官方给的文档更直观官方文档我在文件中的使用，没有使用下拉刷新的功... 继续阅读 >
2020
11-04

Vue获取微博授权URL代码实例

1.在Vue页面加载时动态发送请求获取微博授权url1.1在components\common\lab_header.vue中写oauth动态获取微博授权URL//获取微博登录地址oauth(){//从后端获取微博登录地址oauth_post().then((resp)=>{console.log(resp)//{'code':'0','msg':'成功','data':{'url':url}}leturl=resp.data.url;this.weibo_url=url;})},1.2在vue的mounted函数中调用获取微博授权u... 继续阅读 >
2020
11-04

基于vue实现微博三方登录流程解析

基于vue实现微博三方登录流程解析 1.微博三方登录流程1.1前端获取认证code1.在Vue页面加载时动态发送请求获取微博授权url2.django收到请求的url后，通过微博应用ID(client_id)和回调地址(redirect_uri)动态生成授权url返回给Vue3.当用户点击上面的url进行扫码，授权成功会跳转我们的回调界面并附加code参数4.Vue获取到微博返回的code后，会将code发送给django后端(上面的redirect_uri)1.2获取微博access_token后端获取code后，结... 继续阅读 >
2020
11-04

vue 判断两个时间插件结束时间必选大于开始时间的代码

vue 判断两个时间插件结束时间必选大于开始时间的代码 效果展示：代码展示：<template><divid="date_time_picker"><van-buttonplaintype="primary"@click="showPopFn()">点击选择日期</van-button><van-fieldv-model="timeValue"placeholder="选择的日期结果"readonly/><van-popupv-model="show"position="bottom":style="{height:'40%'}"><van-datetime-pickerv-model="currentDate"type="date"@change="changeFn()"@confirm="confirmFn()"@cancel="cancelF... 继续阅读 >