控件与组件的区别_v-bind和v-model的区别

两者都可以用来绑定数据，所以我产生了疑问，那就是这两个有啥区别？

API — Vue.js​cn.vuejs.org

API — Vue.js​cn.vuejs.org

先看v-model

v-model

• 预期：随表单控件类型不同而不同。【意思就是不同的表单控件，绑的值的类型不同】

【只能用在html表单控件上（还有自定义组件），其他组件无效】

• 限制：
  • <input>
  • <select>
  • <textarea>
  • components
• 用法：
  在表单控件或者组件上创建双向绑定。 【v-bind是单向绑定，配合事件也可以实现双向绑定】

单向绑定​www.liaoxuefeng.com

v-bind

• 缩写：:
• 预期：any (with argument) | Object (without argument)
• 参数：attrOrProp (optional)
• 用法：
  动态地绑定一个或多个 attribute，或一个组件 prop 到表达式。【绑的是html元素的属性或者组件的prop，而不是像model那样绑的是表单控件的值】
  在绑定 class 或 style attribute 时，支持其它类型的值，如数组或对象。可以通过下面的教程链接查看详情。
  在绑定 prop 时，prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。
  没有参数时，可以绑定到一个包含键值对的对象。注意此时 class 和 style 绑定不支持数组和对象。