小程序数据绑定及事件

数据绑定

mustache 语法可以用在：
1、innerHTML（类似）
2、元素的属性上
3、可以使用字面量和简单逻辑运算符

不能用在标签名和属性名上,当语法解析误解了true/false可以使用 {{ }}解决

定义数据 (js文件中定义data数据)

page({
    data:{
        name:"zhangsan"
  }
})

在wxml文件中进行数据绑定

<text>{{ name }}</text>

列表数据渲染

todo = [{"name":"zhangsan","age":10},{"name":"lisi","age":18}]
循环：wx:for="{{ todo }}"   
使用：{{ item.name }}

注：如果全局属性中有item关键词（给被遍历的对象定义名称

循环：wx:for-item = "aaa"  使用{{ aaa.name }}

获取序号： {{ index }}

注：如果全局中有index关键词（给下标定义名称

wx:for-index="i"   {{ i }}

显示隐藏

wx:if 根据一个bool值来决定显示或隐藏

事件

点击事件

<button bindtap = “buttonTapHande(e)l”>点我</button>


page({
       buttonTapHandel:function( e ){
         console.dir( e ) 将对象以树状的形态打印到控制栏   
} 
})

阻止事件冒泡

catchtap = "innerHandel"

catch+事件名阻止冒泡并绑定事件

事件传参

在HTML中定义参数

<button bindtap="tapHandel" data-name = "zhangsan">我是一个按钮</button>

获取参数（在js文件中
e.target拿到点击的元素
dataset指的是元素上所有以data-开头的属性集合

page({
  tapHandel:function(e){
    console.dir(e.target.dataset)
  }
})

单向数据流

实现双向数据绑定

思路：定义数据，将数据显示在界面层，当界面层的数据发生改变时，定义的数据也发生改变。
index.xml

<view class="container">
    <input value="{{message}}" bindinput="inputHandle">
    <text>{{message}}</text>>
</view>

index.js

page({
    data:{
        demo:11,
        message:'zhangsan'
    },
    inputHandle:function(e){
        this.setData({
            message:e.detail.value
        })
        console.log(this.data)
    }
})

this.setData 用来改变data中的数据
它与直接赋值的区别在于setData可以通知界面做出变化
直接赋值没有办法实现这一点（早期js

参考资料：https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/data.html