小程序的事件绑定和SetData
微信小程序的事件绑定
如何事件绑定
wxml文件
<!--pages/test1/test1.wxml-->
<view bindtap="click1">我是事件</view>
<button bind:tap="click1" data-name="{{name}}" data-age="18" id="bt">我是按钮</button>
<view id="outter" bindtap="click3" data-a="o">外面
<view id="innder" bindtap="click2" data-a="i">
里面
</view>
</view>
js文件
Page({
/**
* 页面的初始数据
*/
data: {
name:"owen"
},
//e为事件对象，事件所有产生的数据都在e中
click1:function(e){
console.log("你点我了"，e)
},
)}
总结：
1 响应函数直接写在page对象中就可以了，不需要和vue一样写在methods里面
2 <view bind:事件名称 = "响应函数的函数名" data-参数名 = "值">
3 获取2中传过来的值，在事件对象中。例如：e.currentTarget.dataset中
事件补充
bind:tap就是事件的冒泡，从里面到外面传递，点击里面的，会向外触发事件
capture-bind:tap 事件的捕获，从外面到里面，点击外面的，会向内部触发事件
js文件
// pages/test1/test1.js
Page({
/**
* 页面的初始数据
*/
data: {
name:"owen"
},
click1:function(e){
console.log("你点我了",e)
},
click2:function(e){
console.log("里面",e)
},
click3:function(e){
console.log("外面",e)
},
click4:function(e){
console.log("捕获外")
},
click5:function(e){
console.log("捕获中")
},
click6:function(e){
console.log("捕获里")
}
,
click7:function(e){
console.log("冒泡外")
},
click8:function(e){
console.log("冒泡中")
},
click9:function(e){
console.log("冒泡里")
}
})
wxml文件
<!-- capture-bind:tap 事件的捕获，从外面到里面-->
<!-- bind:tap就是事件的冒泡，重里面到外面传递 -->
<view class="outter" capture-bind:tap="click4" bind:tap="click7" data-a="o">外面
<view class="midd" capture-bind:tap="click5" bind:tap="click8" data-a="i">
<view class="innder" capture-bind:tap="click6" bind:tap="click9">
里面
</view>
中间
</view>
</view>
<!-- 如何阻止事件捕获 将 capture-bind:tap改成 capture-catch:tap-->
<view class="outter" capture-bind:tap="click4" bind:tap="click7" data-a="o">外面
<view class="midd" capture-catch:tap="click5" bind:tap="click8" data-a="i">
<view class="innder" capture-bind:tap="click6" bind:tap="click9">
里面
</view>
中间
</view>
</view>
<!-- 如何阻止事件冒泡 将bind：tap 改成 catch:tap-->
<view class="outter" capture-bind:tap="click4" bind:tap="click7" data-a="o">外面
<view class="midd" capture-bind:tap="click5" bind:tap="click8" data-a="i">
<view class="innder" capture-bind:tap="click6" catch:tap="click9">
里面
</view>
中间
</view>
</view>
wxss文件
<!-- capture-bind:tap 事件的捕获，从外面到里面-->
<!-- bind:tap就是事件的冒泡，重里面到外面传递 -->
<view class="outter" capture-bind:tap="click4" bind:tap="click7" data-a="o">外面
<view class="midd" capture-bind:tap="click5" bind:tap="click8" data-a="i">
<view class="innder" capture-bind:tap="click6" bind:tap="click9">
里面
</view>
中间
</view>
</view>
<!-- 如何阻止事件捕获 将 capture-bind:tap改成 capture-catch:tap-->
<view class="outter" capture-bind:tap="click4" bind:tap="click7" data-a="o">外面
<view class="midd" capture-catch:tap="click5" bind:tap="click8" data-a="i">
<view class="innder" capture-bind:tap="click6" bind:tap="click9">
里面
</view>
中间
</view>
</view>
<!-- 如何阻止事件冒泡 将bind：tap 改成 catch:tap-->
<view class="outter" capture-bind:tap="click4" bind:tap="click7" data-a="o">外面
<view class="midd" capture-bind:tap="click5" bind:tap="click8" data-a="i">
<view class="innder" capture-bind:tap="click6" catch:tap="click9">
里面
</view>
中间
</view>
</view>
动态渲染数据
利用事件绑定，去修改.js文件pages中的data数据，并实时渲染到页面，需要利用setData
作业：
// pages/test/test.js
data: {
num: 0
},
onclick: function(e){
this.setData({
num: this.data.num + 1
})
},
/* pages/test/test.wxss */
.center {
text-align: center;
}
<!--pages/test/test.wxml-->
<button class="center" bindtap="onclick" data-num="{{num}}">点我试试</button>
<view class="center">当前被点击{{num}}次</view>
vue中的习惯是直接this.data修改数据，但在微信小程序中需要借助setData，在开发程序的时候，我们要遵循别人的规则来开发，不要被习惯所左右。
