09 2024 档案
摘要：要达到上图效果，可以通过 margin，但是每一行首元素和尾元素都要单独处理，通过 nth-child 选择器设置。 也可以让每一个元素宽度都是父元素宽度的 25%，然后子元素宽度再一点点调试向下减一点点，比如 22% 合适，并且需要设置 justify-content: space-between
阅读全文
摘要：v-if 作用：根据条件动态创建或销毁 DOM 元素。 原理：v-if 实际上是按需渲染的，它会根据表达式的真假值来决定是否在 DOM 树中插入或移除元素。如果条件为 false，该元素不会存在于 DOM 中。 性能：因为 v-if 会真正地添加或移除元素，因此它在初次渲染时的开销较大，特别是当需要
阅读全文
摘要：前言 当依赖的数据发生改变，computed、watch 和 watchEffect 都会被触发。但是它们之间又有自己的特点，使用场景也不一样。 关于 computed 是什么，以及它和普通函数的区别、运用场景，查看我的另一篇博文：[Vue] computed 和 普通函数的区别。 特性 watch
阅读全文
摘要：前言 key、v-once 和 v-memo 都是 Vue 提供的用于优化性能的工具，主要目的是减少不必要的渲染和更新操作，从而提升应用的性能。 key 相关的就不用多说了，[Vue] v-for key 用 index 会出现什么问题。 v-once 这个很简单，仅渲染元素和组件一次，并跳过之后的
阅读全文
摘要：性能问题 当数据项的顺序改变时，Vue 不会随之移动 DOM 元素的顺序，而是就地更新每个元素，确保它们在原本指定的索引位置上渲染。例如，当你对列表进行排序时： <li v-for="(task, index) in tasks" :key="index"> {{ task.id }} - {{ t
阅读全文
摘要：app.use 插件 // myPlugin.js export default { install(app) { app.config.globalProperties.$myPlugin = () => { console.log('This is a method from a plugin!
阅读全文
摘要：前言 Vue 2.x 采用的是 Object.defineProperty 来实现响应式系统，它只能监听已经存在的属性，无法监听对象属性的新增或删除。 Vue 3 使用 Proxy 拦截对对象和数组的访问和修改，实现了响应式系统。它通过拦截这些操作，追踪哪些数据被访问、修改，从而在数据变化时通知相关
阅读全文
摘要：z-index 不生效 未设置定位 z-index 仅对定位元素生效，也就是说，元素必须设置了 position 属性为 relative, absolute, fixed 或 sticky。如果元素的 position 是默认的 static，z-index 会失效。 堆叠上下文 层叠上下文是元素
阅读全文
摘要：特点 伪类 伪元素 用途 选择元素的状态或基于结构选择元素 创建虚拟的内容，操作元素的某些部分 语法 使用单个冒号 (😃 使用双冒号 (:😃 生成内容 不生成新内容，只应用样式 可以生成并操作新内容 常见示例 :hover, :focus, :nth-child() ::before, ::af
阅读全文
摘要：src 和 href <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <
阅读全文
摘要：前言 事件委托（Event Delegation） 是一种通过将事件监听器绑定到父元素，而不是直接绑定到每个子元素上的技术。这样可以减少事件监听器的数量，提升性能，并使得对动态添加或移除的元素更容易进行事件处理。 事件冒泡和事件捕获 事件冒泡：从里往外 <div id="parent" style=
阅读全文
摘要：前言 高阶组件用于复用组件逻辑，返回一个增强后的组件。高阶组件主要用于跨多个组件复用逻辑，比如： 日志记录 权限控制 性能监控 高阶组件 import { defineComponent, onMounted, h } from "vue"; export function withAuth<T>(
阅读全文
摘要：前端 FileReader 将文件转换为 Base64 编码字符串，然后将其作为请求体发送到后端。 <input type="file" id="fileInput" /> <button onclick="uploadFileAsBase64()">上传文件</button> <script> f
阅读全文
摘要：要更新表格数据，通过 table 的 reload 方法。reload 可以重新渲染表格，并更新其数据。 <body> <table class="layui-hide" id="demo-table"></table> <div id="demo-laypage"></div> <script>
阅读全文
