럿고의 개발 노트
[인프런] 웹 게임을 만들며 배우는 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
출처
'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 - 2. 구구단 (0) | 2019.11.08 |
Comments