XOOPS輕鬆架

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

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

<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>

<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>

<!-- 方法處理器 -->
<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()。避免泡泡事件

<!-- 綁定 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.lazy - 滑鼠焦點離開該元件才會顯示綁定內容
• v-model.number - 輸入字符串轉為有效的數字
• v-model.trim - 輸入首尾空格過濾