data-属性无默认值，是html5自定义元数据容器；其“默认值”需在服务端渲染或js初始化时写入，如data-timeout="3000"、data-required="true"、data-default-value='{"mode":"auto","retry":2}'，且服务端插值须html转义。
data- 属性本身没有“默认值”概念——它只是 HTML5 的自定义元数据容器，浏览器不会自动赋予任何初始值，也不会在表单提交时被发送。所谓“设置默认值”，实际是指：在服务端渲染或 JS 初始化阶段，把业务需要的初始配置写进 data- 属性里，供后续 JS 读取使用。
data-* 属性怎么写默认值
直接在 HTML 标签中写死属性即可，无需 JS 参与：
-
data-timeout="3000"表示超时毫秒数，默认 3 秒 -
data-required="true"是字符串"true"，不是布尔值；JS 读取后需用JSON.parse()或=== "true"判断 -
data-default-value='{"mode":"auto","retry":2}'支持 JSON 字符串，但必须用单引号或转义双引号，否则破坏 HTML 结构 - 服务端模板（如 PHP、Django）中插值时，务必做 HTML 属性转义，防止
"或截断标签
JavaScript 读取 data-* 默认值的常见错误
DOM API 提供两种读法：element.dataset.xxx 和 element.getAttribute('data-xxx')，行为差异明显：
-
dataset会自动转换驼峰：HTML 写data-api-url→ JS 读el.dataset.apiUrl；但data-123-id无法通过 dataset 访问（数字开头不合法） -
getAttribute原样返回字符串，适合读取含特殊字符、数字开头或大小写敏感的 key，比如data-UUID="A1b2C3" - 如果属性在 DOM 加载前未存在，
dataset.xxx返回undefined，而getAttribute返回null—— 判断时别混用== null和=== undefined - 动态插入的元素（如 innerHTML 赋值），其
dataset不会自动更新，得手动setAttribute后再读
data-* 默认值和表单控件 value 的关键区别
很多人误以为 data-default 能替代 value，这是危险的误解：
-
value是表单控件的真实初始值，影响form.reset()、提交内容、受控组件绑定；data-default只是旁注，JS 不读它就毫无作用 - 编辑页回填场景下，
value必须由后端写入 HTML（如value="= htmlspecialchars($user['email']) ?>"），而data-original-value可用于记录原始值做变更比对 -
input的value改变后，dataset不会同步更新；反之亦然。两者完全解耦，不能互相替代 - 框架（React/Vue）中，
data-属性常用于传递非响应式配置，比如data-tooltip-text，但绝不用来驱动表单状态
真正容易被忽略的是：data- 属性一旦写入 HTML，就只是静态字符串，没有任何运行时语义。它的“默认值”意义，完全取决于你 JS 里怎么解释它——写错格式、漏转义、类型混淆，都会让整套逻辑静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
