iT邦幫忙

2021 iThome 鐵人賽

DAY 5
0
Modern Web

別再說我不會框架,網頁 Vue 起來!系列 第 5

模板中的 Directive 指令 (下)

指令 Directive

表單綁定

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

類型 使用屬性 監聽事件
texttextarea value input
checkboxesradiobuttons 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 阻擋預設行為

下篇預告

  • 元件

每日一句:
周休三日,恰到好處 /images/emoticon/emoticon07.gif


上一篇
模板中的 Directive 指令 (上)
下一篇
元件基本使用
系列文
別再說我不會框架,網頁 Vue 起來!30

尚未有邦友留言

立即登入留言