<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<メタ名=「ビューポート」コンテンツ=「幅=装置幅、初期の規模= 1.0」>
<META HTTP-当量= "X-UA-互換性のある" コンテンツ= "IE =エッジ">
<タイトル>ドキュメント</ TITLE>
<スクリプトSRC = "https://cdn.bootcss.com/vue/2.6.10/vue.js"> </ SCRIPT>
</ head>の
<スタイル>
#box {幅：200pxの、高さ：200pxの。背景：赤;}
</スタイル>
<身体>
<DIV ID = "アプリ">
<DIV ID = "ボックス" @クリック= 'boxfunc'>
<ボタンのid = "BTN" @ click.stop = 'btnfunc'> </ button>をバブリング防ぎます
<a href="http://www.baidu.com" @click.stop.prevent>デフォルトのイベントとバブリング</a>を防ぐために
</ div>
<DIV ID = "ボックス" @ click.capture = 'boxfunc'>
<ボタンのid = "BTN" @ click.stop = 'btnfunc'> </ button>をバブリング防ぎます
<a href="http://www.baidu.com"は、デフォルトのイベント</a>を防ぐ@click.prevent>
</ div>
<DIV ID = "ボックス" @ click.self = 'boxfunc'>
<a href="http://www.baidu.com" @click.prevent.once>、一度だけ二のジャンプ</a>を行っ
</ div>
<P>イベント修飾子、かつて一度だけトリガ、停止するようにデフォルトの動作を防止するため、捕捉機構をキャプチャ、バブリング停止、停止、自己の</ P>のみ自身のイベントをトリガー
</ div>
<スクリプト>
{（VM =新しいVueのでした
「＃アプリ」
データ：{
}、
方法：{
boxfunc（）{
警告（「これは、イベントの箱です」）
}、
btnfunc（）{
警告（「これは、イベントBTNです」）
}、
}
}）;
</ SCRIPT>
</ BODY>
</ HTML>