2-6 事件修飾符

• v-text：插入文字內容（HTML會被轉譯）

  <span v-text="msg"></span>
  <!-- 等價於 -->
  <span>{{msg}}</span>
  

   

• v-html：插入 HTML 內容- 不會作為 Vue 模板進行編譯

  <div v-html="html">此處會被放入HTML內容</div>

   

• v-show： 根據表達式的真假值，切換元素的 display CSS property。
• v-if： 根據表達式的真假值來有條件地渲染元素。在切換時元素及它的數據綁定 / 組件被銷毀並重建。
• v-else、v-else-if： 前一兄弟元素必須有 v-if 或 v-else-if。

  <div v-if="type === 'A'">
    A
  </div>
  <div v-else-if="type === 'B'">
    B
  </div>
  <div v-else-if="type === 'C'">
    C
  </div>
  <div v-else>
    Not A/B/C
  </div>
  

   

• v-for：迴圈

  <div v-for="(item, index) in items" :key="item.id"></div>
  <div v-for="(value, key) in object" :key="value.id"></div>
  <div v-for="(value, name, index) in object" :key="value.id"></div>
  

   

• v-on： 綁定事件，縮寫：@ 

  <!-- 方法處理器 -->
  <button v-on:click="doThis"></button>
  
  <!-- 動態事件 -->
  <button v-on:[event]="doThis"></button>
  
  <!-- 內聯語句 -->
  <button v-on:click="doThat('hello', $event)"></button>
  
  <!-- 縮寫 -->
  <button @click="doThis"></button>
  
  <!-- 動態事件縮寫 -->
  <button @[event]="doThis"></button>
  
  <!-- 停止冒泡 -->
  <button @click.stop="doThis"></button>
  
  <!-- 阻止默認行為 -->
  <button @click.prevent="doThis"></button>
  
  <!-- 阻止默認行為，沒有表達式 -->
  <form @submit.prevent></form>
  
  <!-- 串聯修飾符 -->
  <button @click.stop.prevent="doThis"></button>
  
  <!-- 鍵修飾符，鍵別名 -->
  <input @keyup.enter="onEnter" />
  
  <!-- 點擊回調只會觸發一次 -->
  <button v-on:click.once="doThis"></button>
  
  <!-- 對象語法 -->
  <button v-on="{ mousedown: doThis, mouseup: doThat }"></button>
  

  修飾符：
  • v-on.passive - { passive: true } 模式添加偵聽器
  • v-on.middle - 只當點擊鼠標中鍵時觸發。
  • v-on.right - 只當點擊鼠標右鍵時觸發。
  • v-on.left - 只當點擊鼠標左鍵時觸發。
  • v-on.once - 只觸發一次回調。
  • v-on.{keyAlias} - 僅當事件是從特定鍵觸發時才觸發回調。
  • v-on.self - 只當事件是從偵聽器綁定的元素本身觸發時才觸發回調。
  • v-on.capture - 添加事件偵聽器時使用 capture 模式。
  • v-on.prevent - 調用 event.preventDefault()。讓自身預設功能喪失
  • v-on.stop - 調用 event.stopPropagation()。避免泡泡事件
• v-bind： 動態地綁定一個或多個 attribute，或一個組件 prop 到表達式。 縮寫：:

  <!-- 綁定 attribute -->
  <img v-bind:src="imageSrc" />
  
  <!-- 動態 attribute 名 -->
  <button v-bind:[key]="value"></button>
  
  <!-- 縮寫 -->
  <img :src="imageSrc" />
  
  <!-- 動態 attribute 名縮寫 -->
  <button :[key]="value"></button>
  
  <!-- 內聯字符串拼接 -->
  <img :src="'/path/to/images/' + fileName" />
  
  <!-- class 綁定 -->
  <div :class="{ red: isRed }"></div>
  <div :class="[classA, classB]"></div>
  <div :class="[classA, { classB: isB, classC: isC }]">
    <!-- style 綁定 -->
    <div :style="{ fontSize: size + 'px' }"></div>
    <div :style="[styleObjectA, styleObjectB]"></div>
  
    <!-- 綁定一個全是 attribute 的對象 -->
    <div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
  
    <!-- prop 綁定。"prop" 必須在 my-component 聲明 -->
    <my-component :prop="someThing"></my-component>
  
    <!-- 通過 $props 將父組件的 props 一起傳給子組件 -->
    <child-component v-bind="$props"></child-component>
  
    <!-- XLink -->
    <svg><a :xlink:special="foo"></a></svg>
  </div>
  

• v-model： 在表單控件或者組件上創建雙向綁定，所以只能用在表單元件上
  修飾符：
  • v-model.lazy - 滑鼠焦點離開該元件才會顯示綁定內容
  • v-model.number - 輸入字符串轉為有效的數字
  • v-model.trim - 輸入首尾空格過濾
• v-slot：
• v-pre：
• v-cloak：
• v-once：
• v-is：