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…

tags: 程式語言

Vue筆記

Read more

Keycloak筆記

8/6-19 枋寮教召感想

Unit Test

JS

tags: `程式語言`