---
tags: Mike課程
---

# 綁定 From Bindings
* 我們先在HTML架構中綁定v-model相對應的資料。

 <div id="app">
    <div class="input-box">
      <p>E-MAIL</p>
      <input type="text" placeholder="輸入email" v-model="email" />
    </div>
    <div class="input-box">
      <p>PASSWORD</p>
      <input type="text" placeholder="輸入密碼" v-model="passWord" />
    </div>
    <div class="input-box">
      <input type="checkbox" id="checkbox" v-model="checkBox" />
      <label for="checkbox">我已閱讀使用者條款</label>
    </div>
    <a class="btn" @click="formSub">送出</a>
  </div>

* 運用ref綁定 from連動資料

 const App = {
      setup() {
        const email = ref('')
        const passWord = ref('')
        const checkBox = ref(false)
        const formSub = (() => {
          console.log(email, passWord, checkBox);

        })
        return {
          email,
          passWord,
          checkBox,
          formSub
        };
      },
    };