11-Vue指令之V-on

• v-on 指令用于绑定事件监听器。

• 事件类型由参数指定，表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略

• 使用在普通元素上时，只能监听原生 DOM 事件；使用在自定义元素组件上时，也可以监听子组件触发的自定义事件

• 在监听原生 DOM 事件时，如果只定义一个参数，DOM event 为事件的唯一参数；如果在内联语句处理器中访问原生 DOM 事件，则可以用特殊变量 $event 把它传入方法

• 在监听自定义事件时，内联语句可以访问一个 arguments属性，它是一个数组，包含了传给子组件的emit 回调的参数

<!--方法处理器--><button v-on:click = 'doThis'></button><!--内联语句--><button v-on:click = "doThat('hello',$event)"></button><!--缩写--><button @click = 'doThis'></button>

• v-on 后面不仅可以跟参数，还可以增加修饰符

  • .stop — 调用 event.stopPropagation()
  • .prevent — 调用 event.preventDefault()
  • .capture — 添加事件监听器时使用 capture 模式
  • .self — 只当事件是从监听器绑定的元素本身触发时才触发回调
  • .{ keyCode | keyAlias} — 只在指定按键上触发回调。

  Vue.js 提供的键值有：

 esc:27    tab:9    space:32   delete:[8,46]  up:38     left:37  right:39   down:40

<!--停止冒泡--><button @click.stop = 'doThis'></button><!--阻止默认行为--><button @click.prevent =  'doThis'></button><!--阻止默认行为，没有表达式--><form @submit.prevent></form><!--串联修饰符--><button @click.stop.prevent = 'doThis'></button><!--串联修饰符，键别名--><input @keyup.enter = 'onEnter'><!--键修饰符 键代码--><input @keyup.13 = 'onEnter'>