본문 바로가기

분류 전체보기

 (370)
[Vue3] Vue Router로 페이지 이동하기 Vue Router: Vue 공식 라우터https://v3.router.vuejs.org/kr/Vue Router 추가-  Vite로 프로젝트 생성 시 Router를 추가한다.- 서버 실행 후 Router로 인한 프로젝트 변화를 확인할 수 있다.-> Home, About 링크에 따라 URL과 새로 렌더링되는 화면이 바뀐다.- 프로젝트 구조도 변화된 것을 확인할 수 있다. -> App.vue 코드가 바뀌고, router 폴더 및 views 폴더가 생성된다. 1) App.vue- RouterLink: 페이지를 다시 로드하지 않고 URL을 변경하고 URL 생성 및 관련 로직을 처리한다. HTML의 a 태그를 렌더링한다.- RouterView: URL에 해당하는 컴포넌트를 표시한다. 어디에나 배치하여 레이아웃에..
[Vue3] 컴포넌트 간 통신 (props, emit) 동일한 사진 데이터가 한 화면에 다양한 위치에서 여러 번 출력될 수 있다.하지만 해당 페이지를 구성하는 컴포넌트가 여러 개라면 각 컴포넌트가 개별적으로 동일한 데이터를 관리해야 할까?그렇다면 사진을 변경해야 할 때 모든 컴포넌트에 대해 변경 요청을 해야한다.=> "공통된 부모 컴포넌트에서 관리하자" 부모는 자식에게 데이터를 전달(pass props)하며, 자식은 자신에게 일어난 일을 부모에게 알림(emit events)Props- 부모 컴포넌트로부터 자식 컴포넌트로 데이터를 전달하는데 사용되는 속성- 모든 props는 자식 속성과 부모 속성 사이에 하향식 단방향 바인딩(one-way-down binding) 형성부모 속성이 업데이트되면 자식으로 흐르지만 그 반대는 안됨자식 컴포넌트 내부에서 props를 ..
[Vue3] Lifecycle Hooks Lifecycle Hooks: Vue 인스턴스의 생애주기 동안 특정 시점에서 실행되는 함수-> 개발자가 특정 단계에서 의도하는 로직이 실행될 수 있도록 함 1. Vue 컴포넌트 인스턴스가 초기 렌더링 및 DOM 요소 생성이 완료된 후 특정 로직을 수행하기  2. 반응형 데이터의 변경으로 인해 컴포넌트의 DOM이 업데이트된 후 특정 로직을 수행하기 Add 1 Count: {{ count }} {{ message }}  이외에도 다양한 hooks 함수들이 있다.https://vuejs.org/api/composition-api-lifecycleLifecycle Hooks 특징- Vue는 Lifecycle Hooks에 등록된 콜백 함수들..
[Vue3] watch watch() 함수는 반응형 데이터를 감시하고, 감시하는 데이터가 변경되면 콜백 함수를 호출한다.watch 구조watch(variable, (newValue, oldValue) => { // do something}- variable: 감시하는 변수watch 예시감시하는 변수에 변화가 생겼을 때 기본 동작 확인하기 Add 1 Count: {{ count }}  감시하는 변수에 변화가 생겼을 때 연관 데이터 업데이트하기 Message length: {{ messageLength }}
[Vue3] 리스트 렌더링 (v-for) v-for 특징- alias in expression 형식의 특수 구문을 사용하여 반복되는 현재 요소에 대한 별칭(alias) 제공 {{ item.text }} - 배열에서 인덱스에 대한 별칭을 지정할 수 있음 {{ index }} / {{ item.name }} - 객체에서는 키, 인덱스에 대한 별칭을 지정할 수 있음 {{ index }} / {{ key }} / {{ value }}  여러 요소에 대한 v-for 적용- template 요소에 v-for을 적용하여 하나 이상의 요소에 반복 렌더링 할 수 있음 {{ item.name }} {{ item.age }} ..
[Vue3] 조건부 렌더링 (v-if, v-show) v-if: 표현식 값의 T/F를 기반으로 요소를 조건부로 렌더링 - 'v-else' directive를 사용하여 v-if에 대한 else 블록을 나타낼 수 있다. true일때 보여요 false일때 보여요 토글  - 'v-else-if' directive를 사용하여 v-if에 대한 else if 블록을 나타낼 수 있다. Alice입니다 Bella입니다 Cathy입니다 아무도 아닙니다.  여러 요소에 대한 v-if 적용- v-if는 directive이기 때문에 단일 요소에만 연결 가능- template 요소에 v-if를 사용하여 하나 이상의 요소에 대해 적용할 수 있다. (v-else, v-else-..
[Vue3] Computed Property computed() : 계산된 속성을 정의하는 함수.미리 계산된 속성을 사용하여 템플릿에서 표현식을 단순하게 하고 불필요한 반복 연산을 줄인다. computed를 적용하지 않을 경우- 템플릿이 복잡히지며 todos에 따라 계산을 수행하게 된다.- 이 계산을 템플릿에 여러 번 사용하는 경우에 반복이 발생한다. 남은 할 일 {{ todos.length > 0 ? "아직 남았다" : "퇴근!" }}  computed 적용- 반응성 데이터를 포함하는 복잡한 로직의 경우 computed를 활용하여 미리 값을 계산 남은 할 일 {{ restOfTodos }}  computed 특징- 반환되는 값은 computed ref이며 일반 re..
[Vue3] Form 입력 바인딩 (v-model) 1. v-bind와 v-on을 함께 사용- v-bind를 사용하여 input 요소의 value 속성 값을 입력 값으로 사용- v-on을 사용하여 input 이벤트가 발생할 때마다 input 요소의 value 값을 별도 반응형 변수에 저장하는 핸들러를 호출 {{ inputText1 }}  2. v-model 사용 (양방향 바인딩) {{ inputText2 }}  - v-model은 단순 text input 뿐만 아니라 checkbox, radio, select 등 다양한 타입의 입력 방식과 함께 사용 가능- checkbox 활용1) 단일 체크박스와 boolean 값 활용 {{ checked }}..

티스토리툴바