데이터 바인딩(Data Binding) 데이터 바인딩은 일반적으로 엘리먼트의 클래스 목록과 인라인 스타일을 조작하기 위해 사용된다. v-bind 디렉티브 값으로 들어가는 표현식은 문자열 외에도 객체 또는 배열을 사용할 수 있다. 클래스 지정 클래스를 동적으로 토글 하기 위해 v-bind:class에 객체를 전달할 수 있다. Error 태그에 v-bind 디렉티브를 사용했다. v-bind:class 값에 {warning: isError}라는 객체 값을 담는다. 만약 isError가 true인 경우 태그에 warning이라는 클래스가 지정될 것이다. 현재는 false로 설정해놓았기 때문에 단순 Error로만 출력될 것이다. Vue.js Devtools를 사용해서 isError 값을 true와 false로 번..
컴포넌트(Component) 조합하여 화면을 구성할 수 있는 블록을 뜻한다. 화면 영역을 각각 Header, Content, Footer, Aside, Main으로 구분한 것이다. 이를 아래와 같은 트리 형태로 나타낼 수 있다. 트리 구조로 컴포넌트를 살펴보면 컴포넌트가 어떻게 구성되어있는지 더 알아보기 쉽다. Root는 화면 전체 영역을 의미한다. 화면 전체를 Header, Content, Footer 세 개의 컴포넌트로 분할하였다. 이후 Content 컴포넌트에서도 Aside, Main 두 개의 컴포넌트로 분할한다. Content를 부모 컴포넌트 또는 상위 컴포넌트라 하고, Aside, Main을 자식 컴포넌트 또는 하위 컴포넌트라 말한다. 이는 Root와 Header, Content, Footer ..
인스턴스(Instance) Vue에서 제공하는 API와 속성으로, 뷰로 개발하기 위하여 필수적으로 생성해야 한다. {{ message }} new Vue()로 뷰 인스턴스를 생성할 때의 Vue를 생성자라고 한다. (생성자 인자에는 객체가 들어간다.) 위 예제에서는 뷰 인스턴스 옵션 속성에 el 속성과 data 속성을 사용하였다. 이 외에 template, methods, created, watch 속성 등 여러 속성들이 뷰 인스턴스 옵션 속성으로 미리 정의되어 있다. el 속성 값을 지정해주어야 태그 안 Vue의 기능과 속성들이 유효해진다. el 속성으로 뷰 인스턴스가 그려질 지점을 설정하는 것이다. 참고로 el 속성 값에 html이나 body를 넣는 경우 콘솔 창에 아래와 같은 경고가 발생하고, 제대로..
참고 : https://vuejs.org/v2/guide/ Introduction | Vue.js vuejs.org Vue.js 기초 예제 Vue.js 는 따로 설치할 필요 없이 간단하게만 실행해보려면 html에 스크립트 코드만 한 줄 추가하면 된다. 위 스크립트는 개발 버전이기 때문에 콘솔 창에 경고, 로그 등을 출력해준다. 출력 {{ message }} Vue.js를 사용하여 화면에 message를 출력하였다. Vue.js를 사용하면 데이터와 DOM이 연결되며, 반응형으로 동작하기 때문에 콘솔 창에서 message 값을 변경하면 바로 화면에 변경된 내용이 적용된다. 콘솔 창에서 app.message를 출력하면 기존 new Vue({})에서 설정한 message 값이 들어가 있다. app.message..
