小程序 模版与配置

WXML模版语法

一、数据绑定

1、数据绑定的基本原则

（1）在data中定义数据

（2）在WXML中使用数据

2、在data中定义页面的数据

3、Mustache语法的格式（双大括号）

4、Mustache语法的应用场景

（1）绑定内容

（2）绑定属性

（3）运算（三元运算、算术运算等）

5、动态绑定内容

6、动态绑定属性

7、三元运算

8、算术运算

二、WXML模版语法-事件绑定

1、小程序中常用的事件

2、事件对象的属性列表

3、target和currentTarget的区别

4、bindtap 的语法格式 （相当于鼠标点击事件）

5、在时间处理函数为data中的数据赋值

通过调用this.setData(dataObject)方法，可以给页面data中的数据重新赋值

6、事件传参

小程序中的事件传参比较特殊，不能在绑定事件的同时为事件处理函数传递参数

7、事件传参（正确）

可以为组件提供data-*自定义属性传参，其中*代表的是传参的名字

info会被解析为参数的名

数值2会被解析为参数的值

7、事件传参

在事件处理函数中，通过event.target.dataset.参数名，即可获取到具体参数的值

8、bindinput的语法格式

9、实现文本框和data之间的数据同步

实现步骤：

（1）渲染数据

（2）渲染结构

（3）美化样式

（4）绑定input事件处理函数

三、条件渲染

1、wx:if

2、结合<block>使用wx:if

如果要一次性控制多个组件的展示和隐藏，可以使用一个<block></block>标签将多个组件包装并在<block>标签上使用wx:if控制属性

注意：<block>并不是一个组件，只是一个包裹性质的容器，不会在页面中做任何渲染

3、hidden

直接使用也能控制元素的显示与隐藏

4、wx:if与hidden的对比

（1）运行方式不同

wx:if以动态创建和移除元素的方式，控制元素的展示与隐藏

hidden以切换样式的方式（display:none/block），控制元素的显示与隐藏