XOOPS輕鬆架 - 線上書籍

:::

Vue.js 3.0 筆記
=============

- [v-text](https://vue3js.cn/docs/zh/api/directives.html#v-text)：插入文字內容（HTML會被轉譯） 
    ```markup
    <span v-text="msg"></span>
    
    <span>{{msg}}</span>
    
    ```
- [v-html](https://vue3js.cn/docs/zh/api/directives.html#v-html)：插入 HTML 內容- 不會作為 Vue 模板進行編譯 
    ```markup
    <div v-html="html">此處會被放入HTML內容</div>
    ```
- [v-show](https://vue3js.cn/docs/zh/api/directives.html#v-show)： 根據表達式的真假值，切換元素的 `display` CSS property。
- [v-if](https://vue3js.cn/docs/zh/api/directives.html#v-if)： 根據表達式的真假值來有條件地渲染元素。在切換時元素及它的數據綁定 / 組件被銷毀並重建。
- [v-else](https://vue3js.cn/docs/zh/api/directives.html#v-else)、[v-else-if](https://vue3js.cn/docs/zh/api/directives.html#v-else-if)： 前一兄弟元素必須有 `v-if` 或 `v-else-if`。 
    ```markup
    <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](https://vue3js.cn/docs/zh/api/directives.html#v-for)：迴圈 
    ```markup
    <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](https://vue3js.cn/docs/zh/api/directives.html#v-on)： 綁定事件，**縮寫**：`@` 
    ```markup
    
    <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()`。<span style="background-color:#FFFF00;">讓自身預設功能喪失</span>
    - `v-on.stop` - 調用 `event.stopPropagation()`。<span style="background-color:#FFFF00;">避免泡泡事件</span>
- [v-bind](https://vue3js.cn/docs/zh/api/directives.html#v-bind)： 動態地綁定一個或多個 attribute，或一個組件 prop 到表達式。 **縮寫**：`:` 
    ```markup
    
    <img v-bind:src="imageSrc" />
    
    
    <button v-bind:[key]="value"></button>
    
    
    <img :src="imageSrc" />
    
    
    <button :[key]="value"></button>
    
    
    <img :src="'/path/to/images/' + fileName" />
    
    
    <div :class="{ red: isRed }"></div>
    <div :class="[classA, classB]"></div>
    <div :class="[classA, { classB: isB, classC: isC }]">
      
      <div :style="{ fontSize: size + 'px' }"></div>
      <div :style="[styleObjectA, styleObjectB]"></div>
    
      
      <div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
    
      
      <my-component :prop="someThing"></my-component>
    
      
      <child-component v-bind="$props"></child-component>
    
      
      <svg><a :xlink:special="foo"></a></svg>
    </div>
    
    ```
- [v-model](https://vue3js.cn/docs/zh/api/directives.html#v-model)： 在表單控件或者組件上創建雙向綁定，所以只能用在表單元件上 <iframe allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts" src="https://codesandbox.io/embed/elated-chebyshev-72fpk?autoresize=1&fontsize=14&hidenavigation=1&theme=dark" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="v-model"></iframe>
    
     **修飾符**： 
    - `v-model`[`.lazy`](https://vue3js.cn/docs/zh/guide/forms.html#lazy) - 滑鼠焦點離開該元件才會顯示綁定內容
    - `v-model`[`.number`](https://vue3js.cn/docs/zh/guide/forms.html#number) - 輸入字符串轉為有效的數字
    - `v-model`[`.trim`](https://vue3js.cn/docs/zh/guide/forms.html#trim) - 輸入首尾空格過濾
- [v-slot](https://vue3js.cn/docs/zh/api/directives.html#v-slot)：
- [v-pre](https://vue3js.cn/docs/zh/api/directives.html#v-pre)：
- [v-cloak](https://vue3js.cn/docs/zh/api/directives.html#v-cloak)：
- [v-once](https://vue3js.cn/docs/zh/api/directives.html#v-once)：
- [v-is](https://vue3js.cn/docs/zh/api/directives.html#v-is)：

:::

書籍目錄

展開 | 闔起

快速登入

進階搜尋

https%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fmarkdown.php%3Ftbdsn%3D1733

計數器

今天：
昨天：
總計：

MarkDown

書籍目錄

快速登入

計數器