검색결과 리스트
글
[인프런] 웹 게임을 만들며 배우는 Vue 2
웹/Vue.js
2024. 1. 24. 23:48
인프런 프론트엔드 강의 2일차.
웹 게임을 만들며 배우는 Vue 1
Vue로 간단한 웹게임 만들어보기.
1일차는 섹션 0. 강좌소개 수강 (24.01.23 완료)
2일차는 섹션 1. 끝말잇기 수강
1. 끝말잇기 (강좌소개에서 했던 간단한 끝말잇기를 Component를 사용해서 구현)
<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">
<!-- props를 사용해 component 생성 때 파라미터를 넘겨서 설정이 가능하다 -->
<word-relay start-Word="초밥"></word-relay>
<word-relay start-Word="순두부찌개"></word-relay>
<word-relay start-Word="돈까스"></word-relay>
</div>
</body>
<script>
Vue.component("word-relay", {
template: `
<div>
<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>
`,
props: ["startWord"],
data() {
return { word: this.startWord, 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>
<script>
const app = new Vue({
el: "#root",
});
</script>
</html>
'웹 > Vue.js' 카테고리의 다른 글
| [인프런] 웹 게임을 만들며 배우는 Vue 3 (122) | 2024.01.30 |
|---|---|
| [인프런] 웹 게임을 만들며 배우는 Vue 1 (132) | 2024.01.23 |
| Vue2 vs Vue3 차이점 (118) | 2024.01.14 |
| [CodingApple] Vue 로 만드는 웹앱 3 (104) | 2024.01.12 |
| [CodingApple] Vue 로 만드는 웹앱 2 (98) | 2024.01.11 |
