###### tags: `程式語言`
# Vue筆記

* **some under createApp:**
1. `data()`
2. `watch:`
監看data變數，當該data變數變化時，watch會被觸發

ex.
        data() {
          counter: 0,
        },
        watch: {
          counter() {
            if (this.counter > 50) {
              this.counter = 0; 
            }
          }
        }

3. `computed:`
4. `methods:`
*(use this.XX to point at data)*

5. `component`

6. `props: []` >> parent component pass data to children component
*(in Vue files naming with camelCase like **userName**, while in HTML files using kebab-base like **user-name**, Vue would auto recognioze and translate them.)*
*(or to say, when we wanna use data outside, we could use props to get them)*

7. `emits: []`
*(children component pass data to parent component)*

8. `provide()`
*(use this.XX to point what data or **method** to provide to other component)*

9. `inject:`
*(P.S: only parent component could provide data while its children component could inject them)*

10. `components: `
*(To set component locally. So that you don't have to register component in main.js as a global component, which would be initialized every time when browser load the page)*

11. `mounted()`
*(To set any method that would be triggered when the component get mounted, or to say, the component is becoming visible)*

* **some directive:**
1. v-on >> @
2. v-bind >> :
3. v-model (two-way binding)
4. v-for="" + :key=""
eg: v-for="goal in goals" (取出goals陣列內的元素並取名為goal)
或是v-for="(goal, index) in goals" (index即為該陣列的index，可作為參數傳入methods)
:key="goal" (加上key可以讓vue辨識出不同的dom，否則vue會reuse dom，造成資料錯亂)
5. v-if, v-else-if, v-else
v-if若沒滿足條件不會渲染在DOM，直接消失
6. v-show
v-show則會，只是會加上css語法display: none將其隱藏，如果需頻繁切換於顯示/隱藏，
相較於v-if，v-show效能較佳
7. $emit()
8. v-slot >> #
9. this.$refs.XX.value

* **some cool tag or feature**
1. `<slot></slot>` used for `<template #XX></template>`
*(to wrap the element in template with css style)*

2. `<component :is="XXdata"></component>`
*(to show different component due to different v-bind data)*
3. `<keep-alive></keep-alive>`
*(wrap the `<component>` to keep data in component alive when switching to other component)* ->感覺會用到
4. `<teleport to="some css selector"></teleport>`
5. `<input ref="XXX">` 在input tag(or any tag contains input value)裡用ref取得輸入值，之後在methods裡可以用 `const inputXXX = this.$refs.XXX.value`取得輸入值
6. 續上，用ref取得的value都是以String的type呈現，因此若是要對取得的value再進一步運算就會有點吃力，針對此狀況可使用v-model去取得number型態的value(當type="number時")，因為v-model不會把Value轉為String。
7. @blur="XXmethod"，可以針對lost focus行為trigger指定method
8. 要在custom components用v-model要多設置一些東西，可參考影片146
9. arrow function架構: () => {}
10. then, response, catch, throw (some error handling words)
11. `<router-view></router-view>`、`<router-link></router-link>`
* **筆記**
1. 要用button提交form時，在form的tag裡下@submit，並指定trigger時的fuction，
這樣頁面在提交時就不會reload。原先機制是頁面在"submit"這個event時會自動發送request，所以頁面
就會重載，已輸入的資料就會消失
ex. `<form @submit.prevent="submitData">` 搭配 `<button type="submit">`(optional)

2. Vue架構：
<template></template>
<script></script>
<Sty1e></sty1e>
3. 用`components:`將component設為local，這樣就不用在App.vue去註冊global component，會有效能問題
4. 在style tag加上`scoped`，這樣style就不會套用至所有file
5. 在css設置a.router-link-active的style可以將當前的route component做style(因為只有當前的component會有這個屬性，詳情請見F12 or section.169)
6. methods和computed的差別在於，

* **重要功能**
1. sec.170 >> 送出表單並頁面跳轉 >> 在button上設置trigger method，並在method最後加上`this.$router.push('*/yourpath*)`

2. route在main.js可以設定alias, children, redirect, props, name(navigate by mane會比navigate by path還易維護), component...