数据与事件绑定

• MVVM模式与传统前端开发模式的区别是，数据绑定让逻辑层不再操控DOM

<!-- 数据与事件绑定-->
<view>{{message}}</view>
<view>{{message+"+简单运算"}}</view>

<!-- 条件语句 -->
<view wx:if="{{status}}">1</view>
<view wx:else>2</view>

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

<!-- 循环语句 -->
<view wx:for="{{listData}}" wx:key="id">
  {{index}}: {{item.name}}
</view>

<!-- 三元运算 -->
<view hidden="{{flag ? true : false}}"> Hidden </view>

<!-- 事件与冒泡 -->
<!-- bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。 -->
<view id="preparent" bindtap="onPreparentTap">
    <view id="child" catchtap="onChildTap">
        <view id='test' bindtap="onTap">Click me!</view>
    </view> 
</view>

// 页面逻辑
Page({

    data: {
        message:"数据绑定",
        status:false,
        listData:[
            { id: 1, name: "列表第一项" },
            { id: 2, name: "列表第二项" },
            { id: 3, name: "列表第三项" }
        ]
    },

    onTap: function (event) {
        console.log(event)
        console.log("子级")
    },
    onChildTap: function (event) {
        console.log("父级")
    },
    onPreparentTap: function (event) {
        console.log(event)
        console.log("爷级")
    }
})