事件绑定

  1. 使用v-on来绑定事件,也可以使用简写方法,例如v-on:click可以直接写成@click。

    <button @click="n">1.点击获取名字</button>

  2. 事件的方法是写到实例对象的mothds对象中。

    例如:
    methods:{
       fun1(){
          alert("事件触发了");
       },
    }

  3. 在方法中不能使用箭头函数,否则this的指向将不会当前的实例对象,而是window。

  4. 可以写成@click或者@click(实参),如果需要传参就写第二种。

  5. 事件修饰符: (1).prevent:阻止默认事件,例如可以阻止a标签的跳转 (2).stop:阻止事件的冒泡 (3).capture:使用事件捕获的方式获取数据 (4).once:事件只能触发一次 (5).self:只有event.target是当前操作的元素时才触发事件 (6).passive:使事件立即执行,不用等待事件回调函数执行完毕

    例如:
    <a href="http://www.baidu.com" @click.prevent="fun1">百度</a> //会阻止a标签的默认跳转

  6. 键盘事件: (1).使用键盘别名的方式:例如 @keydown.enter,这里就是按下回车键触发的事件,可以使用keydown或者keyup都行。

    例如:
    <input type="text" placeholder="按下回车键确认输入" @keydown.tab="fun1">

    (2)要注意特别的按键,比如系统修饰键:ctrl、alt、shift、win键等,都只用在keydown的情况下才能正常触发,在使用keyup的时候需要按下的同时在按下其他键,然后在松开其他键,事件才能出触发。 (3).使用键码的去指定按键,例如回车键的键码是13,我们可以用@keydown.13的方法去使用。

    例如:
    <input type="text" placeholder="按下键盘确认输入" @keydown.13="fun1">

    (4).自定义按键别名,在script中写入:Vue.config.keyCodes.自定义别名=键码,这样就可以使用自定义的别名了。

    例如:
    Vue.config.keyCodes.hhh=13

Logo

前往低代码交流专区

更多推荐