Vue 나 React는 그동안 있던 View 부분과 Data를 따로 관리해서 일치시켜주는게 아닌
Data를 기준으로 View를 그려나간다.
버튼이 눌릴때마다 first, second, value, result 값 4가지가 변동되게 만들었으며
input에 커서를 주기위해서는 data 관리라고 판단하기는 어려워서
$refs를 활용해 직접 접근해서 제어해준다.
($refs를 남발하면 좋지 않으며 특히 데이터관리에 $refs를 활용하면 view부분과 데이터의 일치성이 사라진다)
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>구구단</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="root">
<div>{{first}} 곱하기 {{second}}는?</div>
<form v-on:submit="onSubmitForm">
<!-- v-model을 통해 value에 데이터가 전해진다 -->
<input type="number" ref="answer" v-model="value">
<button type="submit">입력</button>
<!-- <div>{{value}}</div> -->
</form>
<div>{{result}}</div>
</div>
<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();
console.log(this);
console.log(this.first, this.second, this.value);
if (this.first * this.second === parseInt(this.value)) {
this.result = "정답";
this.first = Math.ceil(Math.random() * 9);
this.second = Math.ceil(Math.random() * 9);
this.$refs.answer.focus(); //직접 태그에 접근하기 ref를 남용하는것은 좋지않다.
} else {
this.result = "땡!!";
}
this.value = ""
}
},
});
</script>
</body>
</html>
'Vue > vue 기초 공부하기' 카테고리의 다른 글
| Vue로 아주 간단한 사칙연산 계산기 만들기(기초) (2) | 2020.01.06 |
|---|---|
| vue 기초 - 끝말잇기 만들기 (0) | 2020.01.05 |
| v-if v-else에 대해 공부하기 (0) | 2020.01.05 |
| Vue 컴포넌트 만들기 (0) | 2019.12.22 |
| Vue 기초(cdn 활용및 v-bind, v-if, v-for, v-on, v-model 사용하기 ) (0) | 2019.12.21 |
