vue中 v-model 和 :model 的区别

今天在写demo的时候发现一件奇怪的事：

当我在给 input 元素使用 v-model 的缩写形式:model时，想要绑定的数据并没有渲染到浏览器中

 然鹅，改为v-model之后就能成功渲染了

 于是经过我一番研究发现 :model 其实相当于v-bind:model的缩写，对于我想要绑定的 input 的值应该使用 v-bind:value，所以如果在 input 元素上想要使用缩写形式应该是:value，经过我的试验发现这种缩写形式确实是可行的，数据可以成功渲染到浏览器

v-model:

v-model 是 v-model:value 的缩写，通常用于表单上的双向数据绑定（表单接受值 value，故v-model默认收集的就是 value ，所以缩写直接省略 value），可以实现子组件到父组件的双向数据动态绑定。数据不仅能从data流向页面，还可以从页面流向data。

:model:

:model 是 v-bind:model 的缩写，可以实现将父组件的值传递给子组件，但是子组件不能传给父组件，无法双向绑定。

v-bind:

v-bind:value 可以简写为 :value ，数据只能从data流向页面。