前端笔记之微信⼩程序（⼆）{{}}插值和MVVM模式数据双向
绑定指令API
⼀、双花括号{{}}插值和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操作htm l使⽤：ElementById()这样的“不耦合”的⽅式，但是反⽽编程⿇烦。
不仅仅{{}}可以出现在⽂字的部分，还可以出现在属性值的双引号中：
<view class="box" >我是盒⼦</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.tData()函数来改变data值，此时视图才能变化。
Page({
data : {
a : 100
美发发型},
add(){
this.tData({
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" ></view>
<slider value="{{r}}" bindchanging="changeColor" data-ys="r" max="255" show-value block-size="18"/>
<slider value="{{g}}" bindchanging="changeColor" data-ys="g" max="255" show-value block-size="18"/>
<slider value="{{b}}" bindchanging="changeColor" data-ys="b" max="255" show-value block-size="18"/>
</view>
index.js 事件处理函数：
Page({
data : {
r : 100,
g : 200,
b : 123
},
changeColor(event){
this.tData({
[event.target.datat.ys] : event.detail.value
})
}
});
event.target.datat.ys就是当前触发这个函数的组件⾝上的ys标识。
event.detail.value就是当前触发这个函数的组件的值。
也就是说，微信⼩程序的事件处理函数，⼀律不能传参！
<button bindtap="add(5)"></button>
只能是：
<button bindtap="add" data-n="5"></button>
2.2 微博发布框
class的动态实现：{{}}中不能出现复杂语句，⽐如不能有for、if、while、var，最复杂就是三元了。
<view class="container">
<textarea value="{{content}}" bindinput="inputHandler" placeholder="默认" auto-focus />
<view class="{{content.length > 40 ? 'danger' : ''}}">当前：{{content.length}}字/40字</view>
<view class="row">
<button disabled="{{content.length == 0 || content.length > 40}}">发布</button>
<button bindtap="clear" disabled="{{content.length == 0}}">清空</button>
</view>
</view>
index.js
Page({
data : {
content : ""
},
拉伸可以长高吗
//当⽤户输⼊⽂本的时候
inputHandler(event){
this.tData({
content : event.detail.value
});
},
//清空
clear(){
this.tData({ content: "" });
}
});
⽰例代码
index.wxss
.danger{color:red;font-weight: bold;}
.row{display: flex;}
三、指令
3.1 wx:if指令
判定⼀个元素是否上树，⽽不是是否显⽰。
<view class="container">
<button wx:if="{{isAgree}}">注册</button> </view>
当这个变量是true按钮上树，否则下树。
3.2 wx:for循环指令
命令⼀个标签进⾏循环，使⽤wx:for。
index.js数据：
Page({
data : {
arr: ["⽩板","⼳鸡","⼆万","三饼","四条"]
}
});
index.wxml：
<view class="container">
<view wx:for="{{arr}}" wx:key="{{index}}">{{index}} - {{item}}</view>
</view>
wx:for的值必须是数组，不能是对象，此时会⾃动遍历这个数组。
wx:for必须添加wx:key，表⽰循环这⼀项的标识，这个标识有什么⽤？连上服务器就有⽤了。增加效率 {{index}}、{{item}}是循环结构天⽣就有的，表⽰下标和项。
3.2.1 九九乘法表
因为空间太⼩，做五五乘法表：
<view class="row" wx:for="{{[1,2,3,4,5]}}" wx:key="{{index}}" wx:for-item="a">
<view class="col" wx:for="{{[1,2,3,4,5]}}" wx:key="{{index}}" wx:for-item="b">
{{a}} * {{b}} = {{a * b}}
</view>
</view>
index.wxss
.row{ width:750rpx;display: flex;}
.col{ flex:1; text-align: center; font-size: 12px;border:1px solid #3bb; }
