Vue.jsでアンカーの中にリンクしない領域を作る

Bootstrapのカードのようなデザインで全体をリンクにしてボタンだけリンクさせたくないことがありました。

やり方は簡単でイベント修飾子を使うだけです。

<a href="http://example.com/">
  ここはリンク
  <div @click.prevent="log">これはハンドラー</div>
  <div @click.prevent>これはイベントなし</div>
  ここもリンク
</a>

これだけです。