>  기사  >  웹 프론트엔드  >  vue의 일부 이벤트 예제 튜토리얼

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

零下一度
零下一度원래의
2017-06-27 10:27:181287검색

vue 이벤트:

  vue 이벤트 약어:

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

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

 방법 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.