beomy

1. 이벤트 리스너 v-on 디렉티브는 이벤트 리스너입니다. v-on 디렉티브는 DOM 이벤트가 발행하는지 듣고 있다가 이벤트가 발생 했을 때 JavaScript를 실행합니다. Add 1 위 버튼을 클릭한 횟수는 {{ counter }} 번 입니다. new Vue({ el: '#app', data: { counter: 0 } });위의 예제는 v-on이라는 이벤트 리스너가 click 이벤트가 발행하는지 듣고 있다가 이벤트가 발생 되었을 때 간단한 JavaScript를 실행하는 예제입니다. CodePen에서 결과를 확인 할 수 있습니다. 2. 메소드 이벤트 핸들러 대부분의 이벤트 핸들러의 로직은 복잡하기 때문에 v-on에 JavaScript로 넘겨주기 어렵습니다. 그렇기 때문에 v-on에 m..

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