- v-on:click/mouseover......
简写的:
@click="" 推荐
事件对象:
- @click="show($event)"
事件冒泡:
阻止冒泡:
a). ev.cancelBubble=true;
b). @click.stop 推荐
默认行为 (默认事件):
阻止默认行为:
a). ev.preventDefault();
b). @contextmenu.prevent 推荐
键盘:
- @keydown $event ev.keyCode
- @keyup
常用键:
回车
- a). @keyup.13
- b). @keyup.enter
上, 下, 左, 右
- @keyup/keydown.left
- @keyup/keydown.right
- @keyup/keydown.up
- @keyup/keydown.down
- .....
简写的: @click="" 推荐
- <input type="button" value="按钮" v-on:click="show()">
- <input type="button" value="按钮" @click="show()">
事件对象:@click="show($event)"
- Windows.onload=function(){
- new vue({
- el:'#box',
- data:{
- },
- methods:{
- show:function(ev,b){
- alert(ev.clientX);
- alert(b);
- }
- }
- });
- };
- <div id="box">
- <input type="button" value="按钮" @click="show($event,112)">
- </div>
事件冒泡,
阻止冒泡:
- a). ev.cancelBubble=true;
- Windows.onload=function(){
- new Vue({
- el:'#box',
- data:{
- },
- methods:{
- show:function(ev){
- alert(1);
- ev.cancelBubble=true;
- },
- show2:function(){
- alert(2);
- }
- }
- });
- };
- <div id="box">
- <div @click="show2()">
- <input type="button" value="按钮" @click="show($event)">
- </div>
- </div>
b). @click.stop 推荐
- <div id="box">
- <div @click="show2()">
- <input type="button" value="按钮" @click.stop="show()">
- </div>
- </div>
默认行为 (默认事件):
阻止默认行为:
- a). ev.preventDefault();
- Windows.onload=function(){
- new Vue({
- el:'#box',
- data:{
- },
- methods:{
- show:function(ev){
- alert(1);
- ev.preventDefault();// 这里阻止了右击显示菜单的事件
- }
- }
- });
- };
- <div id="box">
- <input type="button" value="按钮" @contextmenu="show($event)">
- </div>
b). @contextmenu.prevent 推荐
- <div id="box">
- <input type="button" value="按钮" @contextmenu.prevent="show()">
- </div>
键盘事件:
- @keydown $event ev.keyCode
- Windows.onload=function(){
- new Vue({
- el:'#box',
- data:{
- },
- methods:{
- show:function(ev){
- alert(ev.keyCode);
- }
- }
- });
- };
- <div id="box">
- <input type="text" @keydown="show($event)">
- </div>
- @keyup
- Windows.onload=function(){
- new Vue({
- el:'#box',
- data:{
- },
- methods:{
- show:function(ev){
- alert(ev.keyCode);
- }
- }
- });
- };
- <div id="box">
- <input type="text" @keyup="show($event)">
- </div>
常用键
:1, 回车
- a). @keyup.13
- b). @keyup.enter
- Windows.onload=function(){
- new Vue({
- el:'#box',
- data:{
- },
- methods:{
- show:function(){
- alert('您按回车了');
- }
- }
- });
- };
- <div id="box">
- <!--<input type="text" @keyup.13="show()">-->
- <input type="text" @keyup.enter="show()">
- </div>
2, 上, 下, 左, 右
- @keyup/keydown.left
- @keyup/keydown.right
- @keyup/keydown.up
- @keyup/keydown.down
- Windows.onload=function(){
- new Vue({
- el:'#box',
- data:{
- },
- methods:{
- show:function(){
- alert("你按了左箭头←");
- }
- }
- });
- };
- <div id="box">
- <input type="text" @keyup.left="show()">
- </div>
最后
为了帮助大家让学习变得轻松, 高效, 给大家免费分享一大批资料, 帮助大家在成为全栈工程师, 乃至架构师的路上披荆斩棘. 在这里给大家推荐一个前端全栈学习交流圈: 866109386. 欢迎大家进群交流讨论, 学习交流, 共同进步.
当真正开始学习的时候难免不知道从哪入手, 导致效率低下影响继续学习的信心.
但最重要的是不知道哪些技术需要重点掌握, 学习时频繁踩坑, 最终浪费大量时间, 所以有有效资源还是很有必要的.
最后祝福所有遇到瓶疾且不知道怎么办的前端程序员们, 祝福大家在往后的工作与面试中一切顺利.
来源: http://www.qdfuns.com/article/51070/3513702d0ef99644d08cfc4c5fca7238.html