vue의 일부 이벤트 예제 튜토리얼-JS 튜토리얼-php.cn

vue의 일부 이벤트 예제 튜토리얼

零下一度

풀어 주다： 2017-06-27 10:27:18

원래의

1290명이 탐색했습니다.

vue 이벤트:

　 vue 이벤트 약어:

　　 vue의 이벤트는 v-on:click='show()' 인데 너무 길어서 v-on:event 매번 작성하기가 싫습니다.

vue에 이벤트 약어가 있습니다 @click='show()' 이게 더 좋아질까요?

<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의 이벤트 버블링: (모두가 네이티브에서 이벤트 버블링을 알고 있습니다. 물론 이런 일이 발생하면 차단할 필요가 없습니다).

　방법 1: @click='show($event)' 이벤트 개체를 얻은 후 함수에서 기본 ev.cancelBubble=true를 사용할 수 있습니까?

　방법 2: @ click.stop ='show()' 이벤트가 버블링되는 것을 방지하려면 이벤트 뒤에 .stop을 추가하기만 하면 됩니다.

　 vue의 차단 기본 이벤트: (요소에는 모두가 좋아하지 않거나 메서드가 필요하지 않은 일부 이벤트가 있습니다. )

　　　　방법 1: @click='show($event)' 이벤트 개체를 얻은 후 함수에서 기본 ev.preventDefault();

를 사용할 수 있습니까? ='show()' 기본 이벤트를 방지하려면 이벤트 뒤에 .prevent를 추가하면 됩니다.

　 vue의 키보드 이벤트:

　　 @keydown='show()' 물론 $event를 전달하고 함수에서 ev.keyCode를 얻을 수도 있습니다.

　　 제가 말씀드리고 싶은 것은 일반적으로 사용되는 키보드 이벤트의 키입니다.

　　　　@keydown.enter='show()' 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　ccodie' ='show()' 실행하려면 왼쪽 버튼을 클릭하세요

　　 @keydown.right='show()' 오른쪽 버튼을 클릭하면 실행

　　　그리고 .. ...........

위 내용은 vue의 일부 이벤트 예제 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!