「小程序JAVA实战」小程序视图之细说数据绑定（13）

转自：https://idig8.com/2018/08/09/xiaochengxu-chuji-13/

在前面的小节里面其实对数据绑定都有所了解了，在这次给老铁在好好说下数据绑定，看下它的方方面面是如何实现的。源码：https://github.com/limingios/wxProgram.git 中的No.8

 

小程序的数据绑定

1. JQuery dom 操作 $选择器
2. 微信小程序是通过数据绑定 vue/react
3. .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}} 这样的标签，载入的时候回显示出来，然后立即被替换掉，这个对于页面的呈现是不够友好的，这是我在使用的过程中遇到的一个痛点。

4. 官方的阐述
   

   https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/data.html

5. 演示绑定
   >* 数据绑定使用 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"
  }

})