전체 글 (444) 썸네일형 리스트형 hands on vue - 몬스터 게임 heal, battle log 남기기 Monster Slayer Monster Health Your Health {{resultMsg}} ATTACK SPECIAL ATTACK HEAL SURRENDER New Game Start Battle Log {{log.who}} - {{log.whom}} - {{log.how}} {{log.who}} - {{log.whom}} - {{log.how}} {{log.who}} - {{log.whom}} - {{log.how}} const app = Vue.createApp({ data: function(){ return{ userHealth: 100, monsterHealth: 100, round: 0, resultMsg: null, battleLog: [], } }, methods: { attackM.. hands on vue - 게임만들기 2 1. Special Attack은 3라운드 마다 쓸 수 있다. v-bind:diabled 속성을 이용하여 3라운드마다 쓸 수 있게 하여라 수정 전 Monster Slayer Monster Health Your Health ATTACK SPECIAL ATTACK HEAL SURRENDER Battle Log const app = Vue.createApp({ data: function(){ return{ userHealth: 100, monsterHealth: 100, round: 0, } }, methods: { attackMonster(){ this.round ++; const attackValue = Math.random() * 10; this.monsterHealth -= attackValue; if.. hands on vue - monster slayer 미니게임 만들기 Monster Slayer Monster Health Your Health ATTACK SPECIAL ATTACK HEAL SURRENDER Battle Log const app = Vue.createApp({ data: function(){ return{ userHealth: 100, monsterHealth: 100, } }, methods: { attackMonster(){ const attackValue = Math.random() * 10; this.monsterHealth -= attackValue; if(this.monsterHealth < 0){ this.monsterHealth = 0; } this.attackUser(); }, attackUser(){ const attackValue =.. hands on vue - for 1. v-for를 이용하여 배열의 index, value를 출력하라 const app = Vue.createApp({ data() { return { goals: [], inputGoal: '', }; }, methods: { addGoal(){ this.goals.push(this.inputGoal); } } }); app.mount('#user-goals'); Vue Course Goals My course goals Add Goal No goals have been added yet - please start adding some! {{goal}} - {{index}} const app = Vue.createApp({ data() { return { goals: [], inputGoal: '', g.. hands on vue - class들을 배열로 적용하기 1. 박스 세개를 생성한후 클릭시 색상이 변경되고 한번 더 클릭시 돌아오는 토클 기능 Vue Dynamic Styling //이부분에서 class 적용을 배열로 함 const app = Vue.createApp({ data: function(){ return{ boxASelected: false, boxBSelected: false, boxCSelected: false, } }, methods: { selectedBox(box){ console.log('boxboxbox'); console.log(box); if(box === 'A') { this.boxASelected = !this.boxASelected; } else if(box === 'B') { this.boxBSelected = !this.bo.. hands on vue - 선택에 따른 class를 method로 구현 1. 박스 세개를 생성한다 -> 클릭한 박스 색상이 변경되는 기능 추가 -> 다시 누르면 원래대로 돌아가는 토글기능 추가 클래스 추가시 Vue 메소드로 구현한다. const app = Vue.createApp({ data: function(){ return{ boxASelected: false, boxBSelected: false, boxCSelected: false, } }, methods: { selectedBox(box){ console.log('boxboxbox'); console.log(box); if(box === 'A') { this.boxASelected = !this.boxASelected; } else if(box === 'B') { this.boxBSelected = !this.box.. hands on vue - 선택에 따른 class 추가 [Lesson 34] 1. 박스 세개를 만들고 클릭했을 때 "active"라는 클래스를 추가하여 색상을 변경하라 변경된 색상의 박스를 한번 더 클릭하면 원래 색상으로 돌아가는 토글 기능을 생성하라 .active{ border-color: red; background-color: salmon; } Vue Dynamic Styling const app = Vue.createApp({ data: function(){ return{ boxASelected: false, boxBSelected: false, boxCSelected: false, } }, methods: { selectedBox(box){ console.log('boxboxbox'); console.log(box); if(box === 'A') {.. hands on vue - computed & watcher computed: just for calculate data watcher: keep watching data changing ex) computed -> 성, 이름을 input 칸에 넣어서 출력값을 원하는 경우 watcher -> 숫자가 일정 한계를 넘을 경우 리셋, 시간 안에 목적지 가는 게임일 경우 시간이 다된다면 캐릭터를 처음 위치로 옮기기. 테스트 코드) 1. count를 10씩 더하는 기능을 만들고 50이상일 경우 count를 0으로 만들기. 2. 성, 이름을 넣는 칸을 만든다. 이름을 합하여 보여주는 박스를 만든다. computed를 이용해 합한 이름을 보여준다. watch의 메소드명은 변수명과 동일하게 사용한다. 이전 1 ··· 49 50 51 52 53 54 55 56 다음
