본문 바로가기

내가 해냄/패스트캠퍼스

패스트캠퍼스 챌린지 41일차 - 한 번에 끝내는 프론트엔드 개발 초격차패키지 online

 

챌린지 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를 통해서 손쉽게 연결할 수 있다. 

 

 

https://bit.ly/37BpXiC

 

패스트캠퍼스 [직장인 실무교육]

프로그래밍, 영상편집, UX/UI, 마케팅, 데이터 분석, 엑셀강의, The RED, 국비지원, 기업교육, 서비스 제공.

fastcampus.co.kr

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.


#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는프론트엔드개발초격차패키지online