清澈的风

vue2.0笔记(二)——事件

v-on

v-on用于事件绑定，v-on:冒号后面可以加任意的原生js事件如click/mouseover/dblclick等,v-on:的简写是@,如v-on:click='show()'可以简写为@click='show()'
除了方法名外，也可以直接写脚本语句如@click="alert(1)"

点击添加列表条目

1
2
3
4
5
6
<div id="app">
    <ul>
        <li v-for="item in arr">{{item}}</li>
    </ul>
    <button @click="add()">add One</button>
</div>

点击时的add方法必须写在methods里

1
2
3
4
5
6
7
8
9
10
11
var app = new Vue({
            el: "#app",
            data: {
                arr: ['apple', 'pear', 'grape']
            },
            methods: {
                add: function () {
                    this.arr.push('strawberry')
                }
            }
        })

除了鼠标事件之外，也可用于键盘事件如keydown/keyup,在键盘事件的基础上可以添加keyCode来绑定确定的键盘事件,常用的如up,down,left,right,enter,delete

回车添加条目，delete键删除条目

1
<input type="text" @keydown.enter="add()" @keydown.delete="minus()">add One</input>

1
2
3
4
5
6
7
8
methods: {
           add: function () {
                   this.arr.push('strawberry')
               },
           minus:function () {
                   this.arr.pop();
               }
           }

确定键入的keyCode

1
2
<input type="text" @keydown="showCode($event)">
<p>你键入的keyCode 是{{myKeyCode}}</p>

1
2
3
4
5
6
data: {myKeyCode:''},
methods:{
    showCode:function ($event) {
        this.myKeyCode=$event.keyCode;
            }
        }

$event可以写成event,但写e就会报错

阻止事件冒泡
用修饰符.stop

1
2
3
<div id="app" @click="show($event)">
    <div @click.stop="show($event)">click</div>
</div>

1
2
3
4
5
6
methods:{
    show:function ($event) {
        alert($event.clientY);
        //$event.cancelBubble=true;
        }
    }

也可以使用$event.cancelBubble=true;来阻止事件冒泡

阻止默认行为
用修饰符.prevent

1
<div @contextmenu.prevent="show($event)">右键获取目前clientX</div>

1
2
3
4
show:function ($event) {
        alert($event.clientX);
        //$event.preventDefault();
    }

也可以使用$event.preventDefault()来阻止如出现右键菜单等这样的默认事件

vuev-on