vue.js/vue.js 공식문서
vue.js 공식문서 따라하기 - 템플릿 문법(Template Syntax)
* 공식문서 kr.vuejs.org/v2/guide/syntax.html 를 공부하며 작성한 글입니다. Vue.js는 렌더링 된 DOM을 기본 Vue 인스턴스의 데이터에 선언적으로 바인딩 할 수있는 HTML 기반 템플릿 구문을 사용합니다. 모든 Vue.js 템플릿은 스펙을 호환하는 브라우저 및 HTML 파서로 구문 분석 할 수있는 유효한 HTML입니다. 내부적으로 Vue는 템플릿을 가상 DOM 렌더링 함수로 컴파일 합니다. 반응형 시스템과 결합된 Vue는 앱 상태가 변경 될 때 최소한으로 DOM을 조작하고 다시 적용할 수 있는 최소한의 컴포넌트를 지능적으로 파악할 수 있습니다. 가상 DOM 개념에 익숙하고 JavaScript의 기본 기능을 선호하는 경우 템플릿 대신 렌더링 함수를 직접 작성할 수 있으며 ..
vue.js 공식문서 따라하기 - vue 인스턴스(Instance)
vue 인스턴스(Instance) 만들기 모든 Vue 앱은 Vue 함수로 새 Vue 인스턴스를 만드는 것부터 시작합니다. var vm = new Vue({ // 옵션 }) vm 이름으로 Vue인스턴스를 생성한다. 해당 내용은 하위의 내용으로 설명을 하는게 이해가 빠르기 때문에 바로 다음으로 넘어가겠습니다. 데이터와 메소드(Data and Methods) vue 인스턴스를 생성할때 option에서 선언하는 모든 속성이 반응형 시스템으로 생성됩니다. 속성이 변경될때 vue가 반응하여 해당 해당 속성을 바라보고 있는 속성도 업데이트 됩니다. 글로는 설명이 어려우니 공식문서의 소스를 보고 설명 하겠습니다. var data = { a: 1 } // Vue인스턴스에 데이터 객체를 추가합니다. var vm = new..
vue.js 공식문서 따라하기 - vue.js 시작하기 2탄
지난번 vue.js 공식문서 따라하기 - vue.js 시작하기 1탄 에 이어서 시작합니다. 사용자 입력 핸들링(v-on) 사용자가 앱과 상호 작용할 수 있게 하기 위해 우리는 v-on 디렉티브를 사용하여 Vue 인스턴스에서 메소드를 호출하는 이벤트 리스너를 추가 할 수 있습니다 말이 어렵게 써있지만 javascript의 onclick 이벤트와 비슷한 기능이다. {{ message }} 메시지 뒤집기 reverseMessage 메소드를 호출해서 message 데이터를 뒤집었다. dom 조작은 vue 내에서 처리하고 우리는 기본적인 로직으로 진행하면 된다. 사용자 입력 핸들링2(v-model) 우리는 v-on이라는 사용자 입력 핸들링을 했지만 실시간 핸들링을 할때는 v-model을 사용한다. 거기다가 양방향..