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 ,形参才会是事件对象
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+ 也支持单字母按键别名。