반응형
vue에서 v-on핸들링은 javascript에서 onclick과 동일한 기능할 합니다.
html에서 javascript onclick기능을 구현해보면 아래와 같습니다.
<--! html의 기본 템플릿은 생략하고 body의 내용만을 나타냅니다.-->
<div id="app">
<input type="button" value="버튼을 누르면 알람 메세지가 나타납니다."
onclick="alert('알람메세지입니다.')">
</div>web화면 결과
위의 javascript를 Vue로 바꾸면 다음과 같습니다.이해를 돕기위하여 html부분과 script부분을 분리하여 나타내겠습니다.
##index.html 부분
<div id="app">
<input type="button" value="버튼을 누르면 알람 메세지가 나타납니다." v-on:click="alert">
</div>##javascript 부분
new Vue({
el:'#app',
methods:{
alert(){
return alert('알람메세지입니다');
}
}
})결과는 아래와 같이 동일하게 나타납니다.
위 의 사항을 Vue의 index.html하나의 페이지로 나타내면 다음과 같습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<input type="button" value="버튼을 누르면 알람 메세지가 나타납니다." v-on:click="alert">
</div>
<script>
new Vue({
el:'#app',
methods:{
alert(){
return alert('알람메세지입니다');
}
}
})
</script>
</body>
</html>vue에서는 v-on:click이벤트를 발생시키기 위하여 methods 즉 함수(function)을 호출하여 사용합니다.
즉 Vue의 methods는 javascript의 function과 동일한 기능을 한다고 생각을 하면 됩니다.
반응형
'Vue 2.x version > V-on 과 V-model' 카테고리의 다른 글
| v-model(양방향데이터 바인딩) (0) | 2021.12.23 |
|---|