【前端框架学习】v-model与双向数据绑定

v-model是唯一一个能够实现双向数据绑定的指令。

v-bind只能实现数据的单项绑定，从M层自动绑定到v中去，无法实现数据的双向绑定。

    <div id='app'>
        <h4>{{message}}</h4>
        <input type="text" :value="message">
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: ' #app',
            data: {
                message: 'hello,world!'
            },
            methods: {
            }
        }); 
    </script>

使用v-model可以实现数据表单元素和model中数据的双向绑定，其中，v-model只能使用在表单元素中。（将上面的 :value 修改为 v-model:value 就可以实现数据的双向绑定）

<input type="text" v-model:value="message">

表单元素：

表单类型	属性
input	radio
	text
	address
	email
	......
select	......
checkbox	......
textarea	......