一：概述

在vue中，提供了v-前缀的指令，最常用的就是v-model进行双向绑定，那么，v-bind和v-on和他有什么区别？

二：区别

（一）v-model

1：用途：用于在表单控件或者组件上创建双向绑定。v-model默认是绑定在value属性上的

2：代码

 <input type="text" v-model="msg">

3：修饰符：

.lazy--->懒加载方式，不实时更新

.number--->值将被转为数值类型

.trim--->去掉输入内容两端的空格

（二）v-bind

1：用途：用来绑定标签的属性和样式，绑定的内容是作为一个JS变量，因此需要对该内容编写合法的JS表达式

2：代码：

v-bind:href="url"   /  :href="url"
<div :class="{ active: isActive, 'text-danger': hasError }">class</div>
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }">style</div>

3：修饰符：

（三）v-on

1：用途：用于监听DOM事件 v-on:event='xxx' 或简写为 @event = 'xxx'

2：代码：

<input type="button" value="单击我" v-on:click="message">

3：修饰符：

.stop ---> 调用 event.stopPropagation()。

.prevent ---> 调用 event.preventDefault()。

.capture---> 在捕获模式添加事件监听器。

.self ---> 只有事件从元素本身发出才触发处理函数。

.{keyAlias}---> 只在某些按键下触发处理函数。

.once---> 最多触发一次处理函数。

.left--->只在鼠标左键事件触发处理函数。

.right--->只在鼠标右键事件触发处理函数。

.middle---> 只在鼠标中键事件触发处理函数。

.passive ---> 通过 { passive: true } 附加一个 DOM 事件

三：总结

1.v-model用来进行data数据与页面数据的双向绑定。主要用于表单控件，被称为双向绑定

2.v-bind是data数据对页面标签中属性的绑定。被称为单向绑定

3.v-on是methods对页面事件的绑定。