- 博客(30)
- 收藏
- 关注
RSS订阅原创 Vue.js 进阶
1.Vuex 简介与安装：Vuex 是 Vue.js 官方的状态管理模式，用于集中管理应用中所有组件的状态。(1)概念：Vue Router 是 Vue.js 官方的路由管理器，用于帮助我们构建单页应用。(2)在项目中创建一个 router 文件夹，并在其中创建一个 index.js 文件，用于存放路由配置。(2)State（状态）：应用中所有组件共享的数据，类似于组件的 data。(1)Vuex的核心是一个集中的状态树，以及一套严格的规则来改变这个状态。6.中组件中使用 Vuex。
2025-08-13 14:15:13
90
原创 事件处理与组件基础
props 是单向的，父组件数据更新时，会传递给子组件，但子组件不能直接修改 props 的值。(1)概念：子组件不能直接修改父组件的数据，但可以通过 $emit 方法触发一个自定义事件，父组件则通过 v-on (或@)监听这个事件，从而做出响应。(3)组件通信：在 todo-item 组件内部，点击删除按钮时，通过 $emit 触发一个自定义事件，将该事项的 ID 传给父组件。(4)父组件处理：父组件监听子组件的事件，并根据传入的 ID 从 todos 数组中移除该事项。可以注册全局组件或局部组件。
2025-08-13 13:39:08
183
原创 Vue.js 入门
(2) v-show ：简单地通过 CSS 的 display 属性来隐藏或显示元素。(1) v-bind :用于动态绑定 HTML 属性，例如，绑定 <img> 标签的 src 或 <a> 标签的 href。(2) v-model :用于表单输入元素上创建双向数据绑定，即修改输入框内容，数据会随之改变，反之亦然。(1) v-if / v-else / v-else-if : 根据表达式的真假来有条件地渲染元素。(2)指令(Directives):带 v- 前缀的特殊属性，用于响应式地操作 DOM。
2025-08-13 10:46:37
330
原创 JS 模块化与打包工具
4.浏览器直载 ESM：<script type="module" src="/src/index.js"> 可工作，但生产一般仍用打包器做压缩/缓存/分隔。// 产出独立 chunk。5.资源处理：简单可使用 asset/resource (内置)或拷贝插件,把 assets/ 拷到 build/assets/(2)ESM的顶层 await import() 可用于懒加载(浏览器需<script type="module">)(2)兼容性与生态：TS/SCSS/图片/字体/JSON 等统一处理与优化。
2025-08-12 16:19:04
578
原创 半自动化框架的流程
(1)静态站点：public/ （</>index.html、</>gallery.html、演示页）(2)报告/截图：存放 tasks/ 或 CI artifacts。(2)质量关口(人):字段定义清晰、ID/命名规范、引用边界明确。2.质量关口(人/机):一键定位问题来源(命令→文件→字段)2.质量关口(机)：每个命令单一职责、幂等、可单步/可串联。2.质量关口(机)：输入→输出可复现（相同输入产同样产物）2.质量关口(机)：构建失败快速报错；2.质量关口(人)：可视化检查叙事/观感/交互。
2025-08-12 14:38:44
162
原创 构建一个半自动化框架流程
1.把流程拆成单一职责命令：build/watch/validate/compile/test/serve。1.定义结构与引用规则：场景结构、ID 唯一性、资源存在性、跨文件约束。3.检查点(人/机):问题定位路径清晰(命令→文件→字段)(3)检查点(人):确认字段含义、命名、生命周期和边界。(3)检查点(机):每个命令幂等、可单独执行、可串联。3.检查点(机)：输入→输出可重复，路径与文件名确定。3.检查点(机)：稳定性、对差异的敏感度与容忍阈值。(1)命令日志、失败快照、对比报告、版本/提交信息。
2025-08-12 14:11:29
179
原创 安全常见漏洞
raise ValueError("访问被拒绝: 未授权的域名")# 使用 OWASP Dependency-Check。# 使用 pip-audit 检查Python依赖。10.服务器端请求伪造(SSRF)一、OWASP Top 10。-- 可能被注入的SQL。6.易受攻击和过时的组件。8.软件和数据完整性故障。9.安全日志和监控不足。# 使用安全的加密库。# 密码强度检查示例。
2025-08-08 15:58:52
314
原创 CSS框架 - Bootstrap
主要按钮</button><button type="button" class="btn btn-warning">警告</button><button type="button" class="btn btn-danger">危险
2025-08-08 14:20:32
682
原创 第十四天 异步 JavaScript
（1）特点：代码的执行顺序无关。当遇到一个耗时的操作（比如网络请求、文件读写），程序会先发起这个任务，然后立即跳过它，去执行后面的代码，等到耗时任务完成后，再回头处理它的结果。（2）这个 Promise 对象承诺你，当异步操作完成时，他会通知你成功的结果（fulfilled），或者失败的原因（rejected）。（1）当你发起一个异步请求时，你会立即得到一个 Promise 对象，它代表着这个请求的结果（但结果还没出来）。（3）Rejected（已失败）：异步操作失败，并返回了一个失败的原因。
2025-08-07 10:40:30
644
原创 浏览器存储与 API
input id="todo-input" type="text" placeholder="请输入待办事项">(2)sessionStorage:会话存储，仅在当前标签页/窗口有效，关闭即清空。(1)localStorage:本地存储，长期保存数据，关闭浏览器后数据依然存在。sessionStorage：保存一次性数据，如表单步骤、临时状态。一、localStorage 和 sessionStorage。（2）用于获取服务器数据、提交表单、与后端API交互。（1）实现添加、删除、标记完成的待办事项。
2025-08-06 10:29:48
755
原创 事件处理的学习
(1)鼠标事件：click 、dblclick、mousedown、mouseup、mouseenter、mouseleave、mousemove；alert('点击了：' + event.target.textContent);(3)表单事件：submit、change、input、focus、blur。(4)其他事件：resize、scroll、contextmenu。1.利用事件冒泡，将事件绑定到父元素，统一管理所有子元素事件。1.事件冒泡：事件从最具体的元素向上传递到祖先元素。
2025-08-05 14:06:55
394
原创 JavaScript基础(三)
(1)闭包是指函数可以“记住”并访问它定义时的作用域，即使函数在当前作用域之外被调用。(3)块级作用域：用 let 或 const 声明的变量，只在当前代码块内有效。console.log("发生错误：" + error.message);(2)函数作用域：在函数内声明的变量，只能在该函数内访问。(1)全局作用域：在函数外声明的变量，整个脚本都能访问。
2025-08-01 18:16:34
367
原创 JavaScript 基础(二)
let fruits = ["苹果", "香蕉", "橙子", "葡萄", "西瓜"];let fruits = ["苹果", "香蕉", "橙子"];(1)push()/pop()：末尾添加/删除元素。// 输出：[1, 4, 9, 16, 25]
2025-08-01 17:35:59
341
原创 JavaScript基础（一）
case 1: console.log("周一");case 2: console.log("周二");// 传统写法（不推荐）(2)String(字符串)：let s = "hello";(3)Boolean(布尔)：let flag = true;default: console.log("其他");(1)Number(数字)： let n = 100;// 块级作用域，推荐。console.log("未成年人");console.log("成年人");(6)Object(对象、数组、函数)
2025-08-01 16:21:10
216
原创 响应式设计与CSS预处理器
1.概念：响应式设计（Responsive Design）让网页能自动适配不同屏幕尺寸（如手机、平板、PC），提升用户体验。1.SASS/SCSS是流行的CSS预处理器，支持变量、嵌套、函数、模块化等高级特性。4.移动优先设计：先写适合手机的样式，再用媒体查询适配大屏。(3) em/rem : 相对字体大小，适合响应式字体。3.需要用SASS编译器将.scss 转为.css。(2) vw/vh : 视口宽高单位。二、CSS 预处理器(SASS)/* 默认是手机样式 *//* 大屏再调整 */
2025-08-01 10:43:11
111
原创 CSS布局（二） - Grid
小块1</div><div class="small2">小块2</div><div class="small3">小块3</div>grid-column: 1 / 3;<div class="small1">小块1</div><div class="small2">小块2</div><div class="small3">小块3</div><div class="big">大区块
2025-07-31 17:30:33
854
原创 CSS 基础(二)
* 2像素宽，实线，颜色为#333 */5.sticky: 粘性定位，滚动到指定位置后变为fixed（较新）border-radius: 8px;3.absolute: 相对最近的已定位祖先元素定位，脱离文档流。4.fixed: 相对浏览器窗口定位，页面滚动时位置不变。none: 不显示该元素，完全从页面移除。border-width: 边框宽度。border-style: 边框样式。border-color: 边框颜色。hidden: 不可见，但仍占据空间。border-radius: 圆角。
2025-07-31 12:08:14
146
原创 CSS 基础(一)
* 内容区域宽度 = 300px - 40px(padding) - 10px(border) = 250px *//* 总宽度 = 300px + 40px(padding) + 10px(border) = 350px *//* 三列布局 *//* 水平分布 *//* 允许换行 */ 或 nowrap *//* 垂直居中 *//* 视口宽度的100% *//* 平均分配空间 *//* HSL (色相、饱和度、亮度) *//* RGBA (带透明度) *//* HSLA (带透明度) */
2025-07-31 11:07:26
814
原创 HTML5语义化标签
[email protected]</a></p><li><a href="/contact">联系我们</a></li><li><a href="#section1">第一部分</a></li><li><a href="#section3">第三部分</a></li><li><a href="/about">关于</a></li><li><a href="/">首页
2025-07-30 14:30:54
828
原创 HTML 的表格
平均薪资</td><th colspan="2">姓名和年龄</th><td>嵌套表格</td>cellpadding - 单元格内容与单元格边界之间的距离。<td>示例</td><td>政治面貌</td><td>电话：123456789</td><td>姓名</td><td>年龄</td><td>学历</td><td>张三</td><td>高中</td><td>群众</td><td>李四
2025-07-30 11:02:03
907
原创 HTML的列表（有序、无序、定义列表）
<a href="#contact">联系我们</a></li><li>小写罗马数字编号（i, ii, iii, ...）</li><li><a href="#about">关于我们</a></li><li><a href="#home">首页</a></li><li><a href="#news">新闻</a></li><li>数字编号（默认：1, 2, 3, ...）
2025-07-29 17:53:35
318
原创 HTML的图像
area shape="poly" coords="300,100,400,200,300,300" href="africa.html" alt="非洲"><area shape="circle" coords="200,200,50" href="europe.html" alt="欧洲"><area shape="rect" coords="0,0,100,100" href="asia.html" alt="亚洲"><img src="/images/icon.png" alt="图标">
2025-07-29 16:46:18
298
原创 HTML 的链接
Example网站</a><a href="files/document.pdf" download="用户手册.pdf">下载用户手册</a><a href="https://www.myothersite.com" rel="me">我的另一个网站
2025-07-29 15:30:23
391
原创 Claude的使用
需求” --无需进入交互模式。cat "$file" | claude -p "提取并文档化所有导出的函数" >> API.md。可直接看见内容（需要重新加入令牌，改变环境变量）举例：claude “帮我写一个系统监控脚本”评估代码复杂度，只返回数字1-10")复杂度过高: $complexity"（1） 安装 GitHub MCP。查看某个 MCP 的详细配置。管道处理，直接处理文件内容。开始代码质量检查..."（1）Git工作流集成。检查这些改动是否有问题。显示当前使用的模型、建议如何降低复杂度"
2025-07-11 12:18:58
956
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人