在前面的小节里面其实对数据绑定都有所了解了，在这次给老铁在好好说下数据绑定，看下它的方方面面是如何实现的。源码：https://github.com/limingios/wxProgram.git 中的No.8
小程序的数据绑定
JQuery dom 操作 $选择器
微信小程序是通过数据绑定 vue/react
.js 中通过data 对象与.wxml的元素绑定{{data}} ->Mustache 表达式语法
Mustache 是一款经典的前端模板引擎，在前后端分离的技术架构下面，前端模板引擎是一种可以被考虑的技术选型，随着重型框架（AngularJS、ReactJS、Vue）的流行，前端的模板技术已经成为了某种形式上的标配，Mustache 的价值在于其稳定和经典：
主页：https://github.com/janl/mustache.js/
文档：https://mustache.github.io/mustache.5.html
Mustache 在使用的时候，会在页面上出现 {{person}} 这样的标签，载入的时候回显示出来，然后立即被替换掉，这个对于页面的呈现是不够友好的，这是我在使用的过程中遇到的一个痛点。官方的阐述
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/data.html
演示绑定
>* 数据绑定使用 Mustache 语法（双大括号）将变量包起来
>* 关键字(需要在双引号之内)
true：boolean 类型的 true，代表真值。
false： boolean 类型的 false，代表假值。
>* 可以在 {{}} 内进行简单的运算，支持的有如下几种方式：
三元运算
算数运算
逻辑判断
字符串运算
dataBind.wxml
<!dataBind.wxml-->
<view class="container" id='item={{id}}'>
{{msg}}
<!-- 控制属性(需要在双引号之内) 关键字(需要在双引号之内)-->
<checkbox checked="{{false}}"> </checkbox>
<checkbox checked="{{true}}"> </checkbox>
<checkbox checked="{{flag}}"> </checkbox>
<checkbox checked="{{unflag}}"> </checkbox>
<!-- 三目运算符-->
{{a+b==5?"是5":"不是5"}}
<!--算数运算-->
<view> {{a + b}} + {{c}} </view>
<!---字符串运算-->
<view> {{msg + hello + "test"}} </view>
<!---数字和字符串拼接-->
<view> {{a + b + "test"}} </view>
</view>dataBind.js
//dataBind.js
//获取应用实例
const app = getApp()
Page({
data: {
msg: "这是一个msg",
id: 1001,
flag: true,
unflag: false,
a: 1,
b: 4,
c: 5,
hello: "hello"
}
})