럿고의 개발 노트

[인프런] 웹 게임을 만들며 배우는 Vue - 2. 구구단 본문

Vue.js Note/[인프런] 웹 게임을 만들며 배우는 Vue(동영상 강의)

[인프런] 웹 게임을 만들며 배우는 Vue - 2. 구구단

KimSeYun 2019. 11. 8. 12:37

[인프런] 웹 게임을 만들며 배우는 Vue

2. 구구단

2.1. 컴포넌트의 필요성

2.2. 컴포넌트의 특성

2.3. props와 웹팩의 필요성


- 예제(웹 게임)을 통해 Vue를 만나는 시간으로, 예제를 풀면서 주석으로 배운 내용과 알아야 할 내용을 최대한 적어 놓았습니다. 코드와 주석을 참고해주세요!

[끝말잇기] -> 컴포넌트를 이용하여 한 페이지의 끝말잇기 여러개 넣기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<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>
    <!-- Vue.js 추가 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <!-- 내가 끝말잇기를 한페이지에 3개를 만들고 싶다면, 지금 만든 끝말잇기를 다 복사붙여넣기 해서 
    만들어야 하는데, 코드가 지저분하고 data도 각각에 맞춰서 methods도 각각의 맞춰서 만들어줘야한다.(그냥 복사하면 데이터는 서로 공유하기 때문에) -->
    <!-- 그래서 반복되는 부분을 컴포넌트로 만들게 되면 데이터나 메소드를 각각 다 만들어 줄 필요가 없다. -->
    <div id="root">
        <!-- 끝말잇기 3개 만들기 -->
        <word-relay start-word ="제로초"></word-relay> <!--startWord는 Props -->
        <word-relay start-word="초밥"></word-relay>
        <word-relay start-word="바보"></word-relay>
    </div>
    <script>
        // Vue 컴포넌트, 컴포넌트는 인스턴스보다 위에 있어야 함! 
        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>
        `, // ES6는 '', "", `` 이렇게 3개가 문자열로 인식 / 컴포넌트의 템플릿은 최상위 부모가 있어야한다. 즉, 여러개의 태그를 하나의 태그로 다 감싸야 한다.
        props: ['start-word'], // 달라지는 부분은 여기에 적으면 됨
        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>
        // Vue 인스턴스
        const app = new Vue({
            el: "#root",
        })
    </script>
</body>
</html>
cs
d


깃허브 주소

https://github.com/ksy90101/Vue.js/tree/master/vue-Webgame-inflearn/Chapter02

출처

https://www.inflearn.com/course/web-game-vue/dashboard

저작자표시 비영리

'Vue.js Note > [인프런] 웹 게임을 만들며 배우는 Vue(동영상 강의)' 카테고리의 다른 글

[인프런] 웹 게임을 만들며 배우는 Vue 6. 로또 추점기  (0) 2019.11.14
[인프런] 웹 게임을 만들며 배우는 Vue 5. 가위바위보  (0) 2019.11.14
[인프런] 웹 게임을 만들며 배우는 Vue 4. 반응속도체크  (0) 2019.11.12
[인프런] 웹 게임을 만들며 배우는 Vue - 3. 숫자야구  (0) 2019.11.11
[인프런] 웹 게임을 만들며 배우는 Vue - 1. 끝말잇기  (0) 2019.11.07
'Vue.js Note/[인프런] 웹 게임을 만들며 배우는 Vue(동영상 강의)' Related Articles more
Comments