Front-End/vue
[vue] v-model, v-on:submit, ref
찐코딩
2022. 12. 12. 21:36
해당 포스팅은 인프런 웹 게임을 만들며 배우는 Vue 강의를 참고하여 작성하였습니다.
https://www.inflearn.com/course/web-game-vue
[무료] 웹 게임을 만들며 배우는 Vue - 인프런 | 강의
간단한 8가지 웹 게임을 만들며 Vue.js와 Vue와 함께 사용되는 Vuex, Vue Router를 배워봅니다., - 강의 소개 | 인프런...
www.inflearn.com
📑 todo
랜덤으로 숫자 2개를 불러와서 사용자에게 구구단을 시키고,
맞으면 '딩동댕' 틀리면 '땡'을 외치는 게임,
단, 맞으면 새로운 문제를 출제하고 틀리면 맞출때까지 문제 출제 X
<!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">
<!-- vue 최신 버전 불러오기 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>구구단</title>
</head>
<body>
<div id="root">
<div>{{ first }}곱하기 {{ second }}는?</div>
<form v-on:submit="onSubmitForm">
<input type="number" v-model="value" ref="answer">
<button type="submit">입력</button>
</form>
<div id="result">{{ result }}</div>
</div>
</body>
<script>
const app = new Vue({
el: '#root',
data: {
first: Math.ceil(Math.random() * 9),
second: Math.ceil(Math.random() * 9),
value: '',
result: '',
},
methods: {
onSubmitForm(e) {
//e.preventDefault을 하지 않으면 페이지가 새로고침 된다.
e.preventDefault();
if (this.first * this.second === parseInt(this.value)) {
this.result = "정답";
this.first = Math.ceil(Math.random() * 9);
this.second = Math.ceil(Math.random() * 9);
} else {
this.result = "땡";
}
this.value = "";
this.$refs.answer.focus();
},
}
});
</script>
</html>
📌 v-model
input(해당 태그)의 value와 vue의 value를 동기화
이를 통해 해당 div 안에서는 생성된 Vue 인스턴스를 사용할 수 있지만, 해당 div 밖에서는 사용할 수 없음
📌 ref
직접 해당 태그에 접근해야 될 때 사용
단, 과도하게 사용하는 것은 자제..꼭 필요한 경우에만 사용한다 (*ref로 데이터를 직접 제어하는 것은 자제)
해당 코드에서는 폼 제출 완료 시 다시 input 값에 포커싱이 되도록 사용했다
📌 v-on:submit
폼 제출시 사용(click 쓸 수도 있긴 한데 form이라 보통 submit 씀)
v-on:click과 마찬가지로 v-on:submit 대신 @submit을 써줘도 됨