럿고의 개발 노트

[인프런] 웹 게임을 만들며 배우는 Vue - 1. 끝말잇기 본문

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

[인프런] 웹 게임을 만들며 배우는 Vue - 1. 끝말잇기

KimSeYun 2019. 11. 7. 18:33

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

1. 끝말잇기

1.1. 강좌 소개와 맛보기

1.2. data와 v-if, v-else

1.3. 보간법과 v-model

1.4. ref와 구구단 완성하기

1.5. 끝맛잇기 만들며 복습

1.6. Q & A


- 예제(웹 게임)을 통해 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
<!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>
    <div id="root">
        <div v-if="liked">좋아요 눌렀음</div> <!--조건식 = liked의 값에 따라 표현-->
        <button v-else v-on:click="onClickButton">Like</button> <!--methods를 가지고 있음, 조건식 = 위의 조건식 따라감-->
    </div>
</body>
<script>
    const app = new Vue({
        el: "#root"// Vue가 id root를 통제할 수 있도록 하는 것
        data:{ // 데이터가 바뀌면 자동으로 View를 수정해주기 때문에 편함 / 즉, 데이터 관리가 제일 중요
            liked:false,
        },methods: {
            onClickButton(){
                this.liked = true;
            }
        },
    });
</script>
</html>
cs


[구구단] - 구구단 문제가 나오고, 구구단 문제를 맞추면 딩동댕, 틀리면 땡 표시하기

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
<!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>
  <div id="root">
      <div>{{ first }}곱하기 {{ second }}는?</div> <!--{{}} 이 안에는 자바스크립트를 쓸수 있다.(예를 들면 연산)-->
    <form v-on:submit="onSubmitForm"> <!-- onSubmitForm이라는 Method 실행(submit이 되었을때) -->
        <input type="number" v-model="value" ref="answer"> <!-- v-model : input이랑 Vue Data를 연결해줌 -->
        <!--ref : Vue가 부르는 이름을 설정-->
        <button type="submit">입력</button>
    </form>
    <div id="result">{{ result }}</div>
  </div>
</body>
<script>
const app = new Vue({
    el:"#root",
    data:{ // 바뀌는 부분이 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(); // ref가 answer라는 이름을 가지고 있는 곳에 포커스를 두는 것 , ref를 남용하면 안됨.
                // this.$refs.answer.value() = 123 값 자체를 변경해 버리면, data와 뷰에 입력된 값이랑 달라서 문제가 발생할수 있다.
            } else{
                this.result = '땡';
                this.value ='';
                this.$refs.answer.focus();
            }
        },
    },
});
</script>
</html>
cs


[끝말잇기] -> 제로초부터 시작하여 끝말잇기(문제점은 그 단어가 맞는지는 알수 없음!) - 구구단과 동일한 방법이기 때문에, 따로 주석은 추가하지 않겠습니다.

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
<!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>
<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>
<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>
</body>
</html>
cs


깃허브 주소

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


출처

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

Comments