Vue3 Tutorial ( Single File Component 방식 )

https://v3-docs.vuejs-korea.org/tutorial/#step-8

 

Vue2, Vue3에서 data 사용 가능하지만,

Vue3에서는 setup이 권장된다.

 

vue3 ( setup ) 문법

 

setup 함수 내에서 Composition API를 사용해 상태와 로직을 정리, 반응형 상태를 만들기 위해 ref, reactive를 사용하고,  this를 사용하지 않는다.

 

data, setup 방식

 

 

data ( Option API ) 장점

1. 간단하고 직관적

2. methods, computed, watch 등 다른 옵션을 사용하기 편하다.

 

setup ( Composition API ) 장점

1. this가 필요없다.

2. 코드 재사용성 증가

3. 타입스크립트 친화적

 

---------------------------------------------------------------------------------------------------------------------

 

 

Vue의 핵심 기능은 선언적 렌더링 ( data )

 

상태가 변경되면 HTML이 자동으로 업데이트

변경 시, 업데이트를 트리거할 수 있는 상태는 반응형으로 간주.

반응형 상태는 컴포넌트에 유지.

 

data 옵션을 사용해서 반응형 상태를 선언 할 수 있다.

 

이중 중괄호를 사용하여 message 값을 동적으로 렌더링

이중 중괄호는 식별자나 경로만 국한되지 않고 표현식도 사용가능

 

 

 

 

 

 

속성 바인딩 ( v-bind )

 

Vue에서 이중 중괄호는 텍스트 삽입 시에만 사용

속성을 동적 값에 바인딩하려면 v-bind 디렉티브를 사용

 

v-bind는 자주 사용돼서 단축 문법 : 를 사용

 

 

 

정적으로 css 클래스를 적용할때는 v-bind를 사용안함

동적으로 변수나 조건식에 의해 달라질때는 무조건 v-bind 사용

 

보통 단순 css나 클릭 이벤트를 제외하고는 다 붙인다.

 

 

 

이벤트 리스너 ( v-on )

v-on 디렉티브를 사용하여 DOM 이벤트를 수신할 수 있음

자주 사용되기 때문에 단축 문법 @ 를 사용

 

 

 

폼(form) 바인딩 ( v-model )

v-bind와 v-on을 함께 사용하면, 폼 안의 입력 엘리먼트에 양방향 바인딩을 만들 수 있음

 

v-model="text" 가 return 안에 text랑 연결. 

return 안에 text가 {{  }} 안에 text랑 연결

 

 

조건부 렌더링 ( v-if, v-else )

 

 

리스트 렌더링 ( v-for )

 

 

@submit.prevent 는 폼 제출 이벤트 처리할 때 사용

.prevent는 submit 이벤트의 기본 동작인 페이지 리로딩을 방지

 

v-for="item in items"

• items: 반복할 배열이나 객체.
• item: 반복되는 각 항목을 나타내는 변수.

:key="todo.id": v-for에서 각 항목에 고유한 키를 부여

 

key는 반복되는 항목에 고유한 식별자를 부여

효율적으로 DOM을 업데이트하고 성능 최적화

반복하는 항목에 대해 항상 지정하는게 좋음

 

 

 

computed 속성

반응적으로 계산되는 속성을 선언

 

 

 

 

computed  속성은 계산에 사용된 다른 반응형 상태를 의존성으로 추적

결과를 캐시하고 의존성이 변경되면 자동으로 업데이트

 

filteredTodos를 계산(동작)하는 기능을 만드는 거고

클릭 이벤트로 hideCompleted

 

computed에