beomy

1. 시작 기본 디렉티브 (v-model, v-show 등..) 외에도 사용자가 직접 정의한 디렉티브를 등록 할 수 있습니다. 기본적으로 Vue 2.0의 코드 재사용 및 추상화의 기본 형식은 컴포넌트 입니다. 하지만 일반 엘리먼트의 DOM에 접근이 필요한 경우 사용자 정의 디렉티브가 유용하게 사용 될 수 있습니다. // 전역 사용자 정의 디렉티브 v-focus 등록 Vue.directive('focus', { // 바인딩 된 엘리먼트가 DOM에 삽입되었을 때... inserted: function (el) { // 엘리먼트에 포커스를 줍니다 el.focus() } })위의 코드는 페이지가 로드되면 해달 엘리먼트에 포커스를 주는 디렉티브 입니다. (참고, 모바일 사파리에서도는 동작하지 않습니..

Vue.JS는 렌더링 된 DOM과 Vue 인스턴스의 데이터에 바인딩 할 수 있는 HTML 기반의 문법을 제공합니다. 이 문법을 템플릿 문법이라고 하겠습니다. Vue.JS는 내부적으로 템플릿 문법을 가상 DOM을 리턴하는 render 함수로 컴파일 합니다. Vue.JS는 가상 DOM을 사용하여 DOM을 변경할 때 최소한의 DOM을 조작하고 적용이 가능하도록 하였습니다. 템플릿 문법을 사용하지는 대신 render 함수(JSX도 지원합니다.)를 사용할 수도 있습니다. (render 함수의 사용법은 다음에 설명하도록 하겠습니다...) Vue.JS의 템플릿 문법에 대해 알아 보도록 하겠습니다. 1. 보간법 (Interpolation) DOM에 데이터를 바인딩 하는 방법 중에 보간법, DOM에 데이터를 나타내는 방..