개성있는 개발자 되기

1. 옵션 객체 Vue 인스턴스를 생성할 때 전달하는 속성들을 담은 객체를 data 옵션 객체라고 부른다. var model = { name : "홍길동" } var vm = new Vue({ // 옵션객체 el : "#test", data : model }) data 옵션에 주어진 모든 속성들은 Vue 인스턴스 내부에서 직접 이용되지 않고 Vue 인스턴스와 Data 옵션에 주어진 객체 사이에 프록시를 두어 처리한다. ...더보기 vm.name = "이몽룡" model.name = "향단이" 위와 같이 객체의 속성처럼 접근할 수 있다. 이건 Vue 인스턴스가 프록시를 두어 Data옵션에 접근하기 때문이다. vm.$data.name = "성춘향" 직접 접근하려면 위와 같이 작성해야 한다. computed ..

1. 기본 디렉티브 꼭 콧수염 표현식이 아니더라도 HTML 요소 내부에 선언적 렌더링을 하는 건 아니다. 디렉티브라는 것이 있다. Vue.js의 기본 디렉티브들을 알아보겠다. ...더보기 v-text, v-html v-bind v-model v-show, v-if, v-else, v-else-if v-for v-pre, v-once 1.1 v-text, v-html 디렉티브 text를 바인딩 하는 디렉티브다. v-text 와 v-html 의 차이점은 실행화면에서 볼 수 있듯이, v-text는 태그 문자열을 HTML 인코딩하여 나타내기 때문에 화면에 태그 문자열이 그대로 나타난다. 하지만 v-html 디렉티브는 v-bind:src 를 v-bind 생략하고 그냥 :src와 같이 작성해도 된다. 1.3 v-m..

1. Vue.js 란? Vue.js란 Google Creative Lab에서 일하던 에반 유 가 UI를 빠르게 개발하기 위해서 만들었다. 그렇게 떄문에 Vue.js는 웹 화면 작성에 최적화된 프레임워크라고 할 수 있다. Vue.js 전형적인 MVVM 패턴을 따르고 있는데 다음 사진과 같다. View - HTML 과 CSS로 작성하는 "화면" View Model - View의 실제 논리 및 데이터 흐름을 담당, ViewModel 의 상태 데이터만 변경하면 즉시 View에 반영된다. Model - 도메인 특화 데이터 2. 개발 환경 설정 Vue.js를 학습하기 위해서는 아래와 같은 개발 환경이 필요하다. Node.js : 서버 측 자바스크립트 언어이자 플랫폼 npm : 앱의 의존성 관리를 위해 사용하는 노드..