Vue 建立應用程式、雙向綁定

學習 Vue 使用資料綁定

CDN 載入

<!-- 開發版本 --> 
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生產版本 -->
<script src=”https://cdn.jsdelivr.net/npm/vue"></script>

應用程式建立

<div id="app">
</div>

let app = new Vue({
  el: '#app',   // 綁定在 HTML 裡 id 是 app 的標籤
    data: {
      text: 'Vue 應用程式'
    }
})

• el 綁定建議使用 ID
  • 不限用 Id 也可以用 class ，但只會綁定第一個元素，同 class 名的第二個元素就不會有效果
• 不可使用巢狀
  • 在已綁定 Vue 的元素之下，不可再綁定第 2 個 Vue 應用程式，第 2 個 Vue 會等同無效

雙向綁定

• 使用 v-model 在 <input>、<textarea> 及 <select> 元素建立雙向綁定

• 負責監控使用者輸入資料及更新資料內容

• Vue 使用 getter 的方式監控資料內容，在寫入資料並同時在 資料變動 時改變其他地方的 setter

• 官方說明

• 不同的元素有不同的使用屬性、事件

  • text 和 textarea 元素使用 value 屬性和 input 事件

  • checkbox 和 radio 使用 checked 屬性和 change 事件

  • select 字串把 value 當作 prop 、 change 事件

• 表單綁定方法

  • 基本用法 v-model

  • 值綁定

  • 修飾符

基本用法範例

• 單行字串

<input v-model="message">
<p>Message is: {{ message }}</p>

• 多行字串

<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>

• Checkbox

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

• v-model 修飾符：lazyMsg、age、trimMsg

let app = new Vue({
  el: '#app',
  data: {
    lazyMsg: '',
    age: '',
    trimMsg: ''
  },
});

• .lazy

  • 在每次 input 事件後執行

  • 預設表單輸入與資料輸出會是即時的

  • 使用 lazy 時，則會延遲到 change 事件之後，也就是輸入完成離開 input 後才會輸出資料

  <input type="text" v-model.lazy="lazyMsg" />

• .number

  • 把輸入的 內容轉換成數字型態

  <input type="number" v-model.number="age" />

  • 會使用 type="number" 只是限制輸入數字，不會改變字串型態，還需要配合 parseFloat() 才會是數字型態

• .trim：為避免用戶誤輸入空白字元，因此，可以透過給v-model添加 trim 修飾符，自動過濾掉用戶所輸入的首尾空白字符。

<input type="text" v-model.trim="trimMsg" />