WEIXIN day_03(8.18)小程序的数据绑定和渲染

双向数据绑定

Vue中input的双向数据绑定

<template>
	<input v-model="name" placeholder="">
</template>
<script>
	....
    data(){
        return {
            name: ''
        }
    }
    ....
</script>

微信小程序中input的 简易双向数据绑定

您输入的内容是：{{name}}
<input type="text" model:value="{{name}}" />

Page({
    data:{
        name: ''
    }
})

微信小程序中标准双向数据绑定

<input type="text" bindinput="handleInput"/>
您输入的xx是：{{name}}

Page({
    data: {
        name: ''
    },
    /** 一旦修改输入框的value，就会触发input事件，执行该事件处理函数 */
    handleInput(event){
        let val = event.detail.value  // 输入框的值
        this.data.name = val  // 第一种修改方法  (不能实时更新UI)
        this.setData({   //第二种修改data的方法 (可以实时更新UI)
        	name: val
        })  
    }
})

WXML中数据绑定的语法总结

在WXML文件中可以通过{{}}来引用data里所声明的变量。主要的使用场景分为如下五种：

data: {
	name: '',
    age: 15,
    hobby: [1,,3,4],
    school: {xxx: xxx}
    .....
}

1. 内容动态绑定

   <view>{{name}}</view>
   <view>{{age}}</view>
   <view>{{school.xxx}}</view>
   

2. 属性动态绑定

   可以动态设置组件的属性：

   data: {
       url: '/images/1.jpg',
       filename: '1.jpg',
       n:1,
       ext: 'png',
       flag: true
   }
   

   <image src="{{url}}"></image>
   <image src="/images/{{filename}}"></image>
   <image src="/images/{{n}}.{{ext}}"></image>
   <scroll-view show-scrollbar="{{flag}}"></scroll-view>
   

3. 样式动态绑定

   data: {
   	className: 'red',
       c: 'red',
       bw: 1,
       bc: 'blue'
   }
   

   .red {  background: red;  }
   .blue {  background: blue;  }
   

   <view class="{{className}}"></view>
   <view style="color: {{c}}; border: {{bw}}px solid {{bc}};">
   </view>
   

4. 列表渲染

   列表渲染可以实现将data中的数组、对象遍历显示在页面中。

   data: {
       goods: [
           {id:1001, name:'臭豆腐', price:12.0, count:2},
           {id:1002, name:'螺蛳粉', price:6.5, count:3},
           {id:1003, name:'鲱鱼罐头', price:16.5, count:4},
           {id:1004, name:'蜜汁榴莲', price:101.5, count:1}
       ]
   }
   

   Vue完成列表渲染的语法如下：

   <div v-for="item,i in goods"  :key="item.id">
   	ID：{{item.id}},   
       名称：{{item.name}}   
       价格：{{item.price}}    
       数量：{{item.count}}
   </div>
   

   小程序中完成列表渲染的语法如下：

   <view wx:for="{{goods}}">
       下标：{{index}}
   	ID：{{item.id}},   
       名称：{{item.name}}   
       价格：{{item.price}}    
       数量：{{item.count}}
   </view>
   

   上述代码将会遍历goods数组，将数组中的每一个对象输出为一个view组件，并且将对象的属性输出在相应位置。在使用wx:for的过程中，小程序将会把数组中的每一个对象赋值给变量item，并且将下标值赋值给变量index，所以可以直接在模板代码中使用{{item}}引用对象，{{index}}引用对应的下标。

   这样可以正常的完成列表渲染，但是控制台将会有一个警告：

   Now you can provide attr `wx:key` for a `wx:for` to improve performance.
   

   wx:key

   如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 input 中的输入内容，switch 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。

   wx:key 的值以两种形式提供

   1. 字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
   2. 保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。

   当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

   如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

   通过wx:for可以完成列表的遍历，使用item引用数组每一个元素，使用index引用元素对应的下标（默认的两个变量）。在遍历过程中，有时需要修改这两个变量，可以如下设置：

   <view wx:for="{{goods}}" wx:key="id"
         wx:for-item="g"  wx:for-index="i">
       下标：{{i}}
   	ID：{{g.id}}   
       名称：{{g.name}}   
       价格：{{g.price}}    
       数量：{{g.count}}
   </view>
   

5. 条件渲染

   data: {
       isLogin: true,  // 是否已经登录
   }
   

   <view wx:if="{{isLogin}}">
       欢迎：xxxx
   </view>
   <view wx:else>
       去登录 
       去注册
   </view>
   

   微信小程序常见的条件渲染的语法如下：

   <view wx:if="{{条件表达式}}">XXX</view>
   -----------------------------------------
   <view wx:if="{{条件表达式}}">XXX</view>
   <view wx:else>XXX</view>
   -----------------------------------------
   <view wx:if="{{条件表达式}}">XXX</view>
   <view wx:elif="{{条件表达式}}">XXX</view>
   <view wx:elif="{{条件表达式}}">XXX</view>
   <view wx:elif="{{条件表达式}}">XXX</view>
   <view wx:else>XXX</view>
   

radioGroup组件

radioGroup组件用于实现单选按钮组。基本用法：

<radio-group>
	<radio color="blue" checked value="m">男</radio>
	<radio color="red" value="f">女</radio>
</radio-group>

案例：pages/form/form。