v-model与v-bind区分

在使用两者的时候，出现了混乱，自我感觉绑定了数据，却拿不到，后来发现是用混了v-model与v-bind

 

v-model  本质是语法糖，负责监听用户的输入事件以更新数据，会忽略所有表单元素的特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件data的选项中声明初始值，这一点很重要 。注意值的类型。

v-bind  是后面加冒号，跟上html元素的属性，不加v-bind，原来的属性就是常量，加了v-bind就是vue实例对应的变量。

有一些情况我们需要 v-bind 和 v-model 一起使用：

<input :value="name" v-model="body">

v-bind 产生的效果不含有双向绑定，所以 :value 的效果就是让 input的value属性值等于 data.name 的值，而 v-model 的效果是使input和 data.body 建立双向绑定，因此首先 data.body 的值会给input的value属性，其次，当input中输入的值发生变化的时候，data.body 还会跟着改变。
 

<input v-model="message">
<input v-bind:value="message" v-on:input="message = $event.target.value" />

那么 v-model 其实就是 v-bind 和 v-on 的语法糖，所以上面两句相等。

相关链接
https://blog.csdn.net/transformer_wsz/article/details/80245962