微信小程序练习：数据绑定,条件渲染,模板,事件

<view class="container">
    <!--
    1.数据绑定：
        数据绑定使用 Mustache 语法（双大括号）将变量包起来，变量来源于对应js的data里面的数据
    -->
    <view> {{message}} </view>

    <!--
    2.列表渲染：
        在组件上使用控制属性wx:for="{{数组变量}}">绑定一个数组来循环，数组来源于对应js的data的数组变量；
        循环使用：item为数组当前项默认变量名，index为数组默认索引变量名
    -->
    <view wx:for="{{array}}"> {{index}}：{{item}}</view>
    <!-- array 从index.js里面的data.array 里面去的数组数据 item就是数组迭代每一项内容 -->

    <!--



    3.条件渲染:
        在组件上使用 wx:if="{{条件/[true/false]}}" 来判断是否需要渲染该代码块：
    -->
    <view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
    <view wx:elif="{{view == 'APP'}}"> APP </view>
    <view wx:else="{{view == 'MINA'}}"> MINA </view>


    <!-- 4.模板：定义一个模板template写上name属性  模板并不会在界面上显示出来 -->
    <template name="qfName">
        <view>
            姓名{{name}} 年龄 {{age}}
        </view>
    </template>
    <!-- 使用一个模板 is="使用模板的名字"  data表示数据是从哪里来的 -->
    <template is="qfName" data="{{...zhangshan}}"></template> <!--es6语法堂来获取一个json数据-->
    <template is="qfName" data="{{...lisi}}"></template>

    <!--5.事件：-->
    <view bindtap="add" class="view-item">{{count}}</view>

</view>  

"pages/index/index"　index.js

var param = {
    data : {
        message : '微信小程序数据绑定',
        array : ['列表渲染1', '列表渲染2', '列表渲染3'],
        view : 'APP',
        zhangshan : {name : '张山', age : 18},lisi : {name : '李四', age : 28},
        count : 0,
    },
    add:function(e){
        this.setData({
            count:this.data.count + 1
        })
    }
};
//每一个页面调用Page方法


Page(param); 

index.wxml

<view class="container">
    <!--
    条件渲染：
        wx:if="{{条件}}" 来判断是否需要渲染该代码块，为真时显示，为假时不渲染；只能判断一个组件的渲染
        多个组件标签：用<block>标签包起来，加上控制属性wx:if；<block></block>并不是一个组件，只用来接收控制元素
        多个判断条件：用 wx:elif 和 wx:else 来添加一个 else 块：
    -->
    <view wx:if="{{length > 5}}"> 大于5 </view>
    <view wx:else>小于等于5</view>

    <block wx:if="{{isShow? true : false}}">
        <view>view0</view>
        <view>view1</view>
    </block>

    <view hidden>条件渲染wx:if和hidden的区别：条件渲染为真时渲染；hidden组件始终会被渲染，只是简单的控制显示与隐藏</view>
</view>  
index.js

var param = {
    data : {
        length : 6,
        isShow : false,
    }
};

Page(param);1.3列表渲染
index.wxml

<view class="container">
    <!--
    列表渲染：
        在组件上使用控制属性wx:for="{{数组变量}}">绑定一个数组来循环，数组来源于对应js的data的数组变量；
        取数据：item为数组当前项默认变量名，index为数组默认索引变量名
        使用wx:for-item 可以指定数组当前元素的变量名，使用 wx:for-index 可以指定数组当前下标的变量名
        wx:for可以嵌套；可以将wx:for用在<block/>标签上，以渲染一个包含多节点的结构块
    -->

    <view wx:for="{{array}}">
        {{index}}:{{item.message}}
        <!-- array是js里面data的数组变量array  index是数组下标  item是每一项 -->
    </view>

    <view wx:for="{{array}}" wx:for-item="arrayName" wx:for-index="arrayIndex">
        {{arrayIndex}}:{{arrayName.message}}
        <!--用arrayIndex替换了默认的index  用arrayName替换了默认的item -->
    </view>

    <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
        <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
            <view wx:if="{{i <= j}}">
            {{i}} * {{j}} = {{i * j}}
            </view>
        </view>
    </view>

    <block wx:for="{{[1,2,3]}}">
        <view>{{index}}</view>
        <view>{{item}}</view>
    </block>
</view>  
index.js

var param = {
    data:{
        array:[
            {message : 'view0'},
            {message : 'view1'},
            {message : 'view2'}
        ]
    }
}

Page(param);

index.wxml

<view class="container">
    <!-- 定义一个模板 name属性作为模板的名字-->
    <template name="myTemplate"> 
        <view>
            <text>name : {{name}} age : {{age}}</text>
            <text>addr : {{addr}}</text>
        </view>
    </template>

    <!-- 使用一个模板 is表示使用模板的名字 将模板所需要的 data 传入-->
    <template is="myTemplate" data="{{name : 'yang', age : 30, addr: '北京'}}"> </template>
    <template is="myTemplate" data="{{name : 'jian', age : 40, addr: '上海'}}"> </template>


    <!-- data传入方式1 key和value方式-->
    <template is="myTemplate" data="{{name : x, age : y, addr:  a }}"> </template>

    <!-- data传入方式2 直接传入变量-->
    <template is="myTemplate" data="{{name, age , addr}}"> </template>

    <!-- data传入方式3最常用 es6传入json数据-->
    <template is="myTemplate" data="{{...obj1}}"> </template>
    <template is="myTemplate" data="{{...obj2}}"> </template>

    <!-- data传入方式4 es6传入数组形式的json-->
    <template is="myTemplate" data="{{...person_objs[0]}}"> </template>
    <template is="myTemplate" data="{{...person_objs[1]}}"> </template>
</view>  
index.js

var param = {
    data : {
        x : 'zhang',
        y : 50,
        a : '深圳',

        name : 'wang',
        age : 21,
        addr : '广州',

        obj1 : {
            name : 'name1',
            age : 22,
            addr : '广州1',
        },
        obj2 : {
            name : 'name2',
            age : 23,
            addr : '广州2',
        },

        person_objs : [
            {
                name : 'name4',
                age : 25,
                addr : '广州4',
            },
            {
                name : 'name5',
                age : 26,
                addr : '广州5',
            },
        ]
    }
};
Page(param);