보간법과 v-model

intro에서 기록한 내용을 간단히 되짚어보면,
Vue 생성자 내에서 data라는 kew 값에는,
무언가 변하게 될 값이라고 예상되는 것들을 정의하였다.

화면 상에서 유동적으로 변화가 생기는 부분은, data 중심적으로 구조를 설계하여 관리해야 하는 것이다.

• 태그 안에 {{변수명 in data 객체}}의 형태로 data의 특정 값을 부를 수 있다

• {{}} 내부에서 javascript 사칙연산을 실행할 수 있다

• methods 내에서는 this로 data에 접근 가능하다

• input과 data 내 값을 이어주는 건 v-model로

  ex) data : {value: ''}일 떄, v-model = 'value'로 하면 input 값이 data의 value에 접근(삽입) 가능

<div id="root">
    <div> {{first}} 곱하기 {{second}}는?</div>        
    <form>
        <input type="number" v-model="value">
        <button>입력</button>
    </form>
    <div id="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: {
            a() {
                this.first
            }
        }
    })
</script>