vue基础——事件的绑定

    科技2022-07-10  129

    事件的绑定

    1.v-on : 用于绑定事件

    <div class="app"> <button v-on:click="myclick">click me</button> </div>

    注意:click为点击事件,myclick是一个方法,可以写成myclick(),如没有参数也可以写成myclick,该方法定义在vue实例的methods里;

    var app = new Vue({ el:'.app', data:{ }, methods:{ myclick:function(){ console.log(111111); } } });

    2.v-on:click还可以简写成@click 例如:

    <button v-on:click="myclick">click me</button>

    <button @click="myclick">click me</button>

    效果相同;

    3.可以绑定多个事件

    <button v-on="{mouseenter:onEnter,mouseout:onOut}" @click="onClick">点击</button>

    当绑定多个事件时,需要传入一个对象,对象的键名就是事件名,对象的键值就是对应事件要执行的方法。

    4.事件绑定类型

    鼠标事件:

    click 单击 dblclick 双击 mousedown 鼠标按下 mouseup 鼠标抬起 mouseover 鼠标移入 mouseout 鼠标移出 mousemove 鼠标移动 不停的触发(只要相对移动了) mouseenter 鼠标移入 mouseleave 鼠标移出

    键盘事件:

    keydown 键盘按下(如果按住不放,不停的重复触发) keyup 键盘抬起 keypress 键盘按下(只支持字符键)
    Processed: 0.032, SQL: 8