---
# 5.0-Vue基本語法
---
# 5.0-Vue基本語法
[Chrome debug插件: 建議此beta版，可即時更新](https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg)
# 起手式
## 引入
``` 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 ="這樣改也行"
})
Sign in with Wallet
Connect another wallet