微信小程序--WXML模板（页面结构）-1

一、WXML模板--简单介绍

1.文件的后缀名为wxml，

2.其中标签都为双标签，否则会报错

3.文件名不能用中文

4.view相当于div标签，其中不支持tittle标签

5.image相当于html的img

6.路径中直接写斜线代表小程序项目的根文件夹

7.data-*的用法和html一致，自定义属性用data-进行定义然后属性在js中需要去dataset属性去拿定义的属性

二、WXML模板--数据绑定

1.在页面的js文件中的data中定义初始数据，然后通过插值的方式进行调用（第一段代码为定义部分代码，第二段代码为使用数据时的调用代码）

    /**
     * 页面的初始数据
     */
    data: {
   welcome:'hello',
    },

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

2.当给标签属性绑定数据的时候需要在""里边进行插值，即(前提是我们在data中定义了数据test)

<view data-test="{{text}}"></view>

3.变量区分大小写，绑定定义数据的时候需要注意

4.如果绑定的undefined值或者不存在的变量不会被显示

三、WXML模板--逻辑运算

1.三元运算 （  判断式 ？表达式1  ：表达式2；）

2.算数运算（加减乘除、取余）

3.字符串拼接（利用+号进行字符串拼接）

4.还可以直接在大括号中插值数字、字符串和数组

五、修改数据data

通过this.setData（）函数更改初始化的数据；