今天來看看vue有哪些基礎但重要的語法吧
這些程式基本上都是從Vue的官網上抓來的，大家也可以到官網查詢相關資料，練習或觀察範例

v-bind
v-bind : 將HTML和Vue資料綁定在一起
語法 : <標籤 v-bind:屬性名="變數"></標籤>
因為很常用到v-bind，所以簡寫成: ， 沒錯就是只有一個:
簡寫語法 : <標籤 :屬性名="變數"></標籤>
範例

<script setup>
    import { ref } from 'vue'

    const titleClass = ref('title')
</script>

<template>
   <h1 :class="titleClass">Make me red</h1>
</template>

<style>
  .title {
    color: red;
  }
</style>

const titleClass = ref('title') 設定一個響應式變數titleClass，值為’title’
在<style></style>中定義一個CSS class叫.title，設定顏色為紅色
:class=”titleClass”綁定到<h1>，變成class=”title”
<h1>套用class=’title’，字變成紅色

v-on
v-on : 執行DOM事件並執行指定的JavaScript函式指令
語法 : <標籤 v-on:事件名="方法"></標籤>
簡寫語法 : <標籤 @事件名="方法"></標籤>
v-on也很常被使用到，他的簡寫方式是一個@
範例

<script setup>
    import { ref } from 'vue'

    const count = ref(0)

    function increment() {
      count.value++
}
</script>

<template>
      <button @click="increment">Count is: {{ count }}</button>
</template>

function increment() { count.value++ } 定義一個increment函式，每次呼叫時count.value都會加一
<button @click="increment">Count is: {{ count }}</button>每次按鈕被點擊時，都會執行一次increment，改變count的值，Vue會自動渲染畫面

v-model
v-model : 主要用來實現雙向綁定，完成資料更改 -> 畫面更新；畫面輸入 -> 資料更新
假如想用v-bind和v-on來撰寫輸入框的話，就必須處理兩個方向的資料流向

• 輸入框到資料:用v-on監聽
• 資料到輸入框:用v-bind綁定修改的資料
  但如果使用v-model就能一個指令完成雙向綁定
  範例

<script setup>
    import { ref } from 'vue'
    const text = ref('')
</script>

<template>
      <input v-model="text" placeholder="Type here">
      <p>{{ text }}</p>
</template>

const text = ref('') 宣告一個響應式變數text，初始值為一個空字串
<input v-model="text" placeholder="Type here"> <input>是HTML的表單元素讓使用者可以輸入資料
用v-model指令將值雙向綁定到text，使用者輸入內容，text變數的值會自動更新，連帶輸入框顯示的值也會更新。
<p>{{ text }}</p>顯示text變數的內容

v-if
v-if : 條件渲染指令，用特定條件控制並渲染元素，當v-if條件為true時，則依照其指令渲染畫面，相反如果條件為false時，則會移除該元素和子元件。通常搭配v-else或是v-else-if來處理更複雜的條件判斷
範例

<script setup>
import { ref } from 'vue'

const awesome = ref(true)

function toggle() {
  awesome.value = !awesome.value
}
</script>

<template>
  <button @click="toggle">Toggle</button>
  <h1 v-if="awesome">Vue is awesome!</h1>
  <h1 v-else>Oh no 😢</h1>
</template>

function toggle() { awesome.value = !awesome.value}控制變數awesome是否為true
<h1 v-if="awesome">Vue is awesome!</h1> 當awesome為true則畫面顯示Vue is awesome!
<h1 v-else>Oh no 😢</h1>當awesome為false則畫面顯示Oh no 😢

v-show
v-show:控制元素的顯示和隱藏，跟v-if的執行方式不同，v-show不會刪除DOM，而是透過CSS的display:none來隱藏元素，意思就是當v-show="true"時，就會顯示元素，當v-show="false"時，則會將該元素隱藏
範例

<script setup>
import { ref } from 'vue'

const isVisible = ref(true)
</script>

<template>
  <button @click="isVisible = !isVisible">
    切換顯示 / 隱藏
  </button>

  <p v-show="isVisible">哈囉！我還在 DOM 裡，只是有時候隱藏</p>
</template>

<button @click="isVisible = !isVisible">設定一個控制isVisible值的按鈕，單按鈕被點擊時，反轉isVisible的值(true <-> false)
<p v-show="isVisible">哈囉！我還在 DOM 裡，只是有時候隱藏</p>當v-show值為true時，文字會顯示，反之當v-show值為false時，會被加上CSS的display:none而隱藏起來

參考網頁:Vue官網

好的今天就分享一點點基礎語法，多加練習才能夠熟悉這些語法，各位明天見~