指令 Directive

表單綁定

使用 v-model 建立表單的雙向資料綁定，ex: input、textarea、select元素。對於不同的 input 類型，v-model會有對應監聽的屬性和事件，例如....

類型 | 使用屬性 | 監聽事件
------------- | -------------
text 和 textarea | value | input
checkboxes 和 radiobuttons | checked | change
select | value | change

例如: text 或 textarea 會監聽元素 value 的 input 事件

ex:

<!-- 單一文字框 -->
<input v-model="message" placeholder="edit me" />
<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>

<!-- 複選框 (綁定給同一個陣列)-->
<div id="v-model-multiple-checkboxes">
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames" />
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames" />
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames" />
  <label for="mike">Mike</label>
  <br />
  <span>Checked names: {{ checkedNames }}</span>
</div>

<!-- 單選框 -->
<div id="v-model-radiobutton">
  <input type="radio" id="one" value="One" v-model="picked" />
  <label for="one">One</label>
  <br />
  <input type="radio" id="two" value="Two" v-model="picked" />
  <label for="two">Two</label>
  <br />
  <span>Picked: {{ picked }}</span>
</div>

<!-- 下拉選項 -->
<div id="v-model-select" class="demo">
  <select v-model="selected">
    <option disabled value="">Please select one</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>

v-model 修飾符 Modifiers

• .lazy
  • 將 input 事件改為 change 事件，避免更新次數過於頻繁
• .number
  • 將使用者輸入的值強制轉為 Number
• .trim
  • 過濾掉前後的空白字字元

事件綁定

使用 v-on directive　監聽 DOM 的事件，並執行相關的 function，例如: v-on:click="methodName" 也可縮寫為 @click="methodName"

也可以有多個事件處理
ex:

<!-- both one() and two() will execute on button click -->
<button @click="one($event), two($event)">
  Submit
</button>

// ...
methods: {
  one(event) {
    // first handler logic...
  },
  two(event) {
    // second handler logic...
  }
}

v-on 修飾符

和 v-model 一樣，事件的 v-on 也有修飾符可以使用。在處理事件時，很常使用 event.preventDefault() 或 event.stopPropagation() ，雖然可以把這些 DOM 事件相關的部分寫入 methods中，但盡可能 methods 單純的包含資料邏輯就好。

• .stop 阻擋事件冒泡
• .prevent 阻擋預設行為
• .capture 以捕獲形式觸發事件
• .self 只觸發元素自己的事件
• .once 指定事件只觸發一次
• .passive 執行預設行為

ex:

<form v-on:submit.prevent="onSubmit">...</form>

.prevent修飾符告訴v-on這個　directive 在觸發事件時，要去呼叫 event.preventDefault()

<!-- click 事件只會被觸發一次 --> 
<a @click.once="doThis"></a>

補充 passive

常用在手機裝置的效能優化，每次事件發生，瀏覽器會去查詢是否有 preventDefault 阻止此事件的預設行為；而使用 passive 是告訴瀏覽器，不用查了，我沒使用 preventDefault 阻擋預設行為！

下篇預告

• 元件

每日一句:
周休三日，恰到好處