1. v-if v-if 디렉티브는 조건부로 블록을 렌더링하는 데 사용된다. 블록은 디렉티브 표현식이 truthy 값을 반환하는 경우에만 렌더링 된다. Vue는 정말 멋지죠! 2. v-else 'v-else' 디렉티브를 사용하여 v-if에 대한 "else 블록"을 나타낼 수 있다. 'v-else' 엘리먼트는 v-if 또는 'v-else-if' 엘리먼트 바로 다음에 와야 한다. 그렇지 않으면 인식되지 않는다. 전환 Vue는 정말 멋지죠! 아닌가요? 3. v-else-if A B C No 4. 에서 v-if v-if는 디렉티브이므로 단일 엘리먼트에 연결해야 한다. 따라서 둘 이상의 엘리먼트를 전환하려면 보이지 않는 래퍼 역할을 하는 엘리먼트에 v-if를 사용할 수 있..
일반적으로 엘리먼트에 데이터를 바인딩하는 이유는 클래스 목록과 해당 인라인 스타일을 조작하기 위함이다. class, style 둘 다 속성이므로 다른 속성과 마찬가지로 v-bind를 사용하여 문자열 값을 동적으로 할당할 수 있다. 그러나 연결된 문자열을 사용하여 이러한 값을 생성하려고 하면 성가시고 오류가 발생하기 쉽다. 이러한 이유로 Vue는 v-bind가 class 및 style과 함께 사용될 때 특별한 향상을 제공한다. 문자열 외에도 표현식은 객체 또는 배열로 평가될 수 있다. 1. HTML 클래스 바인딩 1-1. 객체로 바인딩 하기 클래스를 동적으로 토글하기 위해 객체를 ':class (v-bind:class의 줄임말)'에 전달할 수 있다. toggle : 두 가지 상태 간의 전환을..
계산된 속성의 경우 기본 설명은 동일하고 소스만 달라 예제에 어느 api 소스인지만 추가하여 기술함 1. 기본 예제 템플릿 내 표현식은 매우 편리하지만 간단한 작업을 위한 것이다. 템플릿에 너무 많은 논리를 넣으면 비대해져 유지 관리가 어려워질 수 있다. 예를 들어 아래와 같이 객체 내 배열이 있는 경우... // Options API ver export default { data() { return { author: { name: 'Cheddar', books: [ 'vue2', 'vue3', 'vue4' ] } } } } // Composition API ver const author = reactive({ name: 'Kim Chedd..
이전글 [Vue 빠른시작] 반응형 기초 예제 추가(Composition API.ver) 1. 반응형 상태 설정(Declaring Reactive State) 옵션 API에서는 'data' 옵션을 사용하여 컴포넌트의 반응형 상태를 선언한다. 옵션 값은 객체를 반환하는 함수여야 한다. Vue는 새 컴포넌트 인스턴스를 만들 때 함수를 호출하고, 반환된 객체를 반응형 시스템에 래핑한다. 이 객체 내 모든 속성은 해당 컴포넌트 인스턴스(메서드 및 생명주기 훅에서 'this')에서 최상위에 프락시(proxy)되어 노출된다. 예제 Count is: {{ count }} 이러한 인스턴스 속성은 인스턴스를 처음 만들 때만 추가되므로, 'data'함수에 의해 반환되는 객체에 선언..
[Vue 빠른시작]템플릿 문법 예제 추가 Vue는 컴포넌트 인스턴스의 데이터를 서술적으로 렌더링된 DOM에 바인딩할 수 있는 HTML 기반 템플릿 문법을 사용한다. 내부적으로 Vue는 템플릿을 고도로 최적화된 JavaScript 코드로 컴파일한다. 반응형 시스템과 결합된 Vue는 앱 상태의 변경 사항을 적용할 때, 다시 렌더링 할 필요가 있는 최소한의 컴포넌트를 지능적으로 파악하고 DOM 조작을 최소화 한다. 0. vue 파일 import 및 mount하기 Template.vue라는 파일에 코드를 따로 작성할 예정이어서 .vue 파일을 가져오는 방법 먼저 작성함 예제 // Template.vue {{ title }} // main.js import { createApp } from 'vue/dis..
