이번 포스트에서는 컴포넌트에 클래스를 바인딩하는 방법과 인라인 스타일을 사용하는 방법을 이야기 하려고 합니다. 스타일을 적용할 때 클래스와 인라인 스타일이 많이 사용되기 때문에, 이번 포스트는 컴포넌트에 스타일을 적용하는 방법을 이야기 한다고 보셔도 될 것 같습니다. 1. HTML 클래스 바인딩 객체로 클래스를 바인딩 하는 방법, 배열로 클래스를 사용하는 방법, 컴포넌트와 함께 사용하는 방법 3가지를 이야기 하도록 하겠습니다. 객체 구문 클래스를 동적으로 바인딩하기 위해서는 v-bind:class(약어 :class)를 사용하면 됩니다. :class에 객체를 전달해서 클래스를 바인딩 할 수 있습니다. 위 예제에서 isActive가 true일 경우 active 클래스가 바인딩 됩니다. 객체를 이용하여 여러 ..
이번 포스트에서는 Vue.JS에서 비슷한 특징을 가진 computed 속성과 watch 속성의 특징을 이야기 하려고 합니다. 1. computed 속성 템플릿 문법([Vue.JS] 템플릿 문법 참고)에서 JavaScript 표현식을 사용하면, 쉽게 원하는 데이터를 DOM에 그릴 수 있습니다. 하지만 복잡한 연산을 템플릿 안에서 하게 되면, 코드를 이해하고, 유지보수하기 어려워집니다. {{ message.split('').reverse().join('') }} 위의 예제는 템플릿 문법 안에서 JavaScript를 사용하여 message를 역순으로 출력한 예제입니다. 지금은 단순해 보일 수도 있지만 좀 더 복잡한 로직을 사용한다면 computed 속성을 사용하는 것이 좋습니다. ..
Vue.JS는 렌더링 된 DOM과 Vue 인스턴스의 데이터에 바인딩 할 수 있는 HTML 기반의 문법을 제공합니다. 이 문법을 템플릿 문법이라고 하겠습니다. Vue.JS는 내부적으로 템플릿 문법을 가상 DOM을 리턴하는 render 함수로 컴파일 합니다. Vue.JS는 가상 DOM을 사용하여 DOM을 변경할 때 최소한의 DOM을 조작하고 적용이 가능하도록 하였습니다. 템플릿 문법을 사용하지는 대신 render 함수(JSX도 지원합니다.)를 사용할 수도 있습니다. (render 함수의 사용법은 다음에 설명하도록 하겠습니다...) Vue.JS의 템플릿 문법에 대해 알아 보도록 하겠습니다. 1. 보간법 (Interpolation) DOM에 데이터를 바인딩 하는 방법 중에 보간법, DOM에 데이터를 나타내는 방..
Vue.JS의 라이프 사이클은 Vue.JS 어플리케이션을 구현할 때 빼 놓을 수 없는, 빼 놓고는 Vue.JS 어플리케이션을 개발하기 힘든, 매우 중요한 개념입니다. Vue.JS의 라이프 사이클은 크게 Create, Mount, Update, Destory로 나눌 수 있습니다. 1. Create Vue.JS의 라이프 사이클들 중에 가장 먼저 실행됩니다. create 단계에서 실행되는 라이프 사이클 훅(hook)들은 컴포넌트가 DOM에 추가 되기 전이기 때문에, DOM에 접근하거나 this.$el을 사용할 수 없습니다. 컴포넌트가 DOM에 추가 되기 전에 호출 되기 때문에 서버 사이드 렌더링에서도 지원되는 훅입니다. Create 단계에서 호출되는 라이프 사이클 훅들은 beforeCreate와 created..
Vue.JS 공식 문서를 따르면, Vue는 엄격하게 MVVM 패턴과 관계되어 있지 않지만, MVVM 패턴에 영감을 받았다고 합니다.([디자인패턴] MVC, MVP, MVVM 비교 참고) MVVM 패턴의 특징 중 하나가 데이터 바인딩입니다. Model이 업데이트 되면, 데이터 바인딩으로 인해 View가 업데이트 됩니다. Vue 인스턴스 만들기 Vue 어플리케이션을 만드는 것은 Vue 인스턴스를 만드는 것에서 시작됩니다. Vue 어플리케이션의 구조는 루트 Vue 인스턴트 밑에 하위 컴포넌트가 붙는 컴포넌트 트리 구조입니다. Root Instance └─ TodoList ├─ TodoItem │ ├─ DeleteTodoButton │ └─ EditTodoButton └─ TodoListFooter ├─ Cle..
vue-cli를 통해 Vue 프로젝트를 생성하고, 생성된 프로젝트의 디렉토리 구조와 npm start의 실행 순서를 살펴보도록 하겠습니다. 1. vue-cli를 이용하여 Vue 프로젝트 생성 자세한 Vue 프로젝트 생성 관련 내용은 [Vue.JS] Vue.JS 설치방법을 참고하시기 바랍니다. vue init webpack my-project위의 명령어로, webpack을 사용하는 Vue 프로젝트를 생성하도록 하겠습니다. 위의 그림과 같이 vue-cli를 통해 프로젝트를 설정하고 프로젝트를 생성합니다. 터미널을 켜고 생성된 프로젝트의 디렉토리로 이동하여, npm start shell 명령어를 실행하면 (저의 경우는 VS Code의 터미널을 이용합니다.), 위의 그림과 같이 Vue 어플리케이션이 실행됩니다...
Vue.JS는 ECMAScript5 기능을 사용하기 때문에 IE8 이하 버전을 지원하지 않습니다. 전 주로 크롬 브라우저에서 개발을 합니다. 크롬 브라우저에서 Vue.JS를 개발 할 때, 크롬 확장 프로그램인 Vue.js devtools를 사용하면, 더 편리하게 Vue.JS를 디버깅 할 수 있습니다. Vue.JS를 사용하는 3가지 방법에 대해 이야기 하도록 하겠습니다, 1. CDN으로 Vue.JS 사용하기 위의 코드와 같이 작성하면 Vue.JS를 사용할 수 있습니다. CodePen으로도 Vue.JS를 CDN으로 javascript 설정에 추가해 주기만 하면, Vue.JS를 사용할 수 있습니다. CodePen 에서 Create -> New Pen 을 클릭하여(혹은 CodePen 링크에서..) 새로운 소스코..
많은 관심을 받고 있는 Vue의 성장과 Vue에 대한 간단한 소개를 하려고 합니다. Vue.js를 적용하여 신규 프로젝트를 진행 할 기회가 있어(이미 하나는 개발이 완료 됬고, 진행 중인 프로젝트 하나와, 앞으로 개발 할 프로젝트...) 내친김에 Vue.js에 대해 정리하고자 합니다. 1. Vue.JS의 성장 Vue가 한창 띄고 있다는 이야기를 많이 듣고 있습니다. Vue의 현재 위상이 어느정도 인지.. GitHub와 Google 트렌드, npm, Stack Overflow로 알아보겠습니다. GitHub vue와 react, angular를 GitHub에서 비교해 보도록 하겠습니다. Vue는 Star를 79299개로 React와 큰 차이 없이 많은 사람들이 관심을 가지고 있는 것을 볼 수 있습니다. Go..