createApp Option
- data(), computed()는 인자로 사용
- method()는 함수로 사용
- Vue에서 CSS를 지정하기 위해 Camel Case도 반영이 가능하다. ex) background-color ⇒ backgroundColor
- 여러개의 스타일
객체를 추가하려면배열로 묶어서추가해주기 CSS에서더 나중에 쓰여진 속성이 덮어쓰게 된다.
computed
캐싱되기 때문에 만들어진 결과를 저장해서 반복하는 계산이 많을 때 줄여주는 기능을 한다.- 현재 자신이
의존하는 데이터가 바뀔때만 동작한다. - get, set을 사용하고 싶으면 함수형에서 객체로 바꿔서 객체안에 get, set으로 활용할 수 있다. 많은경우는 아니지만 이런 패턴이 종종 나올 수 있음
watch
- 감시하고 싶은 데이터가 있다면 사용 감시하는 데이터가 변경 시 작동
- 원시데이터는 감시할 수 있지만
객체 데이터는 속성만 바꾸게 되면감시하지 못함그렇기에deep이라는 속성을 추가해서 깊게 감시가 가능하다. 객체로 바꾼뒤에는 handler() 함수와 deep이라는 속성을 사용 - 브라우저가 최초 실행 시 watch는 실행안됨 만약 감시하고 있는
데이터가 초기화부터 감시하고 싶다면immediate속성을 사용
조건부렌더링
v-if를 통해 true, false로 렌더링을 적용함 만약 else구문을 사용하고 싶으면 if와 else 사이에 어느것도 있으면 안됨! 그러면 코드가 동작하지 않을 수 있다.
v-show vs v-if
- v-show는 style display 속성을 사용해서 보이고 안보이는것을 다룸 / 초기렌더링 비용은 높지만 전환비용은 높다.
- v-show를 사용할 때 미리 선언된 데이터가 보일 수 있기 때문에 그것을 해결하려면 v-clock이라는 디렉티브를 사용하는것이 좋다. 왜 그런지는 공부 필요!
- v-if는 요소 자체를 없애거나 그대로 출력 개발자 도구에서 본다면 v-if로 아예 렌더링을 안한것을 확인을 할 수 있다. 초기 렌더링 비용은 낮지만 전환비용은 높다.
초기렌더링과전환비용생각하고 다루는것이 좋다.- v-for와 v-if를 동시에 사용한다면 template태그(요소로 만들어지지 않고 내부를 반환하는 껍데기)에 v-for를 활용하여 v-if를사용한다.
리스트렌더링
v-for
- js의 for in, for of 문 둘다 사용가능하다.
- 전달인자에 index(배열의 index번호), name(객체의 key), value(객체의 value)를 받을 수 있다.
- Vue js에서 리스트 요소가 바뀔 때 최적화를 해주는데 고유 key를 주어 Vue가 잘 최적화 할 수 있게 해야된다. v-for만 아니더라도 기억 할 것!
- 범위가 있는 정수도 사용가능. 단 0시작이 아닌 1시작 ex) “n in 10”
배열 변경 감지
- Vue는 새로운 배열을 만들어 기존 배열을 갱신시켜도
알아서 최적화를 해주기 때문에 신경쓸필요없다. Vue는 최대한 재사용 하려고함(이것이 프레임워크..?!?!)
이벤트 핸들링
- v-on 디렉티브 사용 @약어
- 이벤트 파라미터를 받고싶다면 @click=”함수(파라미터, $event)로 $을 붙여서 event로 넘겨주면된다. 굉장히 많이 사용됨. 순서 바꾸면 순서대로 들어감
폼 입력 바인딩
- 양방향 데이터: 데이터가 변경되면 한쪽만 변경되는 것이 아니라 다른 요소에도 영향을 미치는 것 v-model 디렉티브 사용하면 편함..! 사용자와 가장 밀접한 입력받는 부분은 데이터를 받고 전달해줘야기 때문에 양방향이어야됨. v-model은 한글을 사용할 시 글자가 완성되기 전까지 변하지 않기 때문에 사용하기에는 어려움
기타
디바운싱과 쓰로틀링은 Lodash라는 라이브러리 사용해서 구현가능함 Vue자체 배우는거와는 조금 동 떨어지는 내용. 하지만 디바운싱과 쓰로틀링이라는 단어는 한번 검색해봐야겠다.