1. v-for
作用：用于遍歷對象或數組
注意：需要提供key屬性，可以提高性能和避免渲染錯誤，值通常為index或item.id
<li v-for="(item, index) in items" :key="index">{{ item }}
</li>
2. v-if,v-else-if,v-else
作用：用于條件判斷，滿足條件的標簽內容才會被渲染
<p v-if="isShow">顯示</p>
<p v-else-if="other">其他</p>
<p v-else>隱藏</p>
3. v-show
作用：用于條件渲染，和v-if有著類似作用。
<p v-show="isVisible">我可見嗎？</p>
4. v-bind
作用：用于綁定屬性，可以綁定html屬性比如src，class，也可以綁定自定義屬性，比如dataSource"
<img v-bind:src="imgUrl">
<!-- 簡寫 -->
<img :src="imgUrl">
<!-- 與對象一起使用可以綁定多個屬性 -->
<div v-bind="{ src: mySrc, class: myClass }"></div>
<!-- 綁定自定義屬性 -->
<a-table :dataSource="dataSource" :columns="columns" :pagination="pagination" :loading="loading">
</a-table>
5. v-on
作用：用于事件監聽，比如監聽鼠標點擊事件onClick，表單值修改事件onChange等等也可以用修飾符.prevent阻止表單提交，頁面刷新,.stop阻止事件冒泡等
<button v-on:click="handleClick">點擊</button>
<!-- 簡寫 -->
<button @click="handleClick">點擊</button>
<!-- 使用修飾符 -->
<button @click.stop="handleClick">點我</button>
6. v-model
作用：數據雙向綁定，其實是v-bind+v-on指令的組合
應用場景：例如需要將表單數據同步到頁面，或者是父子組件的數據同步
<input v-model="inputValue">
{{ inputValue }}
7. v-text和v-html
<p v-text="message"></p>
<!-- 等同于 -->
<p>{{ message }}</p>
<p v-html="myHtml"></p>
8. v-show與v-if的區別
- 原理：
v-if通過控制dom元素是否存在，v-show控制display屬性 - 性能開銷：
v-if初次加載快，頻繁切換慢，v-show初次加載慢，頻繁切換快 - 應用場景：
v-if適用于較少切換的場景，v-show適用于頻繁切換
9. v-text與v-html的區別
- 功能：
v-text用于輸出純文本，v-hmtl可以渲染文本為dom - 安全性：
v-text安全，v-html有XXS風險
)
)