Rumah > Artikel > hujung hadapan web > vue的一些事件实例教程

vue的一些事件实例教程

零下一度asal: 2017-06-27 10:27:181287semak imbas

vue的事件：

　　　vue事件简写：

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

　　　　　 vue中就有事件简写 @click='show()' 这会不会就好点了呢！8b05045a5be5764f313ed5b9168a17e6

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

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

　　　　  </div>
　　　　
        <script src=&#39;vue.js&#39;></script>
　　　　　<script>
　　　　　　　new Vue({
　　　　　　　　　　el:&#39;#box&#39;,
　　　　　　　　　　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=&#39;show($event)&#39;>按钮1</button>//传输事件对象
　　　　  </div>
　　　　
        <script src=&#39;vue.js&#39;></script>
　　　　　<script>
　　　　　　　new Vue({
　　　　　　　　　　el:&#39;#box&#39;,
　　　　　　　　　　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()' 下键执行

　　　　　　@keydown.left='show()' 左键执行

　　　　　　@keydown.right='show()' 右键执行

　　　　　　以及....................

Atas ialah kandungan terperinci vue的一些事件实例教程. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：HTML中使用js的三种方式及优缺点介绍Artikel seterusnya：一句话概括:什么是闭包？

Artikel berkaitan

Lihat lagi