[Vue] 데이터 양방향 바인딩 (Data Two Way Binding - v-model)

1 데이터 양방향 바인딩

---

텍스트를 입력했을 때 미리보기(양방향 바인딩)

    <div id="app">
        <form v-on:submit.prevent="submit">
            <input type="text" :value="text" @keyup="updateText"><br>
            {{text}}<br>
            <button type="submit">Submit</button>
        </form>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                text:'text',
            },
            methods: {
                submit(){
                    alert('submitted!');
                },
                updateText(event){
                    this.text = event.target.value;
                    console.log(event);
                }
            },
        })
    </script>

결과값 :

 

@keyup 은 v-on:keyup을 골뱅이를 통해 표현할 수 있다.

input 내에서 keyboardevent가 일어나며 console.log를 통해 확인했을 때

target-value 값이 input 안의 내용임을 알 수 있었다.

그래서 text 객체를 event.target.value값과 데이터바인딩을 시켜주면

input에 문자를 쳤을 때

{{text}}의 값이 똑같이 입력되는것을 볼 수 있다.

 

그런데 이러한 양방향 바인딩 과정을 더 쉽게 표현할 수 있다.

 

그것이 바로 v-model...!

 

    <div id="app">
        <form v-on:submit.prevent="submit">
            <!-- <input type="text" :value="text" @keyup="updateText"><br> -->
            <input type="text" v-model="text"><br>
            {{text}}<br>
            <button type="submit">Submit</button>
        </form>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                text:'text',
            },
            methods: {
                submit(){
                    alert('submitted!');
                },
                // updateText(event){
                //     this.text = event.target.value;
                //     console.log(event);
                // }
            },
        })
    </script>

결과값 :