小程序---模板语法：

目录

数据绑定：

运算：

列表渲染：

wx:for

列表循环 

 对象循环

block：

条件渲染：

wx:if

hidden

小程序事件的绑定

bindinput：

bindtap：

---

数据绑定：

在wxml文件中：<text></text>相当于网页中的<span></span>

<view></view>相当于<div></div>

<checkbox></checkbox> 相当于复选框

page方法里传入一个对象：data是关键字不能更改放在data里的就是初始化数据

 

Page({
    data({
    
        })
})

<!--1 字符串-->
<view>{{msg}}</view>

<!--2 数字-->
<view>{{num}}</view>

<!--3 boolean类型-->
<view>是否是伪娘：{{isGirl}}</view>

<!--4 object类型-->
<view>{{person}}</view><!--不对 [object Object] 需要点到具体属性   -->
<view>{{person.age}}</view>
<view>{{person.height}}</view>
<view>{{person.weight}}</view>
<view>{{person.name}}</view>

<!--5 在标签的属性中使用-->
<view data-num="{{num}}">自定义属性</view>

<!--6 使用bool类型充当属性-->
<view>
	<checkbox checked="{{isChecked}}"></checkbox><!--字符串和花括号之间一定不要存在空格，否则会识别失败的。如：<checkbox checked="    {{isChecked}}"></checkbox>-->
</view>

//js
Page({
    data:{
        msg:"hello mina",
        num:10000,
        isGirl:false,
        person:{
            age:24,
            height:173,
            weight:99,
            name:"富婆"
        },
        isChecked:false
    }
})

运算：

 

<!--运算=>表达式
	1.可以再花括号中 加入表达式 ---“语句”
	2.表达式：指的是一些简单运算，数字运算，字符串，拼接，逻辑运算..
		数字加减、字符串拼接、三元表达式
	3.语句：复杂的代码段  if..else 、 switch 、 do...while、for..
-->
<view>{{1+1}}</view>   2
<view>{{'1'+'1'}}</view>  11
<view>{{10%2===0?'偶数':'奇数'}}</view>   偶数

列表渲染：

wx:for

Page({
    data({
        list:[
            {
            	id:0,
                name:"猪八戒"
        	},
            {
            	id:1,
                name:"天蓬元帅"
        	},
            {
            	id:2,
                name:"悟能"
        	}
        ]
    })
})

列表循环 

<!--
列表循环：
	1.wx:for="{{数组或者对象}}"  wx:for-item="循环项目的名称" wx:for-index="循环项的索引"
	2.wx:key="唯一的值"用来提高列表渲染的性能
		key绑定的值
			1.String类型，表示循环项中的唯一属性
			2.保留字*this，他的意思是item本身，*this代表的必须是唯一的字符串和数组。[1,2,3,4]或者["1","2","3"]
	3.嵌套循环：尤其要注意 以下绑定的名称不要重名 wx:for-item="item"  wx:for-index="index"
	4.默认情况下我们不写 wx:for-item="item"  wx:for-index="index"  也会吧把循环项的名称和索引的名称就叫做item和index，所以只有一层循环的话（wx:for-item="item"  wx:for-index="index"）可以省略
-->
<view>
	<view 
          wx:for="{{list}}" 
          wx:for-item="item" 
          wx:for-index="index"
          wx:for-keu="id">
    	索引：{{index}}
        --
        值：{{item.name}}
    </view>
</view>

 对象循环

<!--
对象循环
 	1..wx:for="{{对象}}"  wx:for-item="对象的值" wx:for-index="对象的属性"
	2.循环对象的时候，最好把item和index的名称都修改一下
		wx:for-item="value"  wx:for-index="key"
-->
<view>
	<view>对象循环</view>
    <view wx:for="{{person}}"
          wx:for-item="value"  
          wx:for-index="key"
          wx:for-key="age">
    	属性：{{key}}
        --
        值：{{value}}
    </view>
</view>

block：

渲染一个包含多节点的结构快，block最终不会变成真正的dom元素

<!--
block
	1.占位符标签
	2.写代码的时候 可以看到这个标签的存在
	3.页面渲染，小程序会把它移除掉
-->

条件渲染：

wx:if

<!--
条件渲染
	1.wx:if="{{true/false}}"
		wx:if
		wx:elif
-->
<view>条件渲染</view>
<view wx:if="{{true}}">显示</view>
<view wx:if"{{false}}">隐藏</view>

<view wx:if="{{true}}">1</view>
<view wx:elif="{{false}}">2</view>
<view  wx:else="{{false}}">3</view>

hidden

<view hidden="{{condition}}">True</view>
类似切换 用 hidden
	通过添加样式的方式来切换显示
	hidden属性不要和样式display一起使用
不常使用 用wx:if
	直接把标签从页面结构给移除掉
<!--
条件渲染
	2.hidden
		在标签上直节加入属性  hidden
		hidden={{true}}
-->
<view hidden>hidden</view>
<view hidden={{true/false}}>hidden</view>

小程序事件的绑定

小程序中绑定事件，通过bind关键字来实现，如：bindtap bindinput bindchange等 不同的组件支持不同的时间，具体看组件的说明

bindinput：

bindinput方法可以监听到当前输入框的值，类似于onchange事件，但不太一样。通过e.detail.value可以获取到input的值，return返回的字符串可以替换掉输入的字符串。

bindtap：

在组件中绑定一个事件处理函数。 bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。