[Vue] 잘 까먹는 사실들 (every함수, td, mt/pt, mounted)

상황

자주 잊어버리고 실수 할 수 있는 상황들을 모아봤다.

 

1. every 함수와 filter함수 사용법

 

2. td/tr에 css넣을 때 주의 할점

 

3. margin, padding 넣는 방법

 

4. mounted와 created 차이점 10초 요약

---

해결방법

1. every와 filter같은 함수의 parameter에는 함수를 넣어줘야한다. (변수나 결과값을 넣어주면 안됨)

 

2. tr 아래에 td가 있어서, tr에만 css를 적용시켜줬다. 그러나 td에도 css가 설정되어 있으면 일일히 다 설정을 바꿔줘야 함. (자식 css가 우선)

 

3. vuetify에서 padding과 margin 넣을때는 ,mt, pt를 사용하자.

 

4. mounted는 created 보다 전에 실행되는데, DOM이 아직 안만들어졌을 때라서 init을 할때 쓰인다. created는 잘 안쓰이는데 스크롤 위치 조정, 포커스 등의 엘리먼트에 동작을 가할때 주로 사용한다.

 

---

코드

1. Every는 배열의 값을 모두 인자 함수로 돌려준다. ex) Allchecked (O), Allchecked() (X)

items.every((item) =>
  typeof item === 'object' ? item.text && item.value : !_.isNil(item)
)

 

2. 따로 없음. tr에 값들 다 따로 넣어주자.

 

3. mt(MarginTop), pt(PaddingTop), mr(MarginRight) 이렇게 값을 주면된다. -를 쓰고 옆에 숫자 넣기

<v-text-field
  class="mt-0 pt-0"
  desne
/>

 

4. mounted 사용법

async mounted() {
    try {
      await this.init(query)
    } catch (e) {
      this.error = true
      console.error(e)
    }
},

---

참고

내 머릿속