![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
合法的咸鱼
我太懒了
展开
-
vue3+element-plus+ts elplus table 实现表格动态列 表格列显示与隐藏的动态控制 支持传递插槽与多级表头
实现表格动态列 表格列显示与隐藏的动态控制 支持传递插槽与多级表头原创 2023-06-01 15:07:47 · 3654 阅读 · 0 评论 -
vue3+element-plus+ts elplus table 实现表格动态列 表格列显示与隐藏的动态控制
工作接了个需求,需要实现表格的动态列,但是后端又不参与,全权交给前端,百度搜了一下,大多都是的for循环,我觉得用起来不爽,还得改变的书写方式,用对象保存列的相关信息,所以搞了一个这玩应话不多讲,上代码哦,不对,先上效果动态图没做过,见谅吧简介:ProjectTable组件内容store仓库index.ts文件getters.ts文件table.ts文件Home页面总结这玩应在使用时除了引用ColumnControl和ProjectTable两个组件以外,与你普通书写el-原创 2023-05-26 17:14:51 · 9774 阅读 · 2 评论 -
element-plus elplus el-tree三种图标自定义 并且点击图标展开收起 点击文字获取数据
前言公司需求,需要实现如下样式的树形列表 (基于vue3 + element-plus)当节点展开时,显示展开的文件夹图标,当节点收起时显示收起的文件夹,最后一级显示文件样式废话没有了, 代码如下用到的JScompileTreeData.js还有一件事有的时候文字很短,不好点击,需要点击文字右侧空白也能触发数据回传事件那么你需要想办法 覆盖这个类 ---- .el-tree-node__label覆盖后即可原创 2022-12-07 18:15:25 · 4593 阅读 · 0 评论 -
Vue3获取响应式数据、监听数据变化、判断和转换(reactiveApi)
文章目录获取响应式数据应用注意点监听数据变化watchEffectwatch应用判断转换unreftoReftoRefs应用获取响应式数据API传入返回备注reactiveplain-object对象代理深度代理对象中的所有成员readonlyplain-object or proxy对象代理只能读取代理对象中的成员,不可修改refany{ value: … }对value的访问是响应式的,如果传入的值是一个对象,则会通过reactive代理,如果已原创 2022-04-06 16:54:05 · 11910 阅读 · 0 评论 -
vue3的router与组件异步加载
router的小改动import { createRouter, createWebHistory, createWebHashHistory } from "vue-router"const routes = createRouter({ // history: createWebHistory(base) // 相当于 vue2的 mode:"history",base: base history: createWebHashHistory() // mode: "hash" // 其他改动参原创 2022-04-02 11:09:24 · 2110 阅读 · 0 评论 -
Vue3对比Vue2的效率提升
Vue3效率的提升静态提升预字符串化缓存事件处理函数Block TreePatchFlag静态提升当节点为普通元素节点且没有绑定动态内容时,将会被提升// vue3const some = createVNode("h1", null, "123456")render() { some}静态属性也会被提升<div class="abc"></div>const some = { class: "abc" }render() { createVNode("d原创 2022-03-31 14:32:27 · 1054 阅读 · 0 评论 -
vite开发服务器原理
如图,vite创建的开发服务器不同于webpack,首先页面请求一个模块,开发服务器收到通知去编译对应模块,最后将编译好的结果返回。对比webpack少了启动开发服务器时打包所有模块的过程,因此开发效率要大于webpack,开发服务器的启动速度也跟模块的多少没有关系。值得注意的是:vite搭建项目,index页面中引入的main.js是入口文件,并且使用了type=“module”,因此开发的时候不要使用旧版本浏览器,所用浏览器必须支持esModule...原创 2022-03-31 13:52:32 · 1008 阅读 · 0 评论 -
vue过渡
vue过渡图解: 只拿了入场动画举例enter: 表示第一帧enter-to: 表示第二帧到结束enter-active:表示整个动画xxx-move: 在transition-group中使用,当元素位置发生变化时应用该类名 xxx为 namemode: 默认 入场动画与离场动画同时运行, 可选值out-in, in-out...原创 2022-03-22 10:26:24 · 105 阅读 · 0 评论 -
vue过滤器
弄个假的过滤器filters: { myFilter(index, other1, other2) { return something }, someFilter(something) { return 1 }}可使用的位置大胡子语法中 {{ index | myFilter(other1, other2) }}v-bind中 :index=“index | myFilter(other1, other2)”几种语法不附带额外参数 {{ index | myFil原创 2022-03-18 10:44:34 · 139 阅读 · 0 评论 -
vue组件通信总结
父子组件通信prop没啥好说的,父级传参,子组件props接收即可event也没啥可说的,子组件$emit,父组件@接收style和class//父组件<HelloWorld class="father" style="color: red" />//子组件<div class="son" style="font-size: 16px"></div>//渲染之后<div class="father son" style="font-size原创 2022-03-09 10:28:53 · 762 阅读 · 0 评论 -
vuex基础用法
state用于存储共享数据Vuex.Store({ state: { count: 0 }})//xxx.vue 文件中使用this.$store.state.count//更改this.$store.state.count = 1; //不推荐mutations需要注意的是vue 建议mutations处理同步函数,因为方便devtool监听其变化,以便更好的调试开发更严格的用法是mutations不允许出现副作用函数Vuex.Store({ state: {原创 2022-03-08 11:16:17 · 67 阅读 · 0 评论 -
vue事件总线
事件总线功能提供监听某个事件的接口提供取消监听的接口触发事件的接口(可传递数据)触发事件后会自动通知监听者编写事件总线//eventBus.jsconst listeners = {}; //事件监听对象//事件总线export default { //注册监听事件 $on(eventName, handler) { //如果监听对象中不存在eventName, 则新增一条eventName属性,值为Set集合 if (!listeners[eventName]) {原创 2022-03-07 14:33:59 · 416 阅读 · 0 评论 -
vue自定义指令directive
全局注册指令Vue.directive("指令名称(不用写v-)", {指令配置});局部注册指令export default { data() {return {}}, directives: { 指令名称(不用写v-): {指令配置} }}指令配置export default { //指令配置--常用 //例如当前绑定元素 <div v-loading:a.b.c="true"></div> bind(el, binding){ //当指令绑定到元原创 2022-03-04 16:47:20 · 465 阅读 · 0 评论 -
vue路由基础
路由模式hash 兼容性最好history 用户体验最好, 需要浏览器支持 history apiabstract 将路由存到内存之中, 常用于手机APP路由激活样式router-link-active当前路径以导航路径开头,则算作匹配例如 当前路由 /test则 路由 “/” 会被匹配 , 路由 “/test” 也会被匹配例如 当前路由 /test/detail则 路由 “/test” 会被匹配router-link-exact-active当前路径完全等于导原创 2022-03-02 15:27:57 · 267 阅读 · 0 评论 -
vue插槽的基本使用
记录插槽的基本使用,其实还是挺好玩的带有插槽的组件 Layout/index.vue默认插槽<template> <Layout> <template v-slot:default> //也可不写template "v-slot:" 可缩写为 "#" // <template #default> //此写法亦可 <div>默认插槽</div> .原创 2022-03-02 14:10:53 · 397 阅读 · 0 评论 -
vue启动单个文件(测试组件用)
vue serve 文件路径如vue serve ./src/components/Upload/test.vue原创 2022-03-01 15:50:48 · 602 阅读 · 0 评论