검색결과 리스트
글
[인프런] 웹 게임을 만들며 배우는 Vue 1
웹/Vue.js
2024. 1. 23. 22:02
인프런 프론트엔드 강의 1일차.
웹 게임을 만들며 배우는 Vue 1
Vue로 간단한 웹게임 만들어보기.
1일차는 섹션 0 강의 수강
1. 좋아요 버튼
<html>
<head>
<meta charset="UTF-8" />
<meta
viewport="viewport"
content="width=device-width, user-scalable=no,
initial-scale=1.0, maximum-scale=1.0, minumum-scale=1.0"
/>
<title>좋아요</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="root">
<div v-if="liked">좋아요 눌렀음</div>
<button v-else v-on:click="onClickButton">Like</button>
</div>
</body>
<script>
const app = new Vue({
el: "#root",
data: {
liked: false,
},
methods: {
onClickButton() {
this.liked = !this.liked;
},
},
});
</script>
</html>
2. 구구단
<html>
<head>
<meta charset="UTF-8" />
<meta
viewport="viewport"
content="width=device-width, user-scalable=no,
initial-scale=1.0, maximum-scale=1.0, minumum-scale=1.0"
/>
<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">
<input type="number" ref="answer" v-model="value" />
<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(); //새로고침 이벤트 중지
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.value = "";
this.$refs.answer.focus(); //button 클릭하여 submit 시 focus가 없어지므로 button 클릭 후 input 태그에 focus를 줌 (UI/UX 측면)
} else {
this.result = "땡";
this.value = "";
this.$refs.answer.focus(); //button 클릭하여 submit 시 focus가 없어지므로 button 클릭 후 input 태그에 focus를 줌 (UI/UX 측면)
}
},
},
});
</script>
</html>
3. 끝말잇기
<html>
<head>
<meta charset="UTF-8" />
<meta
viewport="viewport"
content="width=device-width, user-scalable=no,
initial-scale=1.0, maximum-scale=1.0, minumum-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>{{word}}</div>
<form v-on:submit="onSubmitForm">
<input type="text" v-model="value" ref="answer" />
<button type="submit">입력!</button>
</form>
<div>{{result}}</div>
</div>
</body>
<script>
const app = new Vue({
el: "#root",
data: {
word: "초밥",
result: "",
value: "",
},
methods: {
onSubmitForm(e) {
e.preventDefault();
if (this.word[this.word.length - 1] === this.value[0]) {
this.result = "딩동댕";
this.word = this.value;
this.value = "";
this.$refs.answer.focus();
} else {
this.result = "땡";
this.value = "";
this.$refs.answer.focus();
}
},
},
});
</script>
</html>
'웹 > Vue.js' 카테고리의 다른 글
| [인프런] 웹 게임을 만들며 배우는 Vue 3 (122) | 2024.01.30 |
|---|---|
| [인프런] 웹 게임을 만들며 배우는 Vue 2 (97) | 2024.01.24 |
| Vue2 vs Vue3 차이점 (118) | 2024.01.14 |
| [CodingApple] Vue 로 만드는 웹앱 3 (104) | 2024.01.12 |
| [CodingApple] Vue 로 만드는 웹앱 2 (98) | 2024.01.11 |
