【Vue.js】イベント処理(v-on)

Javascript用フレームワーク「Vue.js」でイベント処理(v-on属性)する方法をソースコード付きでまとめました。

イベント処理(v-on属性)

Javascript用フレームワーク「Vue.js」では、v-on属性でイベント処理ができます。

書式

<button v-on:click="treasure">宝具</button>

イベントの登録には「v-on」属性を用います。
ちなみに、「v-on:」を省略形「@」で置き換えることもできます。

<button @click="treasure">Excalibur</button>

サンプルコード

サンプルプログラムのソースコードです。

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TEST</title>
<!-- Vue.js の読み込み -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

</head>
<body>

<div id="app">
  <button v-on:click="treasure">宝具</button>
</div>

<script src="./js/main.js"></script>
</body>
</html>

./js/main.js

var app = new Vue({
    el: '#app',
    methods: {
        treasure: function() {
            alert("Excalibur");
        }
    }
});

「宝具」ボタンを押すと「Excalibur」が表示されます。

関連ページ
1 【Vue.js入門】使い方・サンプル集
2 Javascript入門 サンプル集
3 Node.js入門
関連記事