Conditional Rendering 這是什麼？
符合條件就渲染嗎？怎麼感覺v-bind也可以達到條件渲染
應該還是有點區別吧～先來看看吧
v-if
指令 v-if 用於有條件地渲染區塊。只有當指令表達式返回真值，該區塊才會被渲染。
<template>
<h1 v-if="awesome">Vue is awesome!</h1>
</template>
v-else
你可以使用 v-else 指令來為 v-if 指定一個 "else 區塊"：
<template>Try it in the playground
<button @click="awesome = !awesome">Toggle</button>
<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>
</template>
v-else-if
v-else-if，顧名思義，用於作為 v-if 的「else if 區塊」。它可以多次鏈接使用：
<template>
<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>
</template>
與 v-else 類似，v-else-if 元素必須緊跟在 v-if 或 v-else-if 元素之後。
v-if 用於 <template>
因為 v-if 是一個指令，所以它必須附加到單個元素上。但是，如果我們想切換多個元素呢？在這種情況下，我們可以在 <template> 元素上使用 v-if，它充當一個隱形的包裝器。最終渲染的結果將不包括 <template> 元素。
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
v-show
另一種條件顯示元素的選擇是 v-show 指令。用法基本相同：
<h1 v-show="ok">Hello!</h1>
不同的是，使用 v-show 的元素將始終被渲染並保持在 DOM 中；v-show 只會切換元素的 display CSS 屬性。
v-show 不支持 <template> 元素，也不能與 v-else 一起使用。
v-if vs. v-show
v-if是“真實”的條件渲染，因為它確保在切換時，條件塊內的事件監聽器和子組件會被正確地銷毀和重新創建。v-if也是懶的：如果初始渲染時條件為假，則不會執行任何操作，直到條件第一次變為真時，條件區塊才會被渲染。v-show相對簡單 — 元素無論初始條件如何，總是會被渲染，只是基於 CSS 的切換。
v-if 與 v-for
注意：不建議在同一元素上使用 v-if 和 v-for，因為它們之間存在隱式的優先順序。請參閱風格指南以獲取詳細信息。
當 v-if 和 v-for 同時用於同一元素時，v-if 會首先被評估。請參見列表渲染指南以獲取詳細信息。
Q: 等等!!! 什麼是v-for？
內容跳來跳去介紹各種元素，沒有人能有空讀完全部官方文件～
只好先查一下了～
v-for 是 Vue.js 中用來進行列表渲染的指令。它可以讓你根據一個陣列或物件中的數據動態生成一組元素。
v-for 的基本語法是：
<div v-for="item in items" :key="item.id">
{{ item.name }}
</div>
這裡 items 是一個陣列，item 是陣列中的每一個元素。v-for 會為 items 中每個元素生成一個 <div> 元素，並將 item.name 的值顯示在每個 <div> 元素中。
1. 循環陣列
<ul>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
data() {
return {
items: [
{ id: 1, name: 'Apple' },
{ id: 2, name: 'Banana' },
{ id: 3, name: 'Cherry' }
]
}
}
2. 循環物件
<ul>
<li v-for="(value, key) in object" :key="key">{{ key }}: {{ value }}</li>
</ul>
data() {
return {
object: {
name: 'Vue',
type: 'Framework',
version: '3.x'
}
}
}
3. 循環數字範圍
<ul>
<li v-for="n in 10" :key="n">{{ n }}</li>
</ul>
這會渲染從 1 到 10 的數字列表。
使用 :key 屬性可以幫助 Vue 在更新虛擬 DOM 時更高效地跟蹤每一個項目。key 應該是唯一的，以便 Vue 能夠正確識別每個元素的變化。
Q: 有沒有辦法在vocus上展現vue組件?
無法，只好點擊連結去playground才能測試。
原本是想寫文章在Github Pages上架的網站，那邊應該可以放上組件～
但還是vocus的SEO做得比較好啊～先養成技術文章撰寫好了www~
Q: 為什麼文件會寫template tag？有時候卻沒有？
在 Vue 的文件中，有時候會看到 template 標籤，有時候則沒有，這取決於示例代碼的上下文和具體展示的內容。以下是幾種常見情況的解釋：
1. 完整的 Vue 組件示例
當展示一個完整的 Vue 組件時，通常會包括 template 標籤，script 標籤，甚至 style 標籤，這樣可以展示組件的結構和各部分的相互關係
<template>
<div>
<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>
</div>
</template>
<script>
export default {
data() {
return {
awesome: true
}
}
}
</script>
<style>
/* 組件的樣式 */
</style>
2. 局部代碼片段
當文件中僅僅展示某個特定功能或特性的代碼片段時，通常只包含必要的代碼，省略了 template 標籤，以便讀者能夠專注於當前展示的特性。
例如，只展示 v-if 指令的用法：
<h1 v-if="awesome">Vue is awesome!</h1>
或者展示計算屬性的定義：
const computedValue = computed(() => {
return someReactiveValue * 2;
});
3. 專注於某個部分的示例
在一些情況下，文件只需要展示 template 部分，或者只需要展示 script 部分，這樣可以更清晰地表達當前的重點內容。
例如，展示如何使用 v-if 和 v-else：
<template>
<button @click="awesome = !awesome">Toggle</button>
<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>
</template>
或者展示如何定義一個響應式數據：
<script>
export default {
data() {
return {
awesome: true
}
}
}
</script>
Q: 差異 v-if, v-bind:style, v-bind:class
使用 v-if
v-if 會根據條件動態地創建或銷毀 DOM 元素：
<template>
<div v-if="isVisible">這個元素根據 isVisible 來顯示或隱藏</div>
</template>
<script setup>
import { ref } from 'vue'
const isVisible = ref(true)
</script>
使用 v-bind:style
可以通過 v-bind:style 動態綁定 display 屬性來實現顯示或隱藏效果：
<template>
<div :style="{ display: isVisible ? 'block' : 'none' }">這個元素根據 isVisible 來顯示或隱藏</div>
</template>
<script setup>
import { ref } from 'vue'
const isVisible = ref(true)
</script>
使用 v-bind:class
可以通過 v-bind:class 動態添加或移除 CSS 類來實現顯示或隱藏效果：
<template>
<div :class="{ hidden: !isVisible }">這個元素根據 isVisible 來顯示或隱藏</div>
</template>
<style>
.hidden {
display: none;
}
</style>
<script setup>
import { ref } from 'vue'
const isVisible = ref(true)
</script>
比較
- v-if：
- 優點：當條件為假時，元素及其子元素不會被創建，節省了 DOM 的開銷。
- 缺點：每次條件變化時，元素會被重新創建或銷毀，性能開銷較大。
- v-bind：style
- 優點：僅通過更新
display樣式屬性來顯示或隱藏元素，不會銷毀元素，性能較好。 - 缺點：元素仍然存在於 DOM 中，只是不可見。
- 優點：僅通過更新
- v-bind：class
- 優點：通過添加或移除 CSS 類來顯示或隱藏元素，靈活且性能較好。
- 缺點：需要額外定義 CSS 類來實現隱藏效果。
慢慢對於這個框架有了基礎的概念～
好像真的很方便耶，但怎麼還有這麼多內容要看啊www
假如比較複雜的邏輯要怎麼實現？然後很期待可重復性能有多高？
