vue 事件
<button id="btn" v-on:click="showT">点击我</button>
<script type="text/javascript">
new Vue({
el : '#btn',
methods : {
showT : function (e) {
console.log(e)
alert('hello,world')
}
}
})
</script>
绑定事件的两种写法：
1.
直接写一个函数 showT
v-on:click = 'showT'
那么输出的 e 就是事件对象
2.
写一个函数执行的模式 showT()
v-on:click = 'showT()'
那么 e 指向的是 undefined
必须 传参 $event ，形参才会是事件对象
扫描二维码关注公众号，回复：
1721051 查看本文章
v-on:click = 'showT($event)'
事件修饰符
在事件处理器中经常需要调用 event.preventDefault() 或 event.stopPropagation()。尽管我们在方法内可以轻松做到，不过让方法是纯粹的数据逻辑而不处理 DOM 事件细节会更好。
为了解决这个问题，Vue.js 为 v-on 提供两个 事件修饰符：.prevent 与 .stop。你是否还记得修饰符是点号打头的指令后缀？
<!-- 阻止单击事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修饰符可以串联 --> <a v-on:click.stop.prevent="doThat"> <!-- 只有修饰符 --> <form v-on:submit.prevent></form>
1.0.16 添加了两个额外的修饰符：
<!-- 添加事件侦听器时使用 capture 模式 --> <div v-on:click.capture="doThis">...</div> <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 --> <div v-on:click.self="doThat">...</div>
按键修饰符
在监听键盘事件时，我们经常需要检测 keyCode。Vue.js 允许为 v-on 添加按键修饰符：
<!-- 只有在 keyCode 是 13 时调用 vm.submit() --> <input v-on:keyup.13="submit">
记住所有的 keyCode 比较困难，Vue.js 为最常用的按键提供别名：
<!-- 同上 --> <input v-on:keyup.enter="submit"> <!-- 缩写语法 --> <input @keyup.enter="submit">
全部的按键别名：
- enter
- delete
- esc
- space
- left
- right
- tab 和 shift 和 ctrl 都必须跟一个字符键才可以触发事件
双节也可以触发 ctrl 键注册的事件，
另外 1.0.8+ 也支持单字母按键别名。