vue的一些事件实例教程-js教程-PHP中文网

vue的一些事件实例教程

零下一度

发布： 2017-06-27 10:27:18

原创

1457人浏览过

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 就可以阻止事件冒泡