アプレットのデータ バインディングとイベント バインディング

アプレットのデータ バインディング

        1. レンダリングするデータをindex.jsのdataに配置します

Page({
  data: {
    info:'HELLO WORLD',
    imgSrc:'/images/1.jpg',
    randomNum:Math.random()*10,
    randomNum1:Math.random().toFixed(2)
  },
})

        2. WXML の {{}} を通じて データを取得します

 <view>{
    
    {info}}</view>
 <image src="{
    
    {imgSrc}}" mode="widthFix"></image>
 <view>{
    
    {randomNum >= 5 ? '大于等于5' : '小于5'}}</view>
 <view>{
    
    {randomNum1 * 100}}</view>

 

アプレットのイベント バインディング

        イベントとは: レンダリング層からロジック層への通信方法。レンダリング層でのユーザーの動作をロジック層に転送します。

       よくある出来事     

• タップ（タッチして離れる）
• input（テキストボックス入力） 
• 変化（状態変化）

        バインドによるイベントのバインド

bindtap/bind:tap

     イベントオブジェクトのプロパティのリスト

        イベント コールバックがトリガーされると、イベント オブジェクト イベントが受信されます。そのプロパティは次のとおりです。

タイプ	イベントタイプ
タイムスタンプ	イベントが発生するまでにページが開くまでにかかったミリ秒数
目標	イベントをトリガーしたコンポーネント（イベントをトリガーしたソースコンポーネント）のいくつかの属性値のコレクション
現在のターゲット	現在のコンポーネント (イベントをトリガーしているコンポーネント) のいくつかの属性値のコレクション
詳細	追加情報
触れる	タッチイベント、現在画面上にあるタッチポイント情報の配列
変更されたタッチ	タッチイベント、現在変化しているタッチポイント情報の配列

        1. イベントをコンポーネントにバインドする

<button type="primary" bindtap="btnHandler">按钮</button>

        2. コンポーネントによってトリガーされるイベントをクリックします

Page({ 
  btnHandler(e){
     console.log(e)
  }
})

        3. バインディング効果を表示する

 

 イベントバインドされたデータ (vue の v-model イベント) をレンダリングして同期します。

        1. 共有データを作成する

Page({ 
  data:{ 
    msg:"你好"
  }, 

}) 

        2. 入力コンポーネントをイベント syn にバインドし、データをレンダリングします。

         { {}} データを取得する

<input value="{
    
    {msg}}" bindinput="syn"/>

        3. js で syn イベントを記述してデータを同期する 

         this.setData はデータを再割り当てします

Page({ 
  data:{ 
    msg:"你好"
  }, 
  syn(e){
   this.setData({
     msg: e.detail.value
   })
  }
})