1、小程序数据绑定和事件绑定
<!--pages/index/index.wxml--> <view class='box'> <view class='title'>数据绑定示例</view> <view>算术运算绑定:{{a}}+{{b}}+{{c}}={{a+b+c}}</view> <view>对象绑定-学号:{{Student.stuID}}</view> <view>对象绑定-姓名:{{Student.name}}</view> <view>对象绑定-生日:{{Student.birthday}}</view> <view>数组绑定-array[0]:{{array[0]}}</view> <view>数组绑定-array[1]:{{array[1]}}</view> <view>数组绑定-array[2]:{{array[2]}}</view> <button type='primary' bindtap='modify'>修改绑定数据</button> </view>
/* pages/index/index.wxss */ view { font-size: 18px; margin: 10px; }
// pages/index/index.js Page({ data: { //初始化数据 a: 10, //初始化绑定的普通数据 b: 20, c: 30, Student: { //初始化绑定的对象数据 stuID: '20190213', name: '张三', birthday: '2001-9-1' }, array: [ //初始化绑定的数组数据 '2018', '2019', '2020' ] }, modify: function () { //事件函数 this.setData({ //修改绑定数据的值,this.setData直接调用了小程序中预定义的函数setData a: 100, //修改绑定的普通数据的值 b: 200, c: 300, Student: { //修改绑定的对象数据的值 stuID: '20190213', name: '李四', birthday: '2001-9-1' }, array: [ //修改绑定的数组数据的值 '2028', '2029', '2030' ] }) } })
页面初始渲染完成:
点击“修改绑定数据”按钮:
2、WXML
是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。
3、data对象
是页面第一次渲染时使用的初始数据,WXML中的动态数据均来自对应 Page的 data。页面加载时,data以JSON字符串的形式由逻辑层传至渲染层,数据类型包括:字符串,数字,布尔值,对象, 数组等。
4、数据绑定
渲染层可以通过 WXML 对数据进行绑定。数据绑定使用 Mustache 语法(双大括号)将变量包起来,可以作用于:内容、组件属性、控制属性、 关键字、运算、组合、数组、对象等场景。
5、setData() 函数
用于将数据从逻辑层发送到视图层(异步),同时改变对应的 this.data 的值(同步)。
6、事件绑定
事件是视图层到逻辑层的通讯方式,它可以将用户的行为反馈到逻辑层进行处理。事件可以绑定在组件上,当触发事件,就会执行逻辑层中对应的事件处理函数。事件对象可以携带额外信息,如 id, dataset, touches。