data-controller 必须写在包裹目标元素的父容器上，控制器类名需与属性值严格匹配（如 counter→countercontroller），且须通过 application.register 注册；data-action 要写在子元素上，格式为“event->controller#method”；data-target 需配合 static targets 声明才能访问。
data-controller 属性必须写在有作用域的容器上
Stimulus 的 data-controller 不是“挂哪儿都行”的装饰属性，它需要绑定在能包裹目标元素的父级（或自身）DOM 节点上，且该节点会成为控制器实例的根作用域。如果只加在按钮上，而按钮内部没嵌套任何受控元素，控制器根本不会初始化——因为 Stimulus 默认只扫描 data-controller 所在节点及其后代中带 data-action 或 data-target 的元素。
常见错误现象：console.log 放在控制器 connect() 里却没输出，检查 DOM 结构发现 data-controller 写在了孤立的 <button></button> 上，没有包裹行为触发源和目标。
- 正确做法：把
data-controller="counter"放在包含按钮、计数显示区域的共同父容器上，比如<div data-controller="counter">...</div> - 控制器类名必须与
data-controller值严格匹配（小写中划线转驼峰），counter对应CounterController - Stimulus 不会自动加载控制器——确保已通过
application.register("counter", CounterController)注册过
data-action 必须写在子元素上，且语法要完整
data-action 是行为触发的关键，但它不能脱离 data-controller 容器独立生效。它的值格式为 "event->controller#method"，中间用空格分隔，箭头 -> 不能省略或写成 ->（HTML 实体）、→（Unicode 符号）等变体。
常见错误现象：点击无响应，控制台无报错，但 data-action 属性在 DevTools 中显示为红色（表示解析失败）。
- 正确写法：
data-action="click->counter#increment"，其中counter是注册时用的标识符，increment是控制器内定义的公开方法 - 事件名支持原生事件（
click、input、submit）和自定义事件（如custom-event->...），但不支持带冒号的命名空间事件（如click:stop） - 多个动作可空格并列：
data-action="click->counter#increment keyup->counter#handleKey"
data-target 需配合 targets 数组声明才能访问
仅加 data-target="counter.output" 不会让控制器自动获得 this.outputTarget，你必须在控制器类里显式声明 static targets = ["output"]。Stimulus 会根据这个数组生成单数/复数形式的访问器（this.outputTarget / this.outputTargets）。
常见错误现象：访问 this.outputTarget 报 undefined，但 DOM 上明明写了 data-target；或者 this.outputTargets 返回空数组，实际页面上有多个匹配元素。
-
data-target值格式必须是"controllerName.targetName"，顺序不能颠倒，且controllerName必须与当前控制器注册名一致 - target 名称在
static targets中只需写字符串（如"output"），不带控制器前缀 - 如果 target 元素尚未渲染（比如由 JS 动态插入），
connect()时可能还拿不到，建议在connect()后加requestAnimationFrame延迟读取，或监听stimulus:load事件
控制器生命周期和 this 指向容易被忽略
Stimulus 控制器实例的 this.element 永远指向 data-controller 所在的 DOM 节点，不是事件源元素。事件处理函数里的 this 是控制器实例，不是触发事件的按钮或输入框——这点和原生 addEventListener 回调不同。
常见错误现象：在 increment() 方法里想改按钮文字，直接写 this.textContent = "clicked"，结果报错，因为 this 是控制器对象，不是 DOM 元素。
- 获取事件源要用
event.target或event.currentTarget，不要依赖this指向 DOM -
connect()在控制器绑定到 DOM 后立即调用，disconnect()在移除前调用，适合做清理（如取消定时器、移除全局事件监听） - 如果控制器需要响应属性变化（如
data-counter-value），得手动监听MutationObserver，Stimulus 不提供类似 Vue 的响应式 props
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
