v-bind 与 b-model 的异同

一、相同点：两者都能实现数据绑定

1、v-bind

v-bind 简写为英文的冒号 :，它的用法是后面加冒号，跟上html元素的attributions，例如

<p v-bind:class="myclass">

解读：以上代码如果不加 v-bin: 这这个p标签有一个类叫myclass，没有任何数据参与进来。当加上v-bind:之后，就不一样了。它的值classed不是字符串，而是vue实例对应的data.classed的这个变量。也就是说data.classed是什么值，它就会给class属性传递什么值，当data.classed发生变化的时候，class属性也发生变化，这非常适合用在通过css来实现动画效果的场合。除了class，其他大部分html原始的属性都可以通过这种方式来绑定，而且为了方便，它可以直接缩写成冒号形式，

var app = Vue({
  el: '#app',
  template: '<img :src="src">',
  data: {
    src: '',
  },
  beforeMount() {
    fetch(...).then(...).then(res => this.src = res.src) // 这里修改了data.src
  },
})

上面这段代码中，默认情况下data.src是空字符串，也就说不会有图片显示出来，但是当从远端获取到图片地址之后，更新了data.src，图片就会显示出来了。

2、v-model

v-model主要是用在表单元素中，它实现了双向绑定。双向绑定大家都非常熟了，简单的说就是默认情况下，它跟上面两种情况的数据绑定是一样的，实例的data.name发生变化的时候，对应的试图中也会发生变化。但是v-model绑定后，它还会反过来，在input中手动输入新的内容，会反过来修改data.name的值，如果在视图中其他地方使用到了data.name，那么这个地方就会因为data.name的变化而变化，从而实现关联动态效果。

var app = Vue({
  el: '#app',
  template: '<label><input v-model="name">{{name}}</label>',
  data: {
    name: '',
  },
})

上面<input>中绑定了name，那么当input的value发生变化时，data.name就会跟着发生变化，而data.name变化了{{name}}的地方也会跟着变化。

v-model是一种双向绑定，那么也就是说，你绑定的元素得有机会改变值。所以实际上v-model基本上只会用在input, textarea, select这些表单元素上。

不同点：

1. v-bind是数据绑定，没有双向绑定效果，但不一定在表单元素上使用，任何有效元素上都可以使用；
2. v-model是双向绑定，基本上只用在表单元素上；
3. 当v-bind和v-model同时用在一个元素上时，它们各自的作用没变，但v-model优先级更高，而且需区分这个元素是单个的还是一组出现的。

参考文档：vue中v-model和v-bind绑定数据的异同