一、数据绑定
1.Mustanche语法的格式
应用场景：
①绑定内容：<view>{{变量}}</view>
②绑定属性：
<image src="{{imgSrc}}"></image>
Page({
data: {
imgSrc:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
},
})③三元运算
例如：
在WXML文件中这样写
<view>{{radomNum >5 ? "随机数大于5" : " 随机数小于五"}}</view>
在.js文件中定义数据
data: {
radomNum: Math.random()*10
},
这样就完成了一个最简单的三元运算了二、事件绑定
1.概述：事件绑定在微信小程序中的就是指渲染层到逻辑层之间的通讯
2.常用类型
3.使用
先在.WXML文件中定义事件函数：例如：
<button bindtap="btnHandler">我是tap事件</button>然后在.js文件中声明函数：
Page({
btnHandler(){
console.log("我是tap事件");
},
})这样当你点击按钮时，在控制台就会打印出“我是tap事件”
input事件是配合input标签使用的，唯一不同的是input中有一个even.detail.value，可以时刻获取文本框中最新的值：
Page({
iptHandler(e){
this.setData({
msg: e.detail.value
})
},
/**
* 页面的初始数据
*/
data: {
radomNum: Math.random()*10,
msg:"你好"
},
})这样可以实现文本框和data之间的数据同步
三、条件渲染
1.使用wx:if 来判断是否需要渲染该代码块，同时还可以结合wx:elif 、wx:else一起使用
<view wx:if="{{ condition ==1}}">1</view>
<view wx:elif="{{condition == 2}}">2</view>
<view wx:else>随机</view>如果要一次性控制多个组件的展示与隐藏，可以使用<block></block>标签将多个组件包装起来，并在block标签上使用wx:if控制属性
<block wx:if="{{true}}">
<view></view>
<view></view>
</block>注意：block并不是一个组件，它只是一个包裹性容器
扩展：hidden也能控制元素的显示与隐藏
2.hidden和wx:if对比
①运行方式不同
wx:if 以动态创建和移除元素的方式，控制元素的展示与隐藏
hidden 以切换样式的方式（display: none/block;），控制元素的显示与隐藏
②使用建议
频繁切换时，建议使用 hidden
控制条件复杂时，建议使用 wx:if 搭配 wx:elif、wx:else 进行展示与隐藏的切换
四、列表渲染
1.wx:for 可以根据指定数组循环渲染重复的组件结构，语法示例如下：
<view wx:for="{{array}}">
索引是:{{index}},当前项是:{{item}}
</view>默认情况下，当前循环项的索引用 index 表示；当前循环项用 item 表示。
2.可以通过wx:for-index 指定当前循环项的索引变量名，wx:for-item指定当前项的变量名
3.wx:key的使用
在渲染列表时建议为渲染出来的列表项指定唯一的key值，从而提高渲染效率
<view wx:for="{{array}}" wx:key="id"></view>
