随笔分类 - vue
摘要:引用处 <template> <!-- 利用obj传递参数--> <Dialog :obj="data.permissionDialog" ref="permissionDialog"/> </template> <script setup> import Dialog from "@/compon
阅读全文
摘要:基于角色+权限配置模式 可以将权限粒度设置的更细致一些。 具体参考 前端:登录成功后,再获取权限列表,在页面上进行权限判断。 后端:不变 登录 当用户登录时,将用户角色写入到vuex,保存当前用户角色信息。 vuex中 import {createStore} from 'vuex' export
阅读全文
摘要:directives/permission.js import store from "@/store"; export default { // el 是指令绑定的元素,bindings是入参 mounted(el, bindings) { let allowRoleList = bindings
阅读全文
摘要:绝大多数,用户角色和功能固定时,推荐在这种方式。 开发简单,工作量少,可以快速交付。 1 前端 1. 登录 当用户登录时,将用户角色写入到vuex,保存当前用户角色信息。 # store/index.js import {createStore} from 'vuex' export default
阅读全文
摘要:安装 npm install @element-plus/icons-vue main.js ... import * as ElementPlusIconsVue from '@element-plus/icons-vue' for (const [key, component] of Objec
阅读全文
摘要:页面 <el-tab-pane label="用户名登录"> <el-form :model="form" label-position="right" label-width="70px" style="max-width: 460px" class="loginForm" :rules="for
阅读全文
摘要:安装 npm install vue3-cookies --save main.js import {createApp} from 'vue' import App from './App.vue' import router from './router' import store from '
阅读全文
摘要:基础 安装 vue add router router/index.js import { createRouter, createWebHistory } from 'vue-router' import HomeView from '../views/HomeView.vue' const ro
阅读全文
摘要:Flex 基本概念: 在 flex 容器中默认存在两条轴,水平主轴(main axis) 和垂直的交叉轴(cross axis),这是默认的设置,当然你可以通过修改使垂直方向变为主轴,水平方向变为交叉轴,这个我们后面再说。 在容器中的每个单元块被称之为 flex item,每个项目占据的主轴空间为
阅读全文
摘要:关于node.js 如果想要更新node.js的版本 1.先查看本机node.js版本: node -v 2.清除node.js的cache: sudo npm cache clean -f 3.安装 n 工具 sudo npm install -g n 4.安装最新版本的node.js sudo
阅读全文
摘要:注意:发送网络请求时,回调函数必须要使用箭头函数。 <script> function f1(name,age){ console.log(name,age); } f1("失败",99); //箭头函数 let f2 = (name,age) =>{ console.log(name,age);
阅读全文
摘要:<script> let info = {name:"s z w",email:"xxxxxxx@xxx.com",addr:"北京"}; let {name,addr} = info; console.log(name); console.log(addr); </script> Vue3中需要什
阅读全文
摘要:<script> function info(v1,...data){ console.log(v1,data); } info(11); info(11,22); info(11,22,333,444,55); </script> <script> function info(v1,v2,v3,v
阅读全文
摘要:let info = "我是" + "?" + "今年技术"; <script> let name = "张开"; let age = 73; let info = `我叫${name},今年${age}岁`; </script>
阅读全文
摘要:var/let/const <script> function show(){ if(1==1){ var name = "szw"; //函数作用域=Python } consolo.log(name); } show(); </script> <script> if(1==1){ let age
阅读全文
摘要:<template> //使用 <span> {{name}}</span> <span> {{age}}</span> </template> <script> import { reactive, ref ,toRefs} from 'vue'; export default { setup()
阅读全文
摘要:基本使用 <template> <el-button type="primary" @click="handle">{{ count }}</el-button> <el-button type="primary" @click="handle1">统计</el-button> </template
阅读全文
摘要:概念 Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成,让用 Vue.js 构建单页应用变得轻而易举。功能包括: 嵌套路由映射 动态路由选择 模块化、基于组件的路由配置 路由参数、查询、通配符 展示由 Vue.js 的过渡系统提供的过渡效果 细致的导航控制 自动激
阅读全文
摘要:概念 状态管理器,存取数据用的,可以跨组件通信(屏蔽了组件的父子关系) 定义store //store/index.js import { createStore } from "vuex"; const store = createStore({ state:{ // 存数据的地方 count:0
阅读全文
摘要:前端存数据的地方 -cookie中:借助第三方插件,自己用js写,超时时间+发送请求自动携带。 -sessionStorage:关闭浏览器,它就没了 -localStorage:永久存在,手动删除,或浏览器存满了、 使用:sessionStorage sessionStorage.setItem('
阅读全文