04 元件資料、事件與屬性

一.資料來源的三種途徑

• 固定在WXML中
• 固定在JS中，與WXML進行綁定顯示
• 有伺服器傳回，加載到JS中，與WXML進行綁定顯示

二.資料綁定

1.wxml中使用data中的資料

• 在js中的data下定義變量内容，可以在頁面使用

  {{}}

  進行資料綁定
• 執行個體代碼
  • index.js

    Component({
      /**
       * 元件的屬性清單
       */
      properties: {
    
      },
    
      /**
       * 元件的初始資料
       */
      data: {
        /* 定義變量count,資料綁定 */
        count: 10,
        likeStatus: false,
        likePicUrl: 'images/like.png',
        disLikePicUrl: 'images/[email protected]'
      },
    
      /**
       * 元件的方法清單
       */
      methods: {}
    })
               

  • index.wxml使用資料綁定

    <view bind:tap="onLike" class="container">
      <image src="{{likeStatus?likePicUrl:disLikePicUrl}}"></image>
      <text>{{count}}</text>
    </view>
               

2.元件的properties屬性

• 元件的屬性定義在properties中，定義的每一個屬性都是對象，分别包含type(必填)、value(選填)和observer(選填)三個屬性值
• wxml綁定的方式與data相同，使用

  {{}}

  的方式進行綁定
• 執行個體代碼
  • index.js

    Component({
      /**
       * 元件的屬性清單
       */
      properties: {
        likeStatus: {
          // type是必填字段,表示屬性的類型
          type: Boolean,
          // value是選填字段,表示屬性的預設值
          value: true,
          // observer是選填字段
          observer: ()=> {}
        },
        count: {
          type: Number
          // Number類型value預設是0
        }
      },
    
      /**
       * 元件的初始資料
       */
      data: {
        /* 定義變量count,資料綁定 */
        likePicUrl: 'images/like.png',
        disLikePicUrl: 'images/[email protected]'
      },
    
      /**
       * 元件的方法清單
       */
      methods: {
        onLike: (event) => {
          console.log(event)
        }
      }
    })
               

  • index.wxml

    <view bind:tap="onLike" class="container">
      <image src="{{likeStatus?likePicUrl:disLikePicUrl}}"></image>
      <text>{{count}}</text>
    </view>
               

• 擷取properties的屬性值的方式是

  let variable = this.properties.properties屬性名

3.動态指派

• 使用

  this.setData({屬性名:屬性值})

  的方式動态指派，進而在頁面使用

  {{}}

  可以動态修改對應内容
• 執行個體代碼
  • index.js

    Component({
      /**
       * 元件的屬性清單
       */
      properties: {
        likeStatus: {
          // type是必填字段,表示屬性的類型
          type: Boolean,
          // value是選填字段,表示屬性的預設值
          value: false,
          // observer是選填字段
          observer: ()=> {}
        },
        count: {
          type: Number
          // Number類型value預設是0
        }
      },
    
      /**
       * 元件的初始資料
       */
      data: {
        /* 定義變量count,資料綁定 */
        likePicUrl: 'images/like.png',
        disLikePicUrl: 'images/[email protected]'
      },
    
      /**
       * 元件的方法清單
       */
      methods: {
        onLike: function(event) {
          let like = this.properties.likeStatus;
          let count = this.properties.count;
          
          // this.setData({})指明要更新的變量
          this.setData({
            count: like?count-1:count+1,
            likeStatus: !like
          });
        }
      }
    })
               

  • index.wxml

    <view bind:tap="onLike" class="container">
      <image src="{{likeStatus?likePicUrl:disLikePicUrl}}"></image>
      <text>{{count}}</text>
    </view>