Vue のいくつかのイベント例のチュートリアル-jsチュートリアル-php.cn

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

零下一度

リリース： 2017-06-27 10:27:18

オリジナル

1314 人が閲覧しました

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

この@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()' 右クリックで実行