
챌린지 41일 차.
이벤트 핸들링
v-on디렉티브는 @기호로, DOM 이벤트를 듣고 트리거 될 때와 JavaScript를 실행할 때 사용한다. v-on:click="methodName" 나 줄여서 @click="methodName"으로 사용한다.
HTML
<div id="basic-event">
<button @click="counter += 1">Add 1</button>
<p>The button above has been clicked {{ counter }} times.</p>
</div>
JavaScript
Vue.createApp({
data() {
return {
counter: 1
}
}
}).mount('#basic-event')
위 코드를 살펴보면 div요소가 하나 있고 그 안에 버튼이 하나 p태그가 하나 있는데 버튼에 이벤트 핸들링으로 클릭을 연결해서 해당하는 버튼을 클릭하게되면 "counter"라는 데이터에 숫자 데이터 1을 더해서 다시 할당하는 ( +=) 그런 구조의 코드이다. 그리고 아래 js 코드에서 counter라는 데이터에 숫자 데이터 1로 만들어져있다. 그래서 우리가 버튼을 클릭할 때 마다 counter라는 데이터가 1씩 증가하게 되는 것이다. 이처럼 우리는 화면에 있는 데이터를 Vue.js를 통해서 손쉽게 연결할 수 있다.


패스트캠퍼스 [직장인 실무교육]
프로그래밍, 영상편집, UX/UI, 마케팅, 데이터 분석, 엑셀강의, The RED, 국비지원, 기업교육, 서비스 제공.
fastcampus.co.kr
본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는프론트엔드개발초격차패키지online