【小程序】數據綁定

【原文：數據綁定】

微信小程序是經過狀態模式-單向數據流的方式來實現數據綁定的。

對象狀態化，只要對象狀態發送變化，就通知頁面更新視圖元素。 經過如下三個步驟實現：

• 識別哪一個UI元素被綁定了相應的對象。
• 監視對象狀態的變化。
• 將全部變化傳播到綁定的視圖上。

<view>{{ message }}</view> 

Page({
  data: { message: 'Hello MINA!' } }) 

數據流向是單向的，視圖變化不會影響對象狀態。

更多數據綁定方式

<!-- index.wxml --> <!--數據綁定--內容--> <view>{{message}}</view> <!--數據綁定--組件屬性--> <view id="item-{{id}}">組件屬性id-{{id}}</view> <!--數據綁定---控制屬性--> <view wx:if="{{condition}}">控制屬性{{condition}}</view> <!--數據綁定---三元運算--> <view hidden="{{flag ? true : false}}">Hidden--{{flag}}</view> <!-- wx:if 有更高的切換消耗而 hidden 有更高的初始渲染消耗。所以，若是須要頻繁切換的情景下，用 hidden 更好，若是在運行時條件不大可能改變則 wx:if 較好。 --> <!--數據綁定---算數運算--> <view>{{a + b}} + {{c}} + d</view> <!--數據綁定---邏輯判斷--> <view wx:if="{{length > 5}}">6</view> <!--數據綁定---字符串運算--> <view>{{"Hello " + name}}</view> <!--數據綁定---數組組合--> <!-- 默認數組的當前項的下標變量名默認爲 index，數組當前項的變量名默認爲 item --> <!-- 使用 wx:for-item 能夠指定數組當前元素的變量名，使用 wx:for-index 能夠指定數組當前下標的變量名： --> <view wx:for="{{[zero, 1, 2, 3, 4, 5, 6]}}">{{item}}</view> <!--數據綁定---對象--> <!--最終組合成的對象是{for: 1, bar: 2}--> <template is="objectCombine" data="{{for: x, bar: y}}"></template> <!--數據綁定---擴展運算符 ... 來將一個對象展開--> <!--最終組合成的對象是{a: 1, b: 2, c: 3, d: 4, e: 5}--> <template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template> <!--數據綁定---對象的 key 和 value 相同--> <!--最終組合成的對象是{foo: 'my-foo', bar:'my-bar'}--> <template is="objectCombine" data="{{foo, bar}}"></template> 

index.js
Page({
  data:{ //內容 message:'Hello MINA!', //組件屬性 id: 0, //控制屬性 condition: true, //三元運算 flag:false, //算數運算 a: 1, b: 2, c: 3, //邏輯判斷 length: 6, //字符串運算 name: 'MINA', //數組組合 zero: 0, //對象 x: 0, y: 1, //對象展開 obj1: { a: 1, b: 2 }, obj2: { c: 3, d: 4 }, e: 5, //對象key和value相同 foo: 'my-foo', bar: 'my-bar' }, })

 

----------------------------------------

小程序系列：

  前言

  項目結構

  生命週期

  請求與封裝

  數據綁定

  事件

  基礎使用： component使用 、 wxs使用 、 節點操做 、 頁面跳轉 、 緩存

  前端架構淺談

----------------------------------------