data属性必须以data-开头且用短横线分隔，如data-item-id；js中通过dataset.userid访问，自动转驼峰；仅存轻量非敏感数据，禁放json、token等。
data属性必须以 data- 开头且用短横线分隔
HTML 的 data- 属性是标准方式，浏览器会自动忽略不认识的属性，但允许你存任意字符串数据。不能写成 dataid 或 data_id，必须是 data-item-id、data-user-role 这种格式——浏览器只认连字符（hyphen），不支持驼峰或下划线。
常见错误：在 Vue/React 里直接绑定 data-user-id="{{id}}" 却没转义，导致引号被破坏；或者用 JS 动态设置时漏掉 dataset 映射规则（比如 data-user-id 在 JS 中对应 element.dataset.userId）。
给 <li> 添加 data 属性的三种常用场景
列表项通常需要关联后端 ID、状态标识或临时配置。不是所有数据都该塞进 data-，只放轻量、非敏感、无需实时同步的上下文信息。
-
ID 关联：后端返回的
id直接挂到<li data-item-id="123">，点击时用event.target.dataset.itemId拿，比遍历 DOM 查找更可靠 -
状态标记：比如
<li data-status="pending">，配合 CSS 选择器li[data-status="pending"] { opacity: 0.7; }控制样式 -
预加载配置：如
<li data-api-endpoint="/api/v1/items/456" data-cache-ttl="30000">，JS 点击时直接读取发起请求，避免硬编码或重复查表
dataset 读取时自动转换命名规则
DOM 元素的 dataset 对象会把短横线转为驼峰，data-user-id → dataset.userId，data-api-url → dataset.apiUrl。注意大小写敏感，data-UserID 不会被识别为 userId。
容易踩的坑：
- 空值判断别直接
if (el.dataset.status)—— 如果属性存在但值为空字符串，它仍为true；应写成if (el.dataset.status === "active") - 数字类型需手动转换：
const ttl = Number(el.dataset.cacheTtl) || 0，dataset返回的全是字符串 - 含特殊字符的 key（如
data-foo.bar）无法通过点语法访问，得用方括号：el.dataset["foo.bar"]
不要用 data- 存大量结构化数据或敏感信息
用户能右键“检查元素”看到所有 data- 内容，所以密码、token、完整对象 JSON 都不该放。如果真要传复杂数据，优先考虑：
- 服务端渲染时生成隐藏
<script type="application/json"></script>块，按 ID 关联 - 点击时用 ID 请求接口获取详情，而不是把整个商品对象塞进
data-product-json - 用
Map或闭包在 JS 侧维护 ID → 数据映射，DOM 只留轻量索引
data 属性本质是“桥”，不是数据库。它最稳的地方在于简单、可调试、不依赖框架；最脆的地方在于一旦滥用，HTML 体积膨胀、审查器卡顿、XSS 风险上升——尤其当有人把 JSON.stringify() 结果直接插进 data- 里时。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
