登录页面的两种表单数据绑定方式

<!--index.wxml-->
<!-- <view class="container">
  <view class="inputs">
    <input class="username" placeholder="请输入用户名" value="{{ username }}" bindinput="inputChangeHandle" data-prop="username" />
    <input class="password" type="password" placeholder="请输入密码" value="{{ password }}" bindinput="inputChangeHandle" data-prop="password" />
  </view>
  <view class="buttons">
    <button type="primary" bindtap="loginHandle">登录</button>
    <button type="default">注册</button>
  </view>
</view> -->

<form action="#" bindsubmit="loginHandle">
  <view class="inputs">
    <input class="username" name="username" placeholder="请输入用户名" value="{{ username }}" />
    <input class="password" name="password" type="password" placeholder="请输入密码" value="{{ password }}" />
  </view>
  <view class="buttons">
    <button type="primary" form-type="submit">登录</button>
    <button type="default">注册</button>
  </view>
</form>

1. 单向数据流（推荐使用，类似vuex）
2. form表单对象

//index.js
//获取应用实例
const app = getApp()

// 1. 设计数据的结构（data属性）
// 2. 将数据绑定到特定的元素上
// 3. 登录按钮的点击事件（具体的登录逻辑）

// Page({
//   data: {
//     username: 'admin',
//     password: '123456'
//   },
//   usernameChangeHandle: function(e) {
//     // this.data.username = e.detail.value 不要用这种方式，因为界面层无法得知
//     this.setData({
//       username: e.detail.value
//     })
//   },
//   passwordChangeHandle: function(e) {
//     this.setData({
//       password: e.detail.value
//     })
//   },
//   //用于处理登录按钮点击的事件
//   loginHandle: function(e) {
//     // TODO: 完成逻辑
//     // 1. 先需要知道用户输入了什么
//     console.log(this.data)
//     // 2. 根据用户输入的值判断
//     // 3. 根据判断的结果做出响应
//   }
// })


// version 1 抽象共同的事件处理函数

// Page({
//   data: {
//     username: 'admin',
//     password: '123456'
//   },
//   inputChangeHandle: function(e) {
//     // var prop = 'username' ??? 可变的
//     // 访问对象的属性
//     // 1. 对象里面的属性调用 : 对象.属性名 ，这个小点 . 就理解为“ 的 ”  
//     // 2. 对象里面属性的另一种调用方式 : 对象[‘属性名’]，注意方括号里面的属性必须加引号
//     var prop = e.target.dataset['prop']
//     var chenged = {}
//     changed[prop] = e.detail.value
//     this.setData(changed)
//   },
//   //用于处理登录按钮点击的事件
//   loginHandle: function(e) {
//     // TODO: 完成逻辑
//     // 1. 先需要知道用户输入了什么
//     console.log(this.data)
//     // 2. 根据用户输入的值判断
//     // 3. 根据判断的结果做出响应
//   }
// })

// version 2 form 提交

Page({
  data: {
    username: 'admin',
    password: '123456'
  },
  //用于处理表单提交事件
  loginHandle: function(e) {
    console.log(e)
  }
})