小程序学习第二天(WXML语法,WXSS样式,事件系统,WXS脚本语法 ,组件)

视图层概述 

(1)框架的视图层由 WXML 与 WXSS 编写，由组件来进行展示。
(2)将逻辑层的数据反映成视图，同时将视图层的事件发送给逻辑层。
(3)WXML(WeiXin Markup language) 用于描述页面的结构。
(4)WXS(WeiXin Script) 是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。
(5)WXSS(WeiXin Style Sheet) 用于描述页面的样式。
(6)组件(Component)是视图的基本组成单元。

WXML语法

https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/  文档地址

## 1.wxml概述及作用 

概述：

```
WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。
```

## 2.数据绑定  

> { {}}

```html
<!-- 数据绑定 -->

<!-- 内容绑定 -->
<view>{ {msg}}</view>

<!-- 属性绑定 -->
<view class="{ {a}} item">属性绑定</view>

<!-- 关键字 布尔值  -->
<view hidden="{ {true}}">隐藏</view>
<view hidden="{ {false}}">显示</view>

<!-- 运算 -->
<!-- 字符串运算 -->
<view>{ {1+2+3+"4"}}</view>
<view>{ {"4"+1+2+3}}</view>

<!-- <view>{ {num.toFixed(2)}}</view> -->

<!-- 数据路径运算 -->
<view>{ {arr[1]}}</view>
<view>{ {obj.name}}--{ {obj.age}}</view>

```

## 3.列表渲染wx:for 

https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/list.html

```html
<!-- 列表渲染 
        vue v-for="（item,index) in arr"
        小程序 wx:for="{ {arr}}" 默认变量 item index
-->
<view wx:for="{ {arr2}}">
    { {index}}--{ {item}}
</view>

<!-- 修改变量 wx:for-index="ind" wx:for-item="val" -->
<view wx:for="{ {arr2}}" wx:for-index="ind" wx:for-item="val">
    { {ind}}--{ {val}}
</view>

<!-- 双引号和{ {}}之间不要加空格 -->
<view wx:for="{ {arr2}}" wx:for-index="ind" wx:for-item="val">
    { {ind}}--{ {val}}
</view>

```

```html
<!-- wx:key 指定项目的唯一标识
        1)*this  item本身就是唯一的字符或者数字时
            [{id:0,name:"zhang",age:3},{id:1,name:"zhang",age:5}]
        2）item中某个属性--字符串，属性值时唯一不重复的

        确保使组件保持自身的状态，并且提高列表渲染时的效率
 -->
<switch type="checkbox" wx:for="{ {arr}}" wx:key="*this"></switch>
<button bindtap="fun">add</button>
```

`