Life.Contains("Coding");

v-if 디렉티브 v-if는 조건부로 블록을 렌더링 하는 데 사용된다. 블록은 디렉티브 표현식이 true 값을 반환하는 경우에만 렌더링 된다. Vue is awesome! v-else 디렉티브 v-else를 사용하여 v-if에 대한 else 블록을 나타낼 수 있다. Toggle Vue is awesome! Oh no 😢 v-else element는 v-if 또는 v-if-else element 바로 뒤에 와야 한다. 바로 뒤에 오지 않는다면 인식되지 않는다. v-else-if v-else-if는 이름에서 알 수 있듯, v-if의 else if 블록 역할을 한다. 여러 번 연결되어 사용될 수 있다. A B C Not A/B/C v-else와 마찬가지로 v-else-if element는 v-if 또는 v-e..

데이터 바인딩의 일반적인 요구사항은 element의 클래스 목록과 인라인 스타일을 조작하는 것이다. 클래스와 스타일 모두 속성이므로 v-bind를 이용하여 처리할 수 있다. 표현식으로 최종 문자열을 계산하기만 하면 된다. 하지만 문자열 연결을 방해하는 것은 성가시고 오류가 발생하기 쉽기에 Vue는 v-bind가 class와 style과 함께 사용될 때 특별한 개선 사항을 제공한다. 문자열 외에도 표현식은 객체 또는 배열로 평가될 수 있다. Binding HTML Classes Binding to Objects :class(v-bind:class의 약자)에 객체를 전달하여 클래스를 동적으로 전환할 수 있다. 위 구문은 active 클래스의 존재 여부가 isActive의 값(true/false)에 따라 결정..

Basic Example 템플릿 내에서의 표현식은 매우 편리하지만 간단한 작업을 위한 것으로, 템플릿에 너무 많은 로직을 넣으면 코드가 복잡해지고 유지보수가 어려워질 수 있다. 예를 들어, 아래와 같이 중첩된 배열을 가지는 객체가 있을 때 export default { data() { return { author: { name: 'John Doe', books: [ 'Vue 2 - Advanced Guide', 'Vue 3 - Basic Guide', 'Vue 4 - The Mystery' ] } } } } 그리고 author가 이미 책을 가지고 있는지의 여부에 따라 다른 메시지를 표시하고 싶다면 Has published books: {{ author.books.length > 0 ? 'Yes' : 'N..

Declaring Reactive State Options API에서는 data 옵션을 사용하여 component의 반응 상태를 정의하며 옵션 값은 객체를 반환하는 함수여야 한다. Vue는 새 component 인스턴스를 만들 때 함수를 호출하고 반응형 시스템으로 객체를 감싸 component 인스턴스에 $data로 저장한다. 편의상 최상위 수준의 속성도 component 인스턴스를 통해 바로 노출된다. export default { data() { return { count: 1 } }, // `mounted`는 추후에 설명될 lifecycle hook mounted() { // `this`는 component 인스턴스를 나타냄 console.log(this.count) // => 1 // 데이터도 변..

Vue는 렌더링 된 DOM을 기본 구성 요소 인스턴스의 데이터에 선언적으로 바인딩할 수 있는 HTML 기반 템플릿 구문을 사용한다. 모든 Vue 템플릿은 HTML 파서로 구문 분석할 수 있는 구문적으로 유효한 HTML이다. 내부적으로 Vue는 템플릿을 최적화된 JavaScript 코드로 컴파일한다. 반응형 시스템과 결합된 Vue는 앱 상태가 변경될 때 다시 렌더링 할 최소한의 컴포넌트를 파악하여 DOM 조작을 최소화한다. 가상 DOM 개념에 익숙하고 JavaScript의 원시 기능을 선호하는 경우 JSX 지원 옵션을 사용하여 템플릿 대신 렌더링 기능을 직접 작성할 수도 있다. Text Interpolation 데이터 바인딩의 가장 기본적인 형태는 "Mustache" 구문을 이용한 텍스트 보간이다. Mes..