プロさんのおうち   ～プログラムのサンプル置き場～

• HOME
• サンプル

本家のイベント修飾子の例がわかりにくかったので、確認方法を記載していきます。

今回記載していく修飾子は、以下の3つです。

• self : 自分以外のイベントでは実行されない
• stop : イベントの伝搬を止める
• prevent : ページのリロードを抑止する

確認用のHTMLは以下のようになります。

各修飾子毎にdivを作成し、実行してみるとわかりやすいです。

<!-- 通常の状態 -->
<div id="standard" style="background: green" @click="showMessage('parent')">
    <br>
    <button @click="showMessage('child')">Standard</button>
    <br>
</div>
<!-- selfの場合、子要素のイベントは伝搬されない。 -->
<div id="selfApp" style="background: blue" @click.self="showMessage('parent')">
    <br>
    <button @click="showMessage('child')">Self</button>
    <br>
</div>
<!-- stopの場合、伝搬を止める -->
<div id="stopApp" style="background: yellow" @click="showMessage('parent')">
    <br>
    <button @click.stop="showMessage('child')">Stop</button>
    <br>
</div>
<!-- preventの場合ページリロードされない -->
<div id="preventApp" style="background: violet">
    <form @submit.prevent="showMessage('submit')">
        <button @click="showMessage('click')">Prevent</button>
    </form>
    <br>
    <form @submit="showMessage('submit')">
        <button @click="showMessage('click')">Not Prevent</button>
    </form>
</div>
				

Javascript側は以下のようになります。

各div用の変数に置き換えてもらえれば、中身はただalertしてるだけです。

var app = new Vue({
    el: '#それぞれのDIVのID',
    methods: {
        showMessage: function(message) {
            alert(message)
        }
    }
})
				

• Vue.jsのイベント修飾子（チュートリアル）

---

メニューに戻る