前一篇文章Stimulus：连接HTML和JavaScript的桥梁我们介绍了Stimulus。
本文，我们创建一个简单的controller，这也是学习Stimulus如何工作的最佳方式。
做好准备
要进行下面的操作，您需要一个可以运行的Stimulus -starter项目的副本，它是一个预配置的空白页，用于探索Stimulus。
你需要先下载并设置好stimulus-starter
$ git clone https://github.com/hotwired/stimulus-starter.git
$ cd stimulus-starter
$ yarn install
$ yarn start
yarn start
然后浏览器访问http://localhost:9000/
现在先用一个按钮和一个文本框做个简单练习，点击这个按钮时，就在console中打印文本框中的内容。
打开public/index.html，在body中添加如下代码：
<div>
<input type="text">
<button>Greet</button>
</div>
刷新页面，就可以看到文本框和按钮了
核心的，Stimulus的目标是自动连接DOM元素与JavaScript对象。这些JavaScript对象被称作控制器（controller）。
通过扩展框架的内置controller类来创建第一个controller。在src/controllers文件夹内创建一个hello_controller.js文件，写如下代码：
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
}
下一步，我们需要告诉Stimulus这个controller如何连接到HTML。只需要在<div>添加data-controller属性值：
<div data-controller="hello">
<input type="text">
<button>Greet</button>
</div>
这个属性值可以看作是元素和控制器之间的连接。在这个例子中，”hello“告诉Stimulus创建一个实例，所属类是定义在hello_controller.js中的类。
如果浏览器此时刷新页面，不会看到任何改变。那我们怎么知道控制器是否生效了呢？
检验的方法就是，在controller内添加一个connect()方法，在方法里加入打印一行日志。当controller被连接到页面元素时，Stimulus会调用这个connect方法。
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
connect() {
console.log("Hello, Stimulus!", this.element)
}
}
刷新页面，在console中就会看到Hello，Stimulus！紧跟着是一个div元素。
接下来我们改一下，当我们点击Greet按钮时，在console打印日志。
把connect()改成greet()
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
greet() {
console.log("Hello, Stimulus!", this.element)
}
}
我们希望点击按钮时，调用greet()方法。在Stimulus中，用来处理事件的方法被称作action方法。
为了连接action方法与按钮的点击事件，打开public/index.html，在button上添加data-action属性：
<div data-controller="hello">
<input type="text">
<button data-action="click->hello#greet">Greet</button>
</div>
解释一下data-action:
data-action的值click->hello#greet，叫做动作描述符（action descriptor）。
click是事件名称。
hello是控制器标识符。
greet是要触发的方法名称。
刷新页面，然后点击按钮，你应该能在console中看到日志了。
接下来要做的是当点击按钮时，对文本框中的名字说hello。
为了做到这一点，我们需要在controller中添加一个input元素的引用，通过它可以读取属性值。
Stimulus中可以标记重要的元素为targets，因此，我们可以很容易地通过相应的属性在controller中引用它们。打开public/index.html，给input元素添加data-hello-target属性。
<div data-controller="hello">
<input data-hello-target="name" type="text">
<button data-action="click->hello#greet">Greet</button>
</div>
下一步，我们要在controller中定义一个target列表，添加一个目标名为name的字符串。
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
static targets = [ "name" ]
greet() {
const element = this.nameTarget
const name = element.value
console.log(`Hello, ${name}!`)
}
}
然后刷新页面，打开console，在输入框输入一个名字，点击按钮，console里会打印hello, 你输入的名字。
接着我们重构一下greet()方法，提取出一个name()方法。
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
static targets = [ "name" ]
greet() {
console.log(`Hello, ${this.name}!`)
}
get name() {
return this.nameTarget.value
}
}
好了，至此，已经完成了第一个Stimulus controller。
通过本文，大概了解了controller，action，和target这3个概念。下一篇我们再看一下如何使用Stimulus，做个 点击按钮复制文本到粘贴板 的功能。
Stimulus：连接HTML和Javascript的桥梁，实现复制到粘贴板的按钮
,
