<!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">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{year}} <br>
<button @click="plus">더하기</button> <!--v-on뒤에는 함수가 들어간다.-->
<button v-on:click="minus">빼기</button>
<form v-on:submit.prevent="submit"> <!--이벤트수식어:event.preventDefault or stopPropagatioin-->
<input type="text">
<button type="submit">Submit</button>
</form> <!--form은 submit되면 page가 reload된다. 막아주는것:.prevent-->
</div>
<script>
new Vue({
el: '#app',
data: {
year: 2018,
},
methods: {
alert(){
alert('hi Kossie Coder')
},
plus(){
this.year = this.year + 1;
},
minus(){
this.year = this.year - 1;
},
submit(){
alert('submitted');
console.log('hello');
},
},
})
</script>
</body>
</html>1/ v-on:을 @로 치환 가능.
2/ 이벤트수식어 사용 시, .prevent 이렇게 적으면 된다. submit.prevent로 적으면, Submit 후에도 페이지가 다시 reload되지 않는다.
3/ form태그는 submit시, 페이지가 다시 reload된다. (reload를 막기위해서는 .submit.prevent로 이벤트 수식어 적기.)
페이지가 다시 reload되지 않으면, year와 input에 적은 것들이 submit후에도 변경되지 않는다.
4/ @click 뒤에 함수는 methods라도 ()를 적지 않는다..!
'Vue.js' 카테고리의 다른 글
| Kossie Coder 07. Watch 속성 (0) | 2022.05.15 |
|---|---|
| Kossie Coder 06. Computed 속성 (0) | 2022.05.15 |
| Kossie Coder 05. 데이터 양방향 바인딩(Data Two Way Binding : v-model) (0) | 2022.05.09 |
| Kossie Coder 03. 데이터 바인딩(Data Binding) (0) | 2022.04.28 |
| Kossie Coder 02. 뷰 데이터(data)와 메소드(methods) (0) | 2022.04.28 |
