v-on 핸들링

v-on 핸들링

반응형

vue에서 v-on핸들링은 javascript에서 onclick과 동일한 기능할 합니다.

html에서 javascript onclick기능을 구현해보면 아래와 같습니다.

<--! html의 기본 템플릿은 생략하고 body의 내용만을 나타냅니다.-->

web화면 결과

위의 javascript를 Vue로 바꾸면 다음과 같습니다.이해를 돕기위하여 html부분과 script부분을 분리하여 나타내겠습니다.

##index.html 부분

##javascript 부분

new Vue({ el:'#app', methods:{ alert(){ return alert('알람메세지입니다'); } } })

결과는 아래와 같이 동일하게 나타납니다.

위 의 사항을 Vue의 index.html하나의 페이지로 나타내면 다음과 같습니다.

Document new Vue({ el:'#app', methods:{ alert(){ return alert('알람메세지입니다'); } } })

vue에서는 v-on:click이벤트를 발생시키기 위하여 methods 즉 함수(function)을 호출하여 사용합니다.

즉 Vue의 methods는 javascript의 function과 동일한 기능을 한다고 생각을 하면 됩니다.

반응형

from http://vue-woncoding.tistory.com/5 by ccl(A) rewrite - 2021-12-23 03:01:41