vue
文章平均质量分 54
哆来A梦没有口袋
偷偷拔尖,惊艳所有人
展开
-
手把手教学vue的路由权限
后台管理类系统大多都涉及权限管理,菜单权限,按钮权限。菜单权限对应 - 路由。菜单权限 - 根据用户角色不同,路由文件动态配置。vue-routerVue Routervue-router是vue项目在进行开发过程中必不可少缺少的插件,目前vue2依赖的是vue-router3,vue3依赖的vue-router4在进行权限控制之前一定要了解哪些路由需要权限哪些不需要知识点集结动态添加更多的路由规则。参数必须是一个符合 选项要求的数组。已废弃目前版本再使用该api会被提示已经废弃,但是暂时依旧可以使用原创 2022-06-13 14:45:48 · 4129 阅读 · 1 评论 -
vue实现自定义上传下载
在vue中灵活应用input, 写好上传样式,触发input回调实现上传例如:上传头像下载文件,主要是要理解下载时后端返回的数据是什么,前端到底要怎么处理,可以去看看前面的文章链接,这里直接写封装的方法例如: 下载excelaxios({},data,link.download = fileName //下载的文件名})}...原创 2022-08-18 10:10:42 · 536 阅读 · 0 评论 -
好用的vue项目插件
项目中可以使用的vue插件原创 2022-08-04 17:10:35 · 543 阅读 · 0 评论 -
bus总线的原理解析
非父子组件间传递数据有很多种方式,本文从官方文档开始解析bus总线的原理1.关于官方介绍从 Vue 1.x 迁移 — Vue.js在官方文档中对bus总线的介绍是使用,但是明确指出了复杂情况推荐使用vuex实现非父子组件直接的传值,bus总线应用在简单的项目1.怎么理解bus总线bus总线就是一个中间组件,触发事件,触发中间组件,监听中间组件的变化2.bus组件存在的条件和注册1.所有组件都可以访问2.可以使用$emit,$on,$off在项...原创 2022-04-06 11:24:18 · 2793 阅读 · 0 评论 -
elementui对分页的封装使用
在elementUI中有分页查询的插件 - 但是在项目中使用,可以对其进行二次封装,让分页插件使用起来更加方便快捷<template> <div :class="{'hidden':hidden}" class="pagination-container"> <el-pagination :background="background" :current-page.sync="currentPage" :page-size.原创 2021-03-10 14:55:19 · 516 阅读 · 0 评论 -
vue基本项目的搭建和基本功能的封装
前言 - vue项目是现在常用的项目,为了方便快速的开始一个项目,大多数情况下,我们都是使用脚手架搭建,当然也可以自己根据需求创建项目,这篇文章是利用脚手架搭建简单的vue的项目,并对其常用功能进行封装。在进行介绍之前,首先给大家安利一个网站 - 若依后台管理平台 -http://www.ruoyi.vip/,这个开源项目项目里面有很多功能是大多数的后台管理系统所用到的,里面包含了前端和后端代码,有兴趣的同学可以下载进行查看项目搭建前准备1.首先必须有node的环境,我是已经有了环境...原创 2021-03-08 10:46:51 · 789 阅读 · 0 评论 -
vue - 一定时间拦截到登录页
原理 - 每进行一次操作记录一次时间,定时器触发一定时间进行检查记录的时间与当前时间的间隔时间,判断间隔时间进行拦截到登录页直接建立js文件进行编写逻辑,在main.js进行引入即可webapp - 一定时间拦截到登录页import router from '@/router'import store from '@/store'var lastTime = new Date().getTime()var currentTime = new Date().getTime()var t原创 2020-11-02 10:01:53 · 159 阅读 · 0 评论 -
Avoided redundant navigation to current location
错误出现原因 - 在进行路由跳转时候,不小心写到了login跳转到login这是vue在3.0以上的版本中的错误提示,不允许从当前路由跳转到当前路由(所以先检查一下哪里路由跳转重复了吧)解决方案一将自身的vue-router进行降级yarn remove vue-routeryarn add vue-router@3.0解决方案二在router的(inedx.js)配置文件中添加如下代码import Vue from 'vue'import VueRouter ...原创 2020-11-02 09:51:45 · 5240 阅读 · 2 评论 -
Avoid mutating a prop directly since the value will be overwritten whenever the parent component
由于数据是由父组件传递到子组件,因此,修改数据,只能在父组件修改数据,prop使父子之间形成是单向数据流,父组件更新子组件会自动更新状态,但是子组件内部改变的了值,父组件是不知道的父组件子组件...原创 2020-08-18 11:24:38 · 168 阅读 · 0 评论 -
el-tree
1. 实现elementUI的el-tree基本的懒加载(通过点击触发事件,加载下一级) html部分 <el-tree ref="eltree" :data="treeData" :props="defaultProps" :load="loadNode" lazy ></el-tree> 实现懒加载 loadNode(nod...原创 2020-07-31 14:46:09 · 2176 阅读 · 0 评论 -
关于echarts那些事儿
引言:随着图表的应用增多,很多echarts的配置你一定要知道echarts官网:https://echarts.apache.org/zh/tutorial.html一.echarts的使用 项目中使用echarts分为两个方向,一个是利用脚手架原创 2020-06-08 15:39:56 · 1214 阅读 · 2 评论 -
elementUI的table翻页记录功能实现
首先要了解,table表分页,是在点击下一页会获取新一页的数据,在点击上一页,数据是重新请求的,因此若第一页有选中状态,点击任何页在回到第一页,选中状态会消失,这个时候的分页记忆功能就非常重要了实现分页功能很重要的一个方法 - toggleRowSelection也就是说,将页面显示的数据,要选中的行使用toggleRowSelection下面开始说实现的整个过程(边写边...原创 2020-04-14 17:05:33 · 1797 阅读 · 3 评论 -
vue的excel的文件的下载和上传
需求 - 下载后台返回的excel,修改后上传 界面显示 - html部分 - <el-upload class="upload-demo" :headers="myHeaders" //添加请求头部 action="http://10.19.13.31:8760/api/file/ex...原创 2020-04-08 16:27:52 · 457 阅读 · 1 评论 -
this.$set
简单介绍 - this.$set是进行手动更新界面的一个方法 原理 - 将数据变为响应式数据 首先 - vue能够更新数据,依赖与vue的数据是响应式的数据,defineproperty里面的get,set会监听数据变化,进而更新界面 那为什么push之类的方法可以更新界面呢??其实是因为vue的底层对对这些方法再一次进行了封装 什么时候需...原创 2020-03-27 11:29:36 · 2315 阅读 · 0 评论 -
vue路由的两种传参方式
1.params传值 传参 - 根据route的name进行匹配 this.$router.push({ name: '充电订单详情', //匹配route里面配置的name params: { detailFrom: 1 //传递的参数名和值 } }); 接收 data()...原创 2020-03-24 11:01:43 · 374 阅读 · 0 评论 -
vue - elementUI 将table表格动态合并
如:下图template部分 <el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px" >...原创 2020-03-18 22:12:34 · 3196 阅读 · 2 评论 -
vue- 验证码实现
注意的点: 后端返回的可能是二进制文件解决方法 - 将请求地址直接写在src中例子: template src的地址为后台地址,key为后台要求传递的值 简单粗暴的获取验证码 - 注意,这里的$refs是属于elementUI的哈...原创 2020-03-16 21:05:29 · 194 阅读 · 0 评论 -
vue的基础学习(六) - vuex
(1)概念:一个存放若干组件共用的数据的仓库 (2)什么时候使用vuex: 当用户交互比较复杂,组件之间数据传值比较复杂的时候使用 让项目易于维护,并且让项目代码更加简洁 (3)怎么使用? 1.下载 - npm i vuex / yarn add vuex 2. 创建文件与main.js同...原创 2020-02-04 15:02:34 · 313 阅读 · 0 评论 -
vue的基础学习(五)-生命周期
vue的生命周期 - 4大阶段,8个钩子函数 (1)创建前后 创建前 beforeCreate() :el,data(元素和数据)未初始化完成 创建后 created() :el未初始化,data初始化完成 ---》适合进行发送ajax并将数据进行绑定在data对象上 (2)挂载前后 挂载前: beforeMount(): el...原创 2020-02-04 15:01:36 · 93 阅读 · 0 评论 -
vue的基础学习(二)
一.{{}} - 胡须表达式 表达式里面写在哪里? - 表达式写在HTML的标签中 表达式里面写什么? - 可以直接写data中的数据,也可以写基本的js语句 <template> <div> <p>{{name}}</p> <p>{{num == 1 ? nam...原创 2020-02-04 14:27:22 · 336 阅读 · 0 评论 -
vue的基础学习(一)
一,vue的简单介绍 1. vue的官网地址 -https://cn.vuejs.org 2.什么是vue? vue是一套用于构建数据驱动用户界面的渐进式框架(js库)。Vue是建立于 Angular和React的基础之上,基于MVVM设计模式,保留了Angular和React的优点并添加了自己的独特成分,让框架的使用变得更加简单。 3. vu...原创 2020-02-04 14:02:39 · 120 阅读 · 0 评论 -
动态面包屑是实现
在vue项目中实现面包屑的动态变化 - vue+elment-ui在路由设置中配置一个新的项 - meta2.使用 - 遍历数据 - 数据 - this.$route.meta 实现动态的原理:监听了路径的改变,获取相应的meta ...原创 2020-01-31 10:28:15 · 1544 阅读 · 0 评论 -
vue的基础学习(三)-vue组件之间传值
vue组件之间传值: (1)父传子 原理: 父组件:利用自定义属性进行传值 子组件利用props进行接收使用 父组件<template> <div class="home"> <h1>父组件</h1> //传递给儿子 <...原创 2019-12-28 15:13:37 · 315 阅读 · 0 评论 -
vue基础学习(四) - 路由
1.什么是路由:router -路由定义了地址和组件的一一对应关系(一个url地址,对应一个页面级别的组件)2.创建路由 1.创建项目时创建路由 在进行vue项目创建的时候进行创建路由 搭建vue项目:node环境下利用vue-cli脚手架搭建项目 (1)全局安装脚手架 - np...原创 2019-12-27 15:38:42 · 201 阅读 · 0 评论 -
vue 项目创建,执行中遇到的问题
准备:创建vue项目需要借助npm去官网下载node.js :https://nodejs.org/zh-cn/Node.js是一个构建在谷歌V8引擎的js运行环境。Node.js的事件驱动、非阻塞IO模型使其轻量、高效。npm是Node.js的包管理系统,是全世界最大的开发库生态系统。创建vue项目: (1) window+r cmd 进入命令行工具 n...原创 2019-04-05 16:06:59 · 197 阅读 · 0 评论