- 博客(21)
- 资源 (1)
- 收藏
- 关注
原创 一劳永逸之Avue-Crud组件
错误场景:根据筛选条件不同,查询到的表格要求展示不同(表格标题列发生改变),此时表格在切换条件查询时会出现展示问题。今天发现了一款表格组件特别好用,传入表头,传入数据即可完成表格的渲染;1. 前端ui框架各种各样,每种框架都有自己的表格组件。表格中数据对象的key需要与表头的prop相对应。5. avue-crud 使用过程中遇到的问题。6. 更多详情参见Avue官方文档。3. Crud组件的简单使用。2. Avue的安装与引用。4. 表头与表格数据格式。
2023-06-01 16:37:50
1077
原创 2023前端面试
obj对象想要获取name或者say,首先判断自己的属性当中有没有,如果没有找到,那么就在__proto__属性中去找,而这个时候__proto__与Person的prototype是相等的,也就是__proto__指向Person,那么便可以找到name和say。为了处理异步,当触发事件的时候,会通过dispatch来访问action中的方法,actions中的commit会触发mutation中的方法从而修改state里的值,通过getter把数据更新到视图中。这些都是计算属性无法做到的。
2023-02-08 16:01:47
1549
原创 第五章 组件基础
所有支持v-model指令的组件中默认都会提供一个名为modelValue的属性,而组件内部的内容变化后向外传递的事件为update:modelValue。好的开发模式是将组件内部的逻辑在组件内部处理掉,而需要调用方处理的业务逻辑属于组件外部的逻辑,将其传递到调用方处理,上例可以改为。在props为组件添加外部属性,在template模板中,可以用访问内部属性的方式访问定义的外部属性。component是一个特殊的标签,其通过is属性来指定要渲染的组件名称。四、动态组件的简单应用。
2022-11-22 16:01:52
123
原创 第四章 处理用户交互
上面示例的系统修饰符只要满足条件就会触发,以鼠标按下事件为例,只要满足用户按下了Ctrl键的时候按下了鼠标按键就会触发。系统修饰符的使用意义是只有当用户按下这些键时,对应的键盘或鼠标事件才能触发,在处理组合键指令时经常会用到。Vue中使用@click的方式绑定事件时,默认监听的是DOM事件的冒泡阶段(从子组件到父组件)在页面触发一个单击事件时,事件从父组件依次传递到子组件的过程为事件捕获。在事件捕获的基础上,再逆向的进行一轮传递,这一过程为事件冒泡。举例二:当用户按下Alt键的同时,再按下回车键才会触发。
2022-10-04 12:35:11
135
原创 第二章 模板应用
v-if指令可以和v-else指令结合使用,设置了v-else指令的元素必须紧跟在v-if或v-else-if指令的后面,否则将不会被识别;在v-if与v-else之间,可以插入任意个v-else-if来实现多分支渲染逻辑。index索引的取值是从0开始的,当同时循环渲染多个元素时,与v-if指令类似,推荐使用template标签进行包装。本质上,Vue中的模板指令也是html标签属性,通常以“v-”开头,v-bind、v-on等都是指令;v-on可以将前缀v-on:使用@符号代替,如。
2022-09-15 13:02:49
648
转载 闭包的典型应用--节流与防抖
1.定义函数防抖(debounce)函数防抖,就是指触发事件后,在 n 秒后只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数的执行时间。简单的说,当一个动作连续触发,只执行最后一次。函数节流(throttle)限制一个函数在一定时间内只能执行一次为了方便理解,我们首先通过一个可视化的工具,感受一下三种环境(正常情况、函数防抖情况 debounce、函数节流 throttle)下,对于mousemove事件回调的执行情况。竖线的疏密代表事件执行的频繁程度。.
2022-03-21 17:57:41
370
原创 Vue3+element-plus icon全局引入
elementplus 官网地址https://element-plus.gitee.io/zh-CN/1.安装npm install @element-plus/icons-vue2.全局注册组件main.jsimport { createApp } from 'vue'import App from './App.vue'import router from './router'import store from './store'import ElementPlus fro
2022-03-09 10:10:25
1647
原创 vant-list 一行两列时,最后一行与其他行间距不一致问题
1.使用vant-list时,会出现以下问题2. 如何解决添加以下样式即可解决/deep/.van-list__placeholder{display:none;}
2022-03-07 11:28:05
449
原创 Win 系统下使用gnvm操作node版本
下载gnvm 在github上搜索gnvm,选中第一项 选择合适方式下载文件 2. 将下载gnvm.exe文件放置在node.js所在文件夹下 3. 管理员身份打开cmd,输入gnvm,出现以下信息就说明gnvm安装成功 4.gnvm node-version //查看本地 Node.js global and latest 版本 5. gnvm config//配置 ...
2022-02-28 13:52:46
451
如何预览office文件并加水印
2023-06-15
TA创建的收藏夹 TA关注的收藏夹
TA关注的人