VUE2.x
爱生活,爱编程
在以后的日子里,我会不断的写博客,争取拿下大前端
展开
-
设置权限的操作,el-tree 展现
1, 设置权限的对话框 <!--分配权限的对话框 --> <el-dialog title="提示" :visible.sync="setRightDialog" width="30%" :before-close="handleClose"> <span>这是一段信息</span>原创 2021-03-07 13:47:17 · 431 阅读 · 1 评论 -
角色模块,编写边做笔记02-删除指定角色下的权限
一般遇到功能,你就去看api 文档,数据库的crud 都是后台的事情行,api 文档需要啥参数,我们就传递啥参数: async deletePre(row,pid){ const {data:res} = await this.$http.delete(`roles/${row.id}/rights/${pid}`) if(res.meta.status!==200) return this.$message.error("删除权原创 2021-03-07 11:04:32 · 155 阅读 · 0 评论 -
角色模块,编写边做笔记01-三级权限展示
上节我们提出一个需求,就是在el-table 展开行中,显示三级权限的信息我就思考是不是有监听的方法,后来我想,一般遇到特殊需求问题,应该先处理数据,再 在模板中显示,所以思路就来了,先对 如下的数据进行处理,再进行模板渲染就行了伪代码: roleList.map(item => { // 1,得到三级权限:(getThreePre 递归函数) const threePre = getThreePre(item); .原创 2021-03-07 10:50:28 · 387 阅读 · 2 评论 -
角色模块,编写边做笔记
展开列效果:点击红圈,会默认展开一行,来显示更多信息,这个以前没写过,再次介绍下!上面也没啥写的,我们在用户管理模块写过crud!好了,还要一个分配权限的按钮也加上!行,我给大家稍微贴下代码: <el-table :data="roleList"> <el-table-column type="expand"></el-table-column> <el-t..原创 2021-03-06 20:07:15 · 145 阅读 · 0 评论 -
权限列表界面,简单写一下,很简单
我都懒得介绍了,比用户界面简单多了,没啥难度,全当放松下!原创 2021-03-04 20:56:41 · 151 阅读 · 1 评论 -
user模块功能完成crud-王荣荣如此唯美
user 模块界面操作查询上次就搞定了,这一些完成,添加,修改,删除的逻辑1, 添加界面结构是:我给大家做个动图:1, el-dialog 的使用,2, 表单数据的搜集,校验3, 全局校验,4, 清空表单数据选项!开始: <!-- dialog 对话框--><el-dialog title="添加用户" :visible.sync="addUserdialogVisible" width="50%"...原创 2021-03-04 12:40:05 · 269 阅读 · 1 评论 -
user 模块界面操作-王荣荣如此唯美
1, 面包屑导航: <el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb-item :to="{ path: '/admin' }">首页</el-breadcrumb-item> <el-breadcrumb-item>用户管理</el-breadcrumb-item> <..原创 2021-03-04 09:38:29 · 319 阅读 · 1 评论 -
element 菜单修复03-王荣荣如此唯美
el-menu 折叠和展开功能实现:这个功能很简单,当我们点击控制按钮的时候,控制 el-menu 的折叠和展开的状态维护,还有一个就是 el-aside 侧边栏的宽度, 折叠的时候窄一些,不折叠宽一些,说白了,一个状态决定两个结构都发生变化1, 加控制结构:2,加处理函数:isExpand 肯定是响应式,这样才能视图状态发生变化!isExpand 真为折叠,假为不折叠!4, 根据状态决定结构发生变化,还有一个就是控制el-menu行,左侧..原创 2021-03-04 07:41:18 · 206 阅读 · 1 评论 -
element 菜单修复02-王荣荣如此唯美
这一节我们会学到排他思想,就是以前按钮的功能比如有n 个按钮,点哪个哪个背景色发生变化,2, 当我们下次再进来的时候,上次选中的按钮,要保持状态,这类问题,在vue 中,仅仅需要一个状态标记结合localStorage 就搞定了!https://gitee.com/mzzy8/app/commit/e8473aaa0b8379b778ec56f895ba68945cf8d18e我们自己照着写下就行了default-active 默认激活的是哪个选项,他会和下.原创 2021-03-03 20:45:48 · 173 阅读 · 3 评论 -
element 菜单修复01-王荣荣如此唯美
1,https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2115097&keyword=&project_type=&page=一般都用iconfont 字体图标:这玩意都是套路,没啥技术含量:这个时候使用我出现了问题,就是iconfont 使用没有颜色问题,我给大家看下我的设计结果如下:所以这种方案不行啊?所以我们改symbo...原创 2021-03-03 20:11:16 · 189 阅读 · 1 评论 -
element二级菜单展示-王荣荣,如此可爱!
<el-menu background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" > <el-submenu index="1"> <template slot="title"> <i class="el-icon-location"></i> ...原创 2021-03-03 19:28:51 · 991 阅读 · 1 评论 -
axios 请求的拦截器
https://gitee.com/mzzy8/app/commit/df8b40ce4e4aaf0eb2a8aa4a4d6980440222c1b2原创 2021-03-03 17:25:55 · 120 阅读 · 1 评论 -
电商后台管理第一天复习01
1, 登录的逻辑!1, 表单数据的搜集,校验,还有提交用到了element-ui2, 提交后台用到了axios上面都很简单! 我们还有路由守卫的写法element 动态(非全局引入) 这点的话,我们用vue ui (界面形式引入!)————————————————————————下面给大家截图:路由守卫的写法router.jsimport Vue from 'vue'import Router from 'vue-router'import Log...原创 2021-02-28 18:59:23 · 159 阅读 · 0 评论 -
vuex 中dispatch 返回值是个promise
虽然在 add 方法中返回的是100 ,其实又封装了,返回的是一个Promise!当然我们也可以自己返回Promise 根据不同的需求!原创 2021-02-16 12:13:59 · 2739 阅读 · 0 评论 -
KFormItem 实现,就是用到了插槽很简单
FormItem:<template> <div class="app"> <p>KFormItem</p> <slot></slot> <p v-if="error">{{error}}</p> </div></template><script>import {Type} from "@/cons原创 2021-02-13 10:25:39 · 329 阅读 · 3 评论 -
v-model 具体实现
v-model等于 :value = "value"@input = "handleInput"<template> <div class="app"> <input type="text" :value = "value" @input="handleInput" v-bind="$attrs"> </div></template><script lang="ts">.原创 2021-02-13 09:40:41 · 164 阅读 · 1 评论 -
vue 组件通讯,补充 provide 和inject
inject很简单吧,父提供数据,子组件注入就行了,要是数据就相当于放到了data 里面,要是方法,就相当于放到了methods 里面,是不是很简单!下一篇,我们把插槽复习一下! 不停的复习,知道搞定为止!...原创 2021-02-13 09:27:06 · 93 阅读 · 1 评论 -
vue2 组件通讯
1,父子,通过props 传递子组件生命,父组件传递!2, 兄弟组件通讯,用this.$parent通讯App.vue<template> <div id="app"> <!-- <div id="nav"> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-原创 2021-02-11 14:34:26 · 196 阅读 · 2 评论 -
vue2 动态劫持代理复习
我学习微信小程序的时候,又遇到了这个问题,再次再复习下 <script> window.addEventListener("load", function() { var data = { name: "blue", age: 18 } var _this = {}; for (var item in data)原创 2020-12-25 11:16:46 · 89 阅读 · 0 评论 -
vue 使用bootstrap
1,npm i bootstrap@next --save2,就可以使用了原创 2020-12-03 08:09:21 · 464 阅读 · 0 评论 -
阶段性的总结和下一步行动计划
我们要搞定 rem + flexiable + less 移动端的布局,彻底搞定它,打通css 技能!这里要强调的就是 ,会用https://www.mockplus.cn/这个网站,因为这里有前端代码自动化,最主要的是有切图!这个我们要搞定。 UI设计师,拿到psd 文件,我们就把它上传上去,然后 可以参考着写代码!这样就好多了!行,前端我们就暂时,这么打算的,另外加强vue 的练习,就是 总结下电商类项目,elementui 突击下!axios 复习下基本到这,就..原创 2020-09-26 20:21:56 · 728 阅读 · 0 评论 -
虽然分模块了,但是 mapActions 写法,照样可用
在上一篇的日志中,我们知道cs 子模块中,有个count 方法可以直接调用:虽然分模块了,但是你发现了方法还是不区分,这种映射方法不区分,那么原生写法呢:我们看下:也不区分,所以这个时候我们发现,以后命名actions 动作的时候,得注意别重名!难到分模块不起作用? 这个问题先放下,我们接着测试 getters妈的,total 也不区分:行,原来 我们的 namespace 不咋滴,只对状态有效果,不区分动作,和 附加操作(类似计算属性)...原创 2020-09-24 11:39:12 · 1160 阅读 · 1 评论 -
vuex 多modules 下mapState的映射写法!
这个在我以前的博客中写过,没有记住,这次复习下:https://blog.csdn.net/qq_15009739/article/details/108036519?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160091587719724835801557%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=原创 2020-09-24 11:26:02 · 3943 阅读 · 0 评论 -
vuex 复习这个主要是映射不同写法复习
这个原理到是不难,就是统一的状态管理,和可控的操作预期,更加便于管理和维护我自己画了个图,大家一看就明白,说白了,就必须这么转,这么转便于维护,再大的项目也这样转,跟太极一样,就这么转啊转!今天我要复习的是,getters 这个 我不经常用,所以陌生了,所以写个:import Vuex from "vuex"import Vue from 'vue';Vue.use(Vuex)let store = new Vuex.Store({ state: { c原创 2020-09-24 11:05:14 · 166 阅读 · 0 评论 -
路由守卫gogo
beforeEach 我们以前用过,这里就不写了beforeEnter 可以针对单个路由进行守卫组件内守卫:这里我们测试下beforeRouteEnter 组件内守卫:Index.vue<template> <div> <p>index pager</p> <ul> <li v-for="(course,index) in courses" :key="index">原创 2020-09-22 13:41:17 · 238 阅读 · 0 评论 -
css 穿透和处理问题
父子组件中, 父亲要控制子组件的样式,默认可以直接控制最外层的样式,加上穿透标记可以控制里面的样式来我们看下:Heading2.vue<template> <div class="item"> <p>java is so easy!!</p> <!-- h4,h5,h6 略 --> </div></template><script>export default {原创 2020-09-22 13:14:54 · 910 阅读 · 0 评论 -
vue 的渲染函数
加入有这么一个需求,就是根据level 的属性值,动态的 展示h1-h6 你咋写你也许会这样写:Headings2.vue<template> <div> <h1 v-if="this.level==='1'"> <slot></slot> </h1> <h2 v-if="this.level==='2'"> <slot></slot>原创 2020-09-22 12:55:15 · 518 阅读 · 0 评论 -
Vue的自定义指令简单用法
其中传递参数时,v-permission ="***"**** 必须是一个表达式,可以是任意类型, 我认为加入我们传递一个函数呢? 我们试试:也可以接收到,行, Vue 指令我们也会了!原创 2020-09-20 20:31:46 · 120 阅读 · 0 评论 -
Vue 过滤器的使用
这个过滤器,还可以传递值, 其中第一个值是原来的值,过滤器相当于 linux 当中的管道,说白了,相当于原材料的加工函数组件内的过滤器,我们全局过滤器咋使用行,就这样使用吧,这个做下简单笔记,那要是将做成插件咋使用呢?我们继续前进!https://cn.vuejs.org/v2/guide/plugins.html我们写个简单插件:插件使用后,就可以直接获取数据了结果如下:行,这节复习了 filter , 插件,有了插件,我们可以大...原创 2020-09-20 20:16:41 · 127 阅读 · 1 评论 -
复习,我们要总结下
基本css , 我们复习完毕了,还差多端的css 写法和开发思路,这个回头我们去黑马课程看看我的 www.yikuaiziyuan.cn可以搜到很多课程,这个暂时不说,下一步,我们要继续看vue 的文档,里面新增了很多知识,我们需要细致研究下!大牛总是很细致的研究一些东西! api 原理和使用!...原创 2020-09-19 21:25:56 · 93 阅读 · 0 评论 -
vue 中js中的钩子动画
vue 的文档在不断的扩充当中,所以学习的速度要跟上进步的速度比如Java,以前的struts2 --> ssm --> spring boot --> ??总之技术不断的发展更新App.vue<template> <div id="app"> <p>action is power</p> <p>{{message}}</p> <el-button @click="v原创 2020-09-19 20:58:34 · 165 阅读 · 0 评论 -
vue 动画,使用动画库
以前我们学过transition过渡动画,今天我们接着写可以使用animate.css第二步直接就可以使用了为了增加我们对animate.css 的理解,我找到了效果网站https://www.dowebok.com/demo/2014/98/大家可以看下效果我们稍微修改下,看下效果:这个非常简单,我因此发现了一个网站,比我自己的www.yikuaiziyuan.cn 好多了https://www.dowebok.com/...原创 2020-09-19 15:41:36 · 525 阅读 · 0 评论 -
设计到vue 的动画效果,我们要先做些准备
这篇,我准备写个复习,顺序,1 css 的动画,要全部稍微复习下,因为这个是基础2, 我回头把js 动画的东西,拿出来复习下,记得 石川讲过这些玩意3, 顺便把盒子模型,浮动,定位复习下,省的以后开始写界面css ,你有点虚,4, 复习下flex 布局,5, 复习下,那个 ,多端兼容的问题, 跨端写css ,找下黑马Pink , 老师课程付下下!6,以上复习完后,我们就开启 vue 动画,顺便学习下动画库!...原创 2020-09-17 16:06:47 · 150 阅读 · 0 评论 -
孩子组件,修改父亲组件,简单写法
我的理解,就是子组件,直接修改父附件的属性在有些情况下,我们可能需要对一个 prop 进行“双向绑定”。不幸的是,真正的双向绑定会带来维护上的问题,因为子组件可以变更父组件,且在父组件和子组件都没有明显的变更来源。这也是为什么我们推荐以 update:myPropName 的模式触发事件取而代之。举个例子,在一个包含 title prop 的假设的组件中,我们可以用以下方法表达对其赋新值的意图:this.$emit('update:title', newTitle)然后父组件可以监听...原创 2020-09-17 15:56:49 · 218 阅读 · 0 评论 -
vue 复习,子元素给 父亲元素发送事件
Child.vue<template> <div> <p>child</p> <el-button @click="gogo">$on</el-button> </div></template><script>export default { methods: { gogo() { this.$emit("gogo2", { payload原创 2020-09-17 15:44:25 · 223 阅读 · 0 评论 -
vue复习slot插槽和 provide 和inject 使用
总共三个组件<template> <div> <input :type="type" :value="value" @input="myInput" v-bind="$attrs" /> </div></template><script>export default { props: { value: { type: String, }, type: {原创 2020-09-14 20:57:07 · 401 阅读 · 0 评论 -
vue 复习,几个最常用的方法,必须掌握的
显示效果:有人说,为啥要把这么简单的东西写出来,是为了杜绝眼高手低!原创 2020-09-14 11:19:49 · 295 阅读 · 0 评论 -
vue 复习之 watch
在 vscode 中有个vue 代码提示:没事,安装好,之后,就可以迅速写vue 了vbasevmethod vcomputedvwatch我们这里重点说的是深度监听:总结下,computed一个属性依赖于其它属性的变化而变化比如购物车的总数量,总价格等1 个依赖多个watch ,监听一个数据发生变化,从而执行很多操作多个依赖一个的变化而变化比如当我们可以监视路由的变化!...原创 2020-09-14 11:13:38 · 208 阅读 · 0 评论 -
vue 第二次复习
我准备去找份vue 工作干一干,才发现, vue 还是有点不会,这次再复习一下下,基本就没多大问题了!发现以前所学的,确实有点效果,越熟悉,掌握的越发娴熟了<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g.原创 2020-09-14 10:54:19 · 220 阅读 · 0 评论 -
vuex 多modules 下的映射写法!
import Vue from "vue";import Vuex from "vuex";Vue.use(Vuex);import modulea from "./modulea"export default new Vuex.Store({ state: { message: "hello action", name: "xiaoming" }, mutations: { set_message(state, args) { state.m...原创 2020-08-16 15:03:35 · 740 阅读 · 0 评论