一、双花括号{ {}}插值和MVVM模式
1.1 体会{ {}}插值
index.wxml的标签不是html的那些标签,这里的view就是div。
{ {}}这样的插值写法,叫做mustache语法。mustache是胡子的意思,因为{ {}}像胡子。
<view class="container"> <view class="title"> 我是首页 { {1 + 1}} { {a}}年! </view> </view>
要在同名js文件下的data属性中定义:
Page({ data : { a : 100 } });
所有的框架:Angular、React、Vue、ReactNative、小程序都是这样的“强耦合”的。
之前我们js操作html使用:document.getElementById()这样的“不耦合”的方式,但是反而编程麻烦。
不仅仅{ {}}可以出现在文字的部分,还可以出现在属性值的双引号中:
<view class="box" style="width:{ {a}}px;height:{ {a}}px">我是盒子</view>
1.2 体会MVVM模式
<button bindtap='add'>按我</button>
监听直接写在标签上,bindtap表示绑定轻触事件。
注意,是bindtap="add"而不是:bindtap="add()"
'add'是一个函数,要定义在js文件中。
注意:改变数据不能直接改,如果这样写,a的确会变化,但是视图不会跟着变化!
Page({ data : { a : 100 }, add(){ this.data.a++; } });
必须使用this.setData()函数来改变data值,此时视图才能变化。
Page({ data : { a : 100 }, add(){ this.setData({ a : this.data.a + 1 }); } });
数据变化了,视图会自动改变
我们学习的所有框架都是MVVM模式的,只需要关心数据,不需要关心视图,视图会自动变化。
二、数据双向绑定
2.1 调色板
先说一个知识点,用户的屏幕是750rpx。所以如果盒子750rpx宽度,一定撑满的,375rpx就是半屏。
slider组件:
index.wxss
.box{ width:350rpx; height:350rpx; margin:10px auto; }
index.wxml:style行内样式的插值,实现双向数据绑定,就是data中的数据能够成为组件的默认数据。
添加一个bindchanging事件,这个事件从手册上查的。添加一个自定义属性,叫做data-ys来区分谁是谁。
注意,自定义属性必须以data-开头
<view class="container"> <view class="box" style="background-color:rgb({ {r}},{ {g}},{ {b}})"