图文版
本章以及下一章学习小程序的事件绑定，我们通过一个案例来讲解其中相关的知识点，便于大家理解哦~~
首先，先来看这个案例的需求。
我们使用画图工具，先在上面绘制一个小程序页面，
如下图：
再在页面的最上方放一个输入框，如下图：
我们要实现的第一个需求是：
当我在输入框中输入文字，比如123，会如实地映射至下面的标签文件中，显示123；
如果上方的输入框文字改变，对应下方的标签文件也发生相应的改变。
如下图所示，
页面右侧是一个“+”号按钮，点击按钮，实现对标签文件数字123＋1；页面右侧下方是一个“-”按钮，点击按钮，实现对标签文件数字123-1。
这就是我们要实现的第二个需求。
明确需求后，接下来我们就写代码来实现这两个需求。
由于篇幅较长，会分为两篇文章来讲解，这章先讲第一个需求。
1、新增一个页面demo04
打开app.json文件，新增文件demo04，保存。
2、demo04.js文件中，只保留data部分，删除其他原有数据，
并添加“num:0”，如下图：
3、demo04.wxml文件，删除其中的原有内容，加入input标签。
代码如下：
<inputtype="text"/>
这里要注意的一点是，
上述代码中，input标签中“/”是不能遗漏的，否则会报错！
保存后，发现右侧的小程序页面并没有发生变化，那它在哪呢？
这时，我们只需要将鼠标移至页面顶端，
点击，输入1234，数字就可在页面中显示。
操作如下图。
4、demo04.wxml文件中，添加view标签，代码如下：
<view>{{num}}</view>
保存，右侧页面显示0。
我们要实现第一个需求，
即在小程序页面的输入框中输入123，在下面（0这一行）也显示相同的文本123。
这就需要我们将input标签绑定input事件，
而且这个事件是只有在输入框的值发生变化的时候才会触发。
所以，这里，我们要用的绑定关键字为bindinput
5、绑定一个input事件。
将input标签修改如下：
<inputtype="text"/handleinput="">
""内是要加入一个函数，也就是handleinput后要绑定一个函数。
6、在demo04.js文件中，写入handleinput要绑定的这个函数，与data同层。
代码如下：
Page({data:{num:0},//输入框的input事件的执行逻辑handleinput(e){console.log("");}})
7、将上述代码中的handleinput函数粘贴至input标签，此时就完成了对input事件的绑定。
<inputtype="text"bindinput="“handleinput"/><view>{{num}}</view>
8、点击小程序页面，在输入框内输入1，观察控制台的变化。
如下图，控制台出现”：
此时，我们在输入框中输入2，控制台显示3。
这表示事件已经绑定成功。
成功绑定事件后，那接下来如何获取输入框的值，
并将其放至demo04.js文件中的data部分中呢？
这就需要通过事件源对象来获取对象“e”
9、修改demo04.js文件中console.log的内容，将这样：
修改成这样：
10、保存后，回到小程序页面，在输入框中输入1,
可观察到下图控制台console-detail部分，value=1，
所以这里的源对象就为e.detail.value
11、将源对象e.detail.value复制至demo04.js文件—
修改data部分-console.log(e.detail.value)，
具体如下：
12、在小程序页面的输入框中输入1234，会发现控制台也会出现对应的数字1234，如下图：
13、最后一步，我们需要将源对象e.detail.value与num值产生联系。
方法是，将输入框中的值直接赋值至data中，在demo04.js中，修改代码如下：
Page({data:{num:0},//输入框的input事件的执行逻辑handleinput(e){//console.log(e.detail.value);this.setData({num:e.detail.value})}})
保存后，在小程序页面的输入框输入123456下面的一行也会随之改变。
输入框的值也可在控制台—AppData——num中看到更新：
经过以上13个步骤，我们成功实现了开始时说的第一个需求：
当我在输入框中输入文字，比如123，会如实地映射至下面的标签文件中，显示123；
如果上方的输入框文字改变，对应下方的标签文件也发生相应的改变。
第二个需求的具体操作，请关注我们下一章的讲解~~~
