小程序学习日记

目录

一.wxml模板语法

1.Mustach 语法

2.Mustach应用场景 

3.事件绑定

4.事件如何传参

5.bindinput语法

6.WX:if 条件渲染

7.wx:key

二.WXSS

---

一.wxml模板语法

1.Mustach 语法

在js文件data中定义数据

在wxml中{{}}使用

2.Mustach应用场景 

动态绑定属性

<iamge src='{{}}'/>  原本是:方式 这里还是插值表达式

3.事件绑定

bindtap / bind:tap

bindinput/bind:input

bindchange/bind:change

<button type="primary" bindtap="addfn">点我</button>

  addfn(e){

this.setData({

  age:this.data.age+1

})

4.事件如何传参

data-info="{{值}}"

this.data.age+e.target.dataset.info

data-info="2" 这样是文本

5.bindinput语法

e.detail.value 获取文本框最新的内容 别写成了datail

文本框和data之间数据同步

1.定义数据

2.渲染结构

3.美化样式

4.绑定事件

6.WX:if 条件渲染

wx:if  wx:elif  wx:else

同时控制多个组件显示隐藏 使用block  wx:if='{{true}}'  

hidden 隐藏  是false 显示 不能写在block上

wx:for  

wx:for='{{定义的数组}}

{index}    {{item}}

7.wx:key

循环要加 key 提高渲染效率 

二.WXSS

rpx单位 @import样式引入

全局配置

全局引入样式在app.wxss中

全局样式和局部样式冲突时

当全局样式小于局部时 采用就近原则