Frontend (37) 썸네일형 리스트형 [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 }}.. [Vue3] 이벤트 핸들링 (v-on) 1. Inline Handlers- 주로 간단한 상황에 사용한다.- v-on은 생략하고 @만 쓸 수 있다. Add 1 Count: {{ count }} 2. Method Handlers- Inline handlers로는 불가능한 대부분의 상황에서 사용한다.- 기본 DOM Event 객체를 자동으로 수신한다. Hello Inline Handler에서의 메서드 호출- 메서드 이름에 직접 바인딩하는 대신 Inline Handler에서 메서드를 호출할 수도 있다.- 이렇게 하면 기본 이벤트 대신 사용자 지정 인자를 전달할 수 있다. Inline Handlers에서의 event 인자에 접근하기- Inline Handlers에서 원래.. [Vue3] 동적 데이터 바인딩 (v-bind) 1. Attribute Bindings- HTML 속성 값을 Vue의 상태 속성 값과 동기화되도록 한다.- v-bind는 생략하고 : 만 쓸 수 있다. Move to url - 대괄호로 감싸서 argument에 Javascript 표현식을 사용할 수 있다.- 대괄호 안에 작성하는 이름은 반드시 소문자로만 구성 가능하다. (브라우저가 속성 이름을 소문자로 강제 변환)- Javascript 표현식에 따라 동적으로 평가된 값이 최종 argument 값으로 사용된다. Dynamic Attr 2. Class and Style Bindings- 클래스와 스타일 모두 속성이므로 v-bind를 사용하여 문자열 값을 할당할 수.. [Vue3] 템플릿 문법 1. Text Interpolation- 이중 중괄호 구문(콧수염 구문)을 사용한다.- v-once directive를 사용하면 렌더링 이후 값이 변경되어도 처음 렌더링 할 때의 값을 유지한다. Message: {{ msg }} once : {{ msg }} msg 변경 2. Raw HTML- 콧수염 구문은 데이터를 일반 데이터로 해석하기 때문에 실제 HTML을 출력하려면 v-html을 사용해야 한다. {{ rawHtml }} 3. Attribute Bindings- 콧수염 구문은 HTML 속성 내에서 사용할 수 없다.- v-bind directive를 사용하여 데이터를 HTML 태그의 속성 값과 .. [Vue3] Vite를 이용하여 Vue 프로젝트 생성하기 1. npm을 사용하기 위해 Node.js를 설치한다.https://nodejs.org/ko/ 2. cmd창을 켜고 프로젝트를 생성할 폴더로 이동한다.3. npm create vue@latest 명령어를 입력하고 프로젝트 이름과 옵션을 선택하면 프로젝트가 생성된다. 4. 프로젝트 폴더로 이동하여 code . 명령어로 vs code를 실행한다. 다음과 같이 폴더와 파일들이 생성된 것을 확인할 수 있다. 5. vs code에서 터미널을 열고 npm install 명령어로 npm을 설치한다. node_modules 폴더와 package-lock.json 파일이 추가된다. 6. npm run dev 명령어로 실행한다. 이전 1 2 3 4 5 다음
