WXML

数据绑定

1、基本数据类型

    {{msg}}

2、对象

    {{person.name}}

3、数组

    {{arr[0]}}

组件属性(需要在双引号之内)

控制属性(需要在双引号之内)

关键字(需要在双引号之内)    

    <checkbox checked="{{false}}"> </checkbox>

    不要直接写 checked="false"

引号和花括号不能有空格

运算

可以在 {{}} 内进行简单的运算

三元运算、算数运算、逻辑判断、字符串运算...

列表渲染

wx:for="{{绑定一个数组/对象}}"

wx:for-item="{{循环项名称}}"

wx:for-index="{{循环项下标}}"

wx:key 绑定普通字符串时，这个字符串为 循环数组中的 对象的 唯一属性

wx:key="*this" 表示数组为普通数组， *this 为循环项

数组

    wx:for-item="{{item}}"

    wx:for-index="{{index}}"

对象

    wx:for-item="{{value}}"

    wx:for-index="{{key}}"

data: {
    arr: [
    {name: 'lisi', age: 18},
    {name: 'libai', age: 28}
    ]
}

<view 
wx:for="{{arr}}" 
wx:for-item="{{item}}" 
wx:for-index="{{index}}"
wx:key="name"
></view>

条件渲染: 是否需要渲染该代码块

<block></block> 一个包装元素，不会在页面中做任何渲染，只接受控制属性。

wx:if="{{true}}"

wx:elif="{{true}}"

wx:else="{{true}}"

hidden

hidden="{{true}}"

使用： 

    1、当标签不是频繁的切换使用    wx:if

        直接把标签从页面上移除掉

    2、当标签频繁的切换使用        hidden

        添加样式 display： node 隐藏

模板引擎

 定义：  
 <template name="msgItem">
        <view>
            <text> {{index}}: {{msg}} </text>
            <text> Time: {{time}} </text>
        </view>
    </template>
使用：
    <template is="msgItem" data="{{...item}}"/>

    data: {
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'
    }
  }

引用

WXML 提供两种文件引用方式import和include。

1、import

import可以在该文件中使用目标文件定义的template，如：

在 item.wxml 中定义了一个叫item的template：

<template name="item">

  <text>{{text}}</text>

</template>

在 index.wxml 中引用了 item.wxml，就可以使用item模板：

<import src="item.wxml"/>

<template is="item" data="{{text: 'forbar'}}"/>

import 的作用域

import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的 template。

2、include

include 可以将目标文件除了 <template/> <wxs/> 外的整个代码引入，相当于是拷贝到 include 位置

<include src="header.wxml"/>

<!-- header.wxml -->

<view> header </view>