[Vue-Django] v-model

        <div class="inputBox">
            <input class="name" type="text" placeholder="name ..." v-model="name">
            <input class="item" type="text" placeholder="type anything welcomed ..." v-model="newTodoItem">
            <button v-on:click="add_todo()">ADD</button>
        </div>
    
        <ul class="todoList">
            <li v-for="(todo, index) in todoItems">
                <span>{{ todo.name }}:: {{ todo.item }}</span>
                <span class="removeBtn">&#x00D7</span>
            </li>
        </ul>

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                name: '',
                newTodoItem: '',
                todoItems:[
                    {name: '김석훈', item: 'Django 와 Vue.js 연동 프로그램을 만들고 있습니다.'},
                    {name: '홍길동', item: '이름을 안쓰면 홍길동으로 나와요...'},
                    {name: '이순신', item: '신에게는 아직 열두 척의 배가 있사옵니다.'},
                    {name: '성춘향', item: '그네 타기'},                    
                ],
            },
            methods: {
                add_todo: function() {
                    console.log("add_todo()...");
                    this.todoItems.push({name: this.name, item: this.newTodoItem});
                }
            },
        })
    </script>

• v-model로 binding 시, Vue 객체의 data와 양방향성으로 바인딩 된다. 즉, 브라우저에서 입력 후 추가 시에도 객체에 영향을 끼치고, Vue 객체에서 data 변경이 이뤄져도 브라우저에 반영된다는 것이다.