微信小程序学习笔记——事件绑定

从视图到模型 

 把输入框的值 赋值到data当中

wxml

<!--pages/eventPage/eventPage.wxml-->
<!-- 
  1. 需要给input标签绑定 input事件
     绑定关键字 bindinput
  2. 如何获取 输入框的值
     通过事件源来获取
     e.detail.value
  3. 把输入框的值 赋值到data当中
      不能直接
       1 this.data.num = e.detail.value
       2 this.num = e.detail
     正确的写法
        this.setData({
            num:e.detail.value
        })
 -->
<input class="" type="text" bindinput="changeInput"></input>
<view>
  <button>+</button>
  <button>-</button>
</view>
  
<view>
{{num}}
</view>

 js

// pages/eventPage/eventPage.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    num:0,
  },
  changeInput(e){
    this.setData({
      num:e.detail.value
    })
  },
  
})

获取： this.data.num

设置：  this.setData({num:234 })

从模型到视图

将data中值得变化反映到页面上

wxml 

<!--pages/eventPage/eventPage.wxml-->
<!-- 
  1. 需要给input标签绑定 input事件
     绑定关键字 bindinput
  2. 如何获取 输入框的值
     通过事件源来获取
     e.detail.value
  3. 把输入框的值 赋值到data当中
      不能直接
       1 this.data.num = e.detail.value
       2 this.num = e.detail
     正确的写法
        this.setData({
            num:e.detail.value
        })
    4.绑定点击事件
       1 bindtap
       2 无法在小程序当中的事件中直接传参
       3 通过自定义属性的方式来传递参数
 -->
<input class="" type="text" bindinput="changeInput"></input>
<view>
  <button bindtap="changeTap" data-operation="{{1}}">+</button>
  <button bindtap="changeTap" data-operation="{{-1}}">-</button>
</view>
  
<view>
{{num}}
</view>

js

// pages/eventPage/eventPage.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    num:0,
  },
  //输入框input执行事件
  changeInput(e){
    this.setData({
      num:e.detail.value
    })
  },
  //button点击事件
  changeTap(e){
    //console.log(e)
    //获取自定义属性 operation
    const operation = e.currentTarget.dataset.operation
    this.setData({
      num:this.data.num + operation
    })
  }
  
})