v-for 와 변수 in Array반복문

• v-땡땡 이후 코드는 javascript라고 생각하면 쓰면 된다.

• 여기선 v-for라는 것으로 반복문을 사용하려 한다.

• v-on:은 @으로 대체 가능하다.

• @event.prevent 로 preventDefault() 대체 가능하다.

  변경사항이 생길 때 마다 build를 새로 해줘야 하는 번거로움이 있다.
  이를 해소하기 위해서는

  <template>
    <div>
        <h1>{{result}}</h1>
        <form v-on:submit="onSubmitForm">
            <input ref="answer" minlength="4" maxlength="4" v-model="value />
            <button type="submit">입력</buton>
        </form>
        <div>시도: {{tries.length}}</div>
        <ul>
            <li v-for="tried in tries">
                <div>{{tried.try}}</div>
                <div>{{tried.result}}</div>
            </li>
        </ul>
    </div>
  </template>
  <script>
    export default {
        data() {
            return {
                tries: [],
                value: '',
                result: ''
            }
        },
        methods: {
            onSubmitForm(e) {
                e.preventDefault();
                this.tries.push({
                    try: this.value,
                    result: '홈런'
                });
                this.value = '';
                this.$refs.answer.focus();
            }
        }
    }
  </script>