はじめに
Vue.jsに少し触れてみたので、その内容を「Vue.js入門」として、数回にわけて書いていこうと思います。
今回の３回目では「メソッド（methods）」を紹介します。
前の記事は以下を参照してください。
- Vue.js 入門（第１回） - Vue.jsでHello World と双方向データバインディング（v-model） -
- Vue.js 入門（第２回） - 算出プロパティ（computed）と監視（watch） -
※ここではVue.jsの**2.x系（2.6.14）**を使用しています。3.x系では書き方が異なるので注意してください。
1. メソッド（methods）
methodsオプションを指定することで、v-onのイベントハンドラとして呼び出されるメソッドを定義することができます。
1.1. jsの作成
var vm = new Vue({
el: '#app',
data: { // （１）
items: ['HTML', 'CSS', 'JavaScript'],
input: ''
},
methods: { // （２）
addItem: function(item) { // （３）
this.items.push(item) // （４）
this.input = '' // （５）
}
}
});
（１）dataとしてitems変数とinput変数を定義します。ここで、items変数は['HTML', 'CSS', 'JavaScript']と配列を定義しています。
（２）methodsでメソッドを定義します。
（３）addItemという名前のメソッドを定義します。
（４）引数のitemをitems変数の配列に追加します。
（５）input変数に空文字を設定します。
1.2. HTMLの作成
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="utf-8">
<title>Vue.js(method)</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="input"> <!-- （１）-->
<button type="button" v-on:click="addItem(input)">追加</button> <!-- （２）-->
<ul>
<li v-for="item in items"> <!-- （３）-->
<span>{{ item }}</span>
</li>
</ul>
</div>
<script src="js/main.js"></script>
</body>
</html>
（１）v-model="input"で入力された内容とinput変数を紐付けます。
（２）v-on:click="addItem(input)"で、「追加」ボタン押下時にaddItemメソッドを呼び出すようにします。
（３）v-for="item in items"でitems変数の配列から１件ずつitem変数に格納し、繰り返し処理を行います。items変数の配列の一覧を表示させます。
1.3. 動作確認
index.htmlを開くと、以下が表示されます。
初期表示として、テキスト入力欄にinput変数の初期値（空文字）が表示されます。一覧にはitemsの配列の内容（HTML、CSS、JavaScript）が表示されます。
テキスト入力欄に入力し（ここでは「Vue.js」）、「追加」ボタンを押します。
すると入力した内容が一覧に追加されます。（入力欄はクリアされます。）
