---
# System prepended metadata

title: 5.0-Vue基本語法

---

---
# 5.0-Vue基本語法
---
# 5.0-Vue基本語法
[Chrome debug插件: 建議此beta版，可即時更新](https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg)
![](https://i.imgur.com/dcdrK6M.png)

# 起手式

## 引入
 ``` html=
 <body id="app">
<!--   -->下方就能顯示內容了
 {{o}}
 </body>
 
 <script src="https://unpkg.com/vue@3"></script>
  <script >
    Vue.createApp({
      setup(){
<!--        就能開始用vue了-->
      const {ref} = Vue
      const o = ref('55')
<!--        記得return-->
      return {o}
      }
    }).mount('#app')
  </script>
```


---

# Vue 操作
分成兩區域
1.html 
2.script 

## html的用語/邏輯/事件 

### 前提: vue的變數/function 有傳進來

1.   {{變數名}}
2.   v-html
3.   v-if v-else-if v-else |  v-show (display:none ，但還在)
4.   v-for="i in arr" (裡面元素取得i可用) :key="i.k"(過濾篩選要加，不然預設索引值會出錯)
5.   v-bind:src="網址變數"  (v-bind可省)
---
7.   v-model="變數" (html才可改變數)(如果是input,可以用 :value="" 直接改變數)
8.   v-on:click="js內容" / @click="js內容" | @keydown.esc="js內容" | func('hi', $event)  (把event資訊帶進去使用，像是點擊位置) 

---
### script 變數用法

import { ref, reactive, watch, computed} from 'vue'
(上是vite用)
(下是vue.js)
const { ref, reactive,  watch, computed} = Vue

### ref 
非陣列/物件用
由於多包ref(), js中取值時寫: 變數.value

### reactive
陣列/物件用,不需要.value

### 路徑引用(讓vite有路徑讀內部檔案用)(平常是nodejs 讀檔)
new URL('./assets/alarm.mp3', import.meta.url).href

---
### Q1: 為何要包ref /reactive?

包了變數才能即時更新html，以前不能對吧?
---

到此可以vite基本的網頁了!

---

### Q2: 變數更新，html不是自動會偵測且更新? 為何要watch/computed

自動更新是"html跟vue變數"之間，但變數需經過js的function處理就不行

像作業:
一張卡片我按讚，裡面按讚的變數(good)變成true,直接讀good的按鈕會即時偵測改變而顯示/隱藏

但總按讚數變數(num)，是要1."偵測陣列的變化" 2.執行function(才更新num)
而js不會自動偵測變化(當然你可以設定setInterval隨時瘋狂更新/當按鈕按下後，會執行function)

所以vue方便的就是，當值變化後，自動跑某個程式(你自己知道該幹嘛，就放進去)

下方介紹

---
### 內部任何資料變化時，更新這變數: computed(function) (直接忽視computed())


他其實比watch 多回傳值的功能(所以裡面要加return )
先講是因為比較直觀
 const fullName = computed(() => {
      return lastName.value + firstName.value
    })
    
當任何 fullName/lastName.value / firstName.value 
變動，他都自動裡面再跑一次，因此會更新fullName
更新fullName => html自動會更新

當然你也可以單純讓他跑程式而已(只是老師說別說你是他教的)
EX:
 const noUsed = computed(() => {
 console.log('noUsed 這變數沒用 只是要執行我而已')
      return 0
    })
-

拆開set get 時，set是回傳變數被更新=>引入更新值回傳function(=做某事)、get是function內變數改變時自動回傳值

getter 取資料用的:預先處理好資料傳出來
computed 當資料用: 是根據 ref reactive 動態更新資料
   
    https://hsuchihting.github.io/vue-js/20200917/2086781732/

---

### 這變化時，執行: watch(會變化的變數,function)  (就是變數變化後，執行function) 

watch(firstName, (newValue, oldValue) => {
      console.log(newValue, oldValue)
    })
=當firstName變化時，後面那段執行(會附送2個值，新,舊。 不用沒差)

---

### 這偵測物件任何變化，最好理解。其他用法複雜(跳過)，但好處是可以讀取物件舊值
watch(obj, (newValue) => {
      console.log('obj 變更', obj.good)
      firstName.value ="這樣改也行"
    })


