[Vue.js] 기초 - 이벤트 핸들러 / v-on:click / @click

Latest update : 2021.04.20 - 수정 완료

 

---

Vue.js

vue 3 버젼 기준

---

<Vue.js 설치>

• Node.js 설치 (nodejs.org/ko/download/)
• 작업할 폴더에서 npm install -g @vue/cli (or) yarn global add @vue/cli
• (vscode 기준) 에디터 확장 기능 설치 - Vetur / HTML CSS Support /  Vue 3 Snippets
• npm 에러 시 yarn 1.XX 설치 (npm install --global yarn)
• vue create 프로젝트명 -> Default (Vue 3 Preview).. 선택 후 엔터

 

npm install -g @vue/cli

(or)

yarn global add @vue/cli

(and)

// (vscode 기준) 에디터 확장기능 설치 - Vetur / HTML CSS Support /  Vue 3 Snippets
// npm 에러 시 yarn 1.XX 설치 (npm install --global yarn)

vue create 프로젝트명

(and)

Default (Vue 3 Preview).. 선택 후 엔터

설치 완료 후 App.vue에서 작업 진행합니다.

 

---

<Vue.js 문법>

v-on:click ( = @click )

@click 예시

<template>

  <div>
	<button @click="num++">{{ num }}</button>
  </div>
  
</template>

<script>

export default {
  name: 'App',
  data(){
    return {
      // 데이터 보관
      num : 0,
    }
  },
  components: {
  }
}

</script>

 

@click 예시 (함수로 적용)

<template>

  <div>
	<button @click="increase">{{ num }}</button>
  </div>
  
</template>

<script>

export default {
  name: 'App',
  data(){
    return {
      // 데이터 보관
      num : 0,
    }
  },
  methods: {
  	increase(){
    	this.num++; //this 필요
    }
  },
  components: {
  }
}

</script>

 

@event handler

저처럼 유독 궁금해하실 수 있을, 캡처 자료가 필요하실 분들을 위해 준비했습니다.

 

 

abort / blur / canplay / canplaythrough / change / click / contextmenu / dblclick /

drag / dragend / dragenter / dragleave

 

dragover / dragstart / drop / duraionchange / emptied / ended / error / focus / forminput / input / invalid

 

 

keydown / keypress / keyup / load / loadeddata / loadedmetadata / loadstart /

mousedown / mouseenter / mouseleave / mousemove / mouseout

 

 

mouseover / mouseup / mousewheel / pause / play / playing / progress / ratechange / readystatechange /

reset / resize / scroll

 

 

seeked / seeking / select / show / stalled / submit / suspend / timeupdate / volumechange / waiting

 

 

기회가 된다면 이벤트 하나하나 내용도 정리 추가하겠습니다.

 

 

 

공식 문서 : kr.vuejs.org/v2/guide/events.html

이벤트 핸들링 — Vue.js