Vue中的v-model、v-bind、v-on区别与联系

v-on
v-on是用来绑定事件的，比如给按钮添加点击事件，我们可以写成v-on:click='handle'，也可以简写为@click='handle'。
v-bind
v-bind用来绑定文本或属性，绑定文本跟v-text差不多，能够绑定的属性有html中的属性、css的样式、对象、数组、number 类型、bool类型。
v-bind是单向绑定，它在绑定文本时，当data中的数据发生变化时，页面中的数据也相应改变，但页面中的数据改变不会影响到data。
v-model
实现了数据的双向绑定，页面中的数据与data中的数据是同步变化的，通常用来给表单添加绑定。

利用v-on和v-bind实现v-model

    <div id="app">
        <div>{{msg}}</div>
        <input type="text" v-bind:value="msg" v-on:input="handle">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                msg:'hello'
            },
            methods:{
                handle:function(event){
                    this.msg=event.target.value
                    // console.log(this.msg)
                }
            }

        })

也可以简写为：

    <div id="app">
        <div>{{msg}}</div>
        <input type="text" v-bind:value="msg" v-on:input="msg=$event.target.value">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                msg:'hello'
            }
        })

v-model的底层原理就是利用v-bind绑定值，利用v-on绑定事件，实现双向绑定。