vue的一些事件实例教程

零下一度 原创: 2017-06-27 10:27:18 855浏览

vue的事件：

　　　vue事件简写：

　　　　　 vue中事件是 v-on:click=' show()' 但是我嫌弃它写太长每次都要 v-on: 事件

　　　　　 vue中就有事件简写 @click='show()' 这会不会就好点了呢！<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
    <body>
　　　　　<div id="box">
　　         <button v-on:click='show()'>按钮1</button>

　　　　　　　　<button @click='show()'>按钮2</button>     //这俩种方法都可以执行点击的事件，当然所有事件都可以这样简写。

　　　　  </div>
　　　　
        <script src='vue.js'></script>
　　　　　<script>
　　　　　　　new Vue({
　　　　　　　　　　el:'#box',
　　　　　　　　　　data:{},
　　　　　　　　　　methods:{
　　　　　　　　　　　　　show:function(){
　　　　　　　　　　　　　　　　　alert(1)　
　　　　　　　　　　　　  }
　　　　　　　　　　}
　　　　　　　　　　
　　　　　　　});
　　　　　　
　　　　　</script>
    </body>
</html>

　　　vue的事件对象：

　　　　　　vue中当然也有事件对象了，这样@click='show($event)' 在时间函数中传$evevt 函数中接收一下，事件对象就有了。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
    <body>
　　　　　<div id="box">
　　         <button @click='show($event)'>按钮1</button>//传输事件对象
　　　　  </div>
　　　　
        <script src='vue.js'></script>
　　　　　<script>
　　　　　　　new Vue({
　　　　　　　　　　el:'#box',
　　　　　　　　　　data:{},
　　　　　　　　　　methods:{
　　　　　　　　　　　　　show:function(ev){   //接收事件对象
　　　　　　　　　　　　　　　　　alert(ev.clientX)； //这个相信都知道
　　　　　　　　　　　　  }
　　　　　　　　　　}
　　　　　　　　　　
　　　　　　　});
　　　　　　
　　　　　</script>
    </body>
</html>

　　　vue的事件冒泡：（大家在原生中都知道事件冒泡，当然不需要这样的时候需要阻止）。

　　　　　　方法一： @click='show($event)' 我们有了事件对象后，我们函数中是不是就可以利用原生中的 ev.cancelBubble=true；

　　　　　　方法二： @click.stop='show()' 只要在事件后面加 .stop 就可以阻止事件冒泡

　　　vue的阻止默认事件：（元素中都有一些大家不喜欢的事件或不需要的方法）

　　　　　　方法一： @click='show($event)' 我们有了事件对象后，我们函数中是不是就可以利用原生中的 ev.preventDefault();

　　　　方法二： @click.prevent='show()' 只要在事件后面加 .prevent 就可以阻止默认事件。

　　　vue的键盘事件:

　　　　　　@keydown='show()' 当然我们传个$event 也可以在函数中获 ev.keyCode

　　　　　　我要说的是键盘事件中常用键.

　　　　　　@keydown.enter='show()' 回车执行

　　　　　　@keydown.up='show()' 上键执行

　　　　　　@keydown.down='show()' 下键执行