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..

모든 Vue application은 createApp 함수를 사용하여 새 어플리케이션 인스턴스를 생성함으로 시작된다. import { createApp } from 'vue' // import the root component App from a single-file component. import App from './App.vue' const app = createApp(App) createApp 함수에 전달되는 객체는 다른 components를 자식으로 포함할 수 있는 Root Component로 보통 ./App.vue를 사용한다. Vite를 이용해 생성한 프로젝트에는 다양한 components가 생성되었는데 구조를 본다면 아래와 같다. App (root component) ├─ HelloWorld..

앞선 글에서 Vue-cli로 프로젝트를 생성해보았다. 본격적으로 document를 톺아보기 앞서 Quick Start 섹션을 보다가 한 문구를 발견해버렸다. The official Vue build setup is based on Vite, a frontend build tool that is modern, lightweight and extremely fast. Vue-cli로 실컷 했더니 official이 따로 있었다...ㅎ Vite를 이용하여 다시 프로젝트를 생성해보자. Vite로 프로젝트를 생성하기 위해선 Node.js가 설치되어있어야 한다. 나는 개발환경 설정할 때 Node.js를 설치했기 때문에 설치 과정을 건너뛰고 VS Code의 command를 켜본다. Vite를 이용하여 Vue proje..

앞서 로컬 환경에 Vue.js 개발 환경 설정을 완료하였으니 프로젝트를 생성해보자. Vue CLI를 이용해 프로젝트를 생성해본다. CMD 창을 켜고 프로젝트를 생성할 폴더로 이동해준다. CMD 창을 켜지 않고 VS Code(Visual Studio Code) 하단 터미널에서 생성하는 것도 가능하다. 프로젝트를 생성하기 위해선 아래의 명령어를 입력해준다. 과거엔 vue init으로 프로젝트를 생성하였지만 Vue CLI >= 3 에서는 vue create를 사용한다. vue create VueProject01 PS D:\Study\Vue\VueExercises> vue init webpack-simple VueProject01 vue : 'vue' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 ..

개발자라면 프론트엔드와 백엔드를 구분하지 않고 영역을 끊임없이 넓혀나가야 하지 않을까. 지난 회사에서 다루었던 Vue.js, 이직 후 머릿속 한편 구석에 박아두었지만 다시 꺼낼 때가 된 것 같다. Windows11으로 업그레이드 한 김에 Vue.js 개발환경 설정을 시작해본다. 1. Visual Studio Code 설치 .NET 개발자인 나에게 세상에서 제일 익숙한 Visual Studio Code. Visual Studio에 비해 훨씬 가볍고 다양한 Extension을 지원하는 것이 가장 큰 특징이다. 어떠한 개발 언어든 가볍게 사용하기에 Visual Studio Code만 한 게 없지 않을까. https://code.visualstudio.com/ Windows11로 업그레이드하니 모든 창이 mac..