v-model是双向数据绑定吗?

相信很多小伙伴都被w-model的名字"双向数据绑定"给糊弄了,其实v-model是单向数据绑定的,只是一个伪双向绑定,先来了解下v-on,v-bind,v-model的作用

v-on

v-on是用来绑定事件的，比如给按钮添加点击事件，我们可以写成v-on:click=‘handle’，也可以简写为@click=‘handle’

v-bind

v-bind用来绑定文本或属性，绑定文本跟v-text差不多，能够绑定的属性有html中的属性、css的样式、对象、数组、number 类型、boolean类型。
v-bind是单向绑定，它在绑定文本时，当data中的数据发生变化时，页面中的数据也相应改变，但页面中的数据改变不会影响到data。

v-model

v-model实现了页面中的数据与data中的数据同步变化，通常用来给表单添加绑定。

通过v-on,v-bind来实现表单数据绑定

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

        })
</script>

通过v-model实现数据绑定

<div id='app'>
	 <div>{{msg}}</div>
     <input type="text" v-model="msg">
<div>
<script>
	 var vm = new Vue({
            el:'#app',
            data:{
                msg:'hello'
            },
        })
</script>

通俗点来讲v-on,v-bind其实是由data数据来改变view视图,v-model恰好相反,它是由view视图来改变data数据的,v-model只是通过v-on,v-bind实现的语法糖,其实是一个单向数据绑定,也可以说是伪双向绑定.