【Vue.js】イベント処理でアラートを表示する方法［v-on］

こんにちは。ハイナレです。

今日はVue.jsでイベント処理を実装してみました。
ボタンを押すとアラートが出る、とってもシンプルな処理です。

さすがにシンプルすぎるかなと思ったので、ちょっとストーリー性を持たせてみました！

コード

今回もJSFiddleで作ります。だってラクなんだもの。
「Result」タブをクリックすると結果が表示されますよ。

お察しの方も多いと思いますが、コナンの映画「時計じかけの摩天楼」のラストシーンを再現しています。
※ネタバレが嫌な人はボタンを押さないでくださいね。

【HTML】

<div style="text-align:center;">

  <div class="episode">
    <p>あなたは時限爆弾を解体しています。</p>
    <p>最後に赤と青のコードが残りました。</p>
    <p>どちらを切りますか？</p>
  </div>

  <div id="app-108" style="text-align:center;">
    <button class="square_btn red" v-on:click="die">赤</button>
    <button class="square_btn blue" @click="live">青</button>
  </div>

</div>

【JavaScript】

var app108 = new Vue({
  el: '#app-108',
  methods: {
    live: function() {
      alert("おめでとうございます！時限爆弾が止まりました。");
    },
    die:function(){
    	alert("どっかーん！");
    }
  }
})

【CSS】

.episode{
  background-color:#dddddd;
  display:inline-block;
  padding:1rem;
  margin:1rem;
}

.square_btn {
    position: relative;
    display: inline-block;
    padding: 0.5em 1em;
    text-decoration: none;
    color: #FFF;
    border-radius: 4px;/*角の丸み*/
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
    font-weight: bold;
}

.square_btn:active {
    border-bottom: solid 2px #222222;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}

.red{
    background: #FF0000;
    border-bottom: solid 2px #8A0808;/*少し濃い目の色に*/
}

.blue{
    background: #0404B4;
    border-bottom: solid 2px #0B0B61;/*少し濃い目の色に*/
}

解説

イベント処理には「v-on」または「@」を使います。「@」は「v-on:」の省略形です。

下記の2行で、クリック時のイベントを指定していますね。

<button class="square_btn red" v-on:click="die">赤</button>
<button class="square_btn blue" @click="live">青</button>

コードを日本語訳すると、
「赤ボタンを押したら”die”メソッドを実行。青ボタンを押したら”live”メソッドを実行」
という感じでしょうか。

赤ボタンに「v-on:click=」
青ボタンに「@click=～」
と書いてありますが、どちらも意味は同じです。今回は勉強のため２通りの書き方をしてみました。

どちらを使うのが一般的なんでしょう？両方のメリットとデメリットを知りたいですね。

参考サイト

Vue.js入門
CSSで作る！押したくなるボタンデザイン100（Web用）