区别
v-bind:属性绑定(简写:), v-on:事件绑定(简写@), v-model:双向绑定
1.v-model用来进行data数据与页面数据的双向绑定。主要用于表单控件，被称为双向绑定
2.v-bind是data数据对页面标签中属性的绑定。被称为单向绑定
3.v-on是methods对页面事件的绑定。

1 .冒号属性

：是指令 v-bind 的缩写，v-bind指令可以用来绑定标签的属性和样式。要绑定的内容是作为一个JS变量，因此只需要对该内容编写合法的JS表达式。
基础的语法格式为：v-bind:属性=“值”。

<h2  v-bind:style="{color:'red'}">这是2号标题</h2>
<h2 :style="{color:'red'}">这是2号标题</h2>

2. @属性

@ 是指令 v-on 的缩写，用来监听DOM事件，比如点击、拖拽、键盘事件等等。
@click 相当于v-on:click，@change相当于v-on:change
@后还可以跟自定义事件，用于子组件向父组件传值。

<button v-on:click="getData()"></button>
<button @click="getData()"></button>

3.v-model

v-model默认是绑定在value属性上的，v-model后面加“:value”也是可以的，即v-model:value，但一般情况下直接写v-model。
因为只有表单元素可以与用户进行交互，所以v-model指令一般只用于表单控件或者是一些组件中。

<input type='text' v-model='message'>

在Vue实例的data数据中 有数据message 当data中的message 有变化时输入框的值变成相应的这个值 当输入框输入值时这里的data也会变 这就实现了数据的双向绑定。