Vue4 [Vue.js] Vue 조건부 렌더링 (Conditional Rendering) 조건부 렌더링 (Conditional Rendering) # v-if v-if 디렉티브는 조건부로 표현식이 참인 경우 블록을 렌더링. (초기 조건이 false면 아무 작업도 실행x) Vue는 정말 멋지죠! # v-else v-else 디렉티브로 v-if에 대한 참이 아닌 경우를 렌더링. 전환 Vue는 정말 멋지죠! 아닌가요? 😢 # v-else-if v-if에 대한 "else if 블록" 역할. A B C A/B/C 아님 # v-if v-if는 단일 엘리먼트에 연결해야 하지만 둘 이상의 엘리먼트를 전환 시, 보이지 않는 래퍼 역할을 하는 엘리먼트에 v-if를 사용할 수 있음. 최종 렌더링된 결과에는 엘리먼트가 포함되지 않음. 페이지 전환 제목 1 단락 1 단락 2 제목 2 단락 1 단락 2 # v.. 2023. 10. 26. [Vue.js] Vue 계산된 속성 (Computed Properties) 계산된 속성 (Computed Properties) 템플릿 내 표현식은 간단한 코드에 적합하며, 템플릿에 많은 논리가 있다면 유지 관리가 어려워집니다. const author = reactive({ name: 'John Doe', books: [ 'Vue 2 - Advanced Guide', 'Vue 3 - Basic Guide', 'Vue 4 - The Mystery' ] }) 따라서 반응형 데이터를 포함하는 복잡한 논리의 경우, 계산된 속성을 사용하는 것이 좋음. 책을 가지고 있다: {{ publishedBooksMessage }} Name: {{this.fullName }} 이름: {{ this.fullName='길동 홍'}} 2023. 10. 26. [Vue.js] Vue 템플릿 문법 (Template Syntax) 템플릿 문법 (Template Syntax) Vue.js의 템플릿 문법은 HTML과 JavaScript를 결합한 형태로, Vue 컴포넌트 인스턴스의 데이터를 렌더링된 DOM에 선언적으로 바인딩할 수 있습니다. (JSX 문법 지원) {{ msg }} {{ desc }} # 텍스트 보간법 (Text Interpolation) 1. 문자열 데이터 바인딩의 가장 기본 형태는 '이중 중괄호(mustaches)'를 사용한 텍스트 보간. (보간은 중간에 무언가 끼워넣는다는 의미가 있습니다.) 메시지: {{ msg }} 2. 원시 HTML (Raw HTML) 이중 중괄호는 HTML이 아닌 일반 텍스트로 데이터를 해석하여, 실제 HTML을 출력 시, v-html 디렉티브를 사용해야 함. 이중 괄호: {{ rawHtml .. 2023. 10. 24. [Vue.js] Vue 시작하기 (설치, 개발환경 설정) Vue.js 란? Vue.js는 프론트엔드 웹 개발을 쉽게 만드는 JavaScript 프레임워크로, 선언적 렌더링, 반응형 데이터 바인딩 기능과, 컴포넌트 기반 아키텍처와 가상 DOM을 활용하여 성능을 최적화합니다. ( + 재사용 가능하고 확장 가능한 UI 컴포넌트의 생성) 또한 Vue.js는 라우팅, 상태 관리, 템플릿, JSX와 같은 다양한 기능을 지원하여 웹 애플리케이션 개발의 효율성을 높여줍니다. 공식사이트 : https://v2.ko.vuejs.org/ Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 v2.ko.vuejs.org ⭐️ Vue 의 특징 선언적 렌더링: Vue.js는 HTML 템플릿을 사용하여 사용자 인터페이스를 정의하는 선언적 렌더링을 지원 컴포넌트 기반 아키텍처:.. 2023. 10. 24. 이전 1 다음
