1. 数据绑定的概念和基础
- Mustache 语法（双大括号）模板语法
{{textstr+2}}
<view>{{"hello" + name}}</view>
注意：花括号和引号之间如果有空格，将最终被解析成为字符串
- 单向数据绑定
页面数据改变不影响变量数据
2. 动态数据绑定
- 小程序data赋值
this.setData(对象)
- 获取data里面的值
this.data.(key值)
3. 深度了解小程序的条件渲染
- wx:if为true就显示元素，false不不显示
- 语法
<view wx:if="{{score<60}}">不不及格</view>
<view wx:elif="{{score>=80}}">优秀</view>
<view wx:else>良好</view>
频繁切换用 hidden
不常使用用 wwxx::iiff
<view hidden="{{condition}}"> True </view>
4. 深度了解小程序的列表渲染
- wx:for绑定数组，wx:for-item值为当前项目的变量名，wx:for-index值为当前下标的变量名，wx:key 用来提高数组渲染的性能
<block wx:for="{{list}}" wx:for-item="course" wx:for-index="idx" wx:key="id">
<view class="item">
<view class="item_img">
<image src="{{course.img}}"></image>
</view>
<view class="item_name">{{course.name}}</view>
<view>{{idx}}</view>
</view>
</block>
保留字 * this ，它的意思是 item 本身 ，* this 代表的必须是唯⼀的字符串和数组。
list:[1,2,3,4,5]
wx:key="*this"
5. 绑定事件与事件交互
- bind+事件
<button bindtouchstart="changeData" bindtouchend="tmove"
bindlongpress="lpress">改变数据</button>
- 需要在js里写对应的方法
//点击事件
changeData:function(){
this.setData({
textStr:"hello 小程序"
})
},
//触摸移动
tmove:function(){
console.log("touchend");
},
//长按触发
lpress:function(){
console.log("longpress")
},
特别注意
- 绑定事件时不能带参数不能带括号 以下为错误写法
<input bindinput="handleInput(100)" />
- 事件传值 通过标签自定义属性的方式 和 value
<input bindinput="handleInput" data-item="100" />
- 事件触发时获取数据
handleInput: function(e) {
// {item:100}
console.log(e.currentTarget.dataset)
// 输入框的值
console.log(e.detail.value);
6. 深入了解事件机制--catch与bind
- bind会应用到冒泡机制，catch会阻止事件冒泡
阻止冒泡：
<view class="box" bindtap="containerTap">
<text catchtap="txtTap">小程序</text>
</view>
- 捕获阶段的capture-bind与capture-catch,绑定事件需要加上冒号
capture-bind:tap(绑定事件)
capture-catch:tap(绑定事件)（阻止捕获）
7. 样式导入
wxss中直接就支持样式导入功能
也可以和 less中的导入混用
使用 @import 语句可以导入外联样式表，只支持相对路径
···
@import "common.wxss";
.middle-p {
padding:15px;
}
···
