웹게임으로 배우는 vue 1

웹게임으로 배우는 vue 구구단

좋아요 버튼

코드

<div id="root">
    <!-- liked가 true(v-if="liked")이면 해당 div를 노출해라. -->
    <div v-if="liked">좋아요를 눌렀습니다!</div> 

    <!-- 아니면(v-else) 해당 button를 노출해라. -->
    <button v-else v-on:click="onClickButton">좋아요</button>
</div>
</body>
<script>
    const app = new Vue({
        el: '#root',
        data: {
            liked: false,
        },
        methods: {
            onClickButton() {
                this.liked = true;
            },
        },
    });
</script>

• 데이터만 변경하면 화면은 vue가 알아서 관리한다.
• el, data, methods등을 제외하고 안에 존재하는 관리 대상의 네이밍은 변경 가능하다.
• v-if, v-else-if, v-else: 형제 태그이면서 인접해야 한다.
• v 속성 안에는 자바 스크립트 식도 가능하다.
  • v-if="liked + 1 === 5"

구구단

코드

<div id="root">
    <div>{{first}}곱하기 {{second}}는?</div>
    <form v-on:submit="onSubmitForm">
        <input type="number" ref="answer" v-model="value">
        <button type="submit">입력</button>
    </form>
    <div id="result">{{result}}</div>
</div>
<script>
    const app = new Vue({
        el: '#root',
        data: {
            first: Math.ceil(Math.random() * 9),
            second: Math.ceil(Math.random() * 9),
            value: '',
            result: '',
        },
        methods: {
            onSubmitForm(e) {
                e.preventDefault();
                // input으로 값을 받아와서 문자열이 되기 때문에 형변환이 필요하다.
                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();
                } else {
                    this.result = '땡';
                    this.value = '';
                    this.$refs.answer.focus();
                }
            },
        },
    });
</script>

• 중괄호를 두번 감싸 데이터를 렌더링할 수 있다.
  • {{ first }} / {{ first + second }}
• v-model: 폼에 입력한 값을 뷰 인스턴스의 데이터와 즉시 동기화한다.
• $refs로 돔에 접근할 수 있다. 남용하는 것은 좋지 않다.

끝말잇기

코드

<div id="root">
    <word-relay start-word="엠제이"></word-relay>
    <word-relay start-word="이발소"></word-relay>
    <word-relay start-word="소리"></word-relay>
</div>
<script>
    Vue.component('wordRelay', { // 전역 컴포넌트
        template: `
        <div>
            <div>{{word}}</div>
            <form v-on:submit="onSubmitForm">
                <input type="text" ref="answer" v-model="value">
                <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>

• 컴포넌트는 여러번 사용되는 것을 전제로 하고 있다.
• 새로운 객체를 만들어서 리턴한다.
• template은 하나의 태그로 감싸주어야 한다.
• 컴포넌트는 인스턴스보다는 위에, 스크립트는 div#root보다는 아래에 위치되어야 한다.

---

REFERENCE
인프런 온라인 강의 웹게임으로 배우는 vue _ 조현영 강사님