ホームページ  >  記事  >  ウェブフロントエンド  >  Vue のいくつかのイベント例のチュートリアル

Vue のいくつかのイベント例のチュートリアル

零下一度
零下一度オリジナル
2017-06-27 10:27:181298ブラウズ

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のイベントオブジェクト:

この@click='show($event)'のようなイベントオブジェクトもvueにあります機能$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();

を使用できますか? 方法 2: @click.prevent ='show()' デフォルトのイベントを防ぐには、イベントの後に .prevent を追加するだけです。

vueのキーボードイベント:

@keydown='show()' もちろん、$eventを渡して、関数でev.keyCodeを取得することもできます

言いたいのはよく使うものですキーボードイベントのキー

@keydown.enter='show()' ccodie' = 'show() ' 左クリックで実行

@keydown.right='show()' 右クリックで実行

そして.. ......

以上がVue のいくつかのイベント例のチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。