微信小程序开发学习(二)

第二天

WXML模板语法–数据绑定

数据绑定的基本原则

​ (1)在data中定义数据

​ 在页面对应的.js文件中，把数据定义到data对象中即可：

Page({
	data:{
	//字符串类型的数据
	info:'init data',
	//数组类型的数据
	msgList:[{msg:'Hello'},{msg:'world'}]
	}
})

​ (2)在WXML中使用数据

Mustache语法的格式

把data中的数据绑定到页面中渲染，使用Mustache语法(双大括号)将变量包起来即可。

语法格式为：

<view>{{要绑定的数据名称}}</view>

Mustache语法的应用场景

主要应用场景如下：

​ (1)绑定内容

动态绑定内容

页面的数据

Page({
  /*页面的初始数据*/
  data: {
    info:'Hello world'
  }
  })

页面的结构

<view>{{ info }}</view>

​ (2)绑定属性

动态绑定属性

页面的数据

Page({
    data:{
        imgSrc:'http://www.itheima.com/images/logo.png'
    }
})

页面的结构

<image src="{{imgSrc}}"></image>

​ (3)运算(三元运算、算术运算等)

三元运算

页面的数据

Page({
    data:{
        randomNum:Math.random()*10//生成10以内的随机数
    }
})

页面的结构

<view>{{ randomNumber>=5? '随机数字大于或等于5':'随机数字小于5'}}</view>

算数运算

页面的数据

Page({
	data:{
		random:Math.random().toFixed(2)//生成一个带两位小数的随机数，例如 0.34
	}
})

页面的结构

<view>生成100以内的随机数：{{ randomNum * 100 }}</view>

WXML模板语法–事件绑定

1.什么是事件

事件是渲染层到逻辑层的通讯方式，通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理

2.小程序中常用的事件

类型 绑定方式 事件描述

tap bindtap 或 bind:tap 手指触摸后马上离开，类似于html中的click事件

input bindinput 或 bind:input 文本框的输入事件

change bindchange 或 bind:change 状态改变时触发

3.事件对象的属性列表

当事件回调触发的时候，会收到一个事件对象event，它的详细属性如下表所示

4.target和currentTarget的区别

target是触发该事件的源头组件，而currentTarget则是当前事件所绑定的组件