【Vue.js】クリック処理 @click

【ゴール】

Vue.jsを用いてクリック処理を実施

【環境】

mac catarina 10.156
Vue.js v2.6.12

【実装】

index.html

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <p>{{number}}</p>
  <button @click="increaseNumber">増やす</button>
</div>
.
.
.
<script>
  new Vue({
    el: '#app', //対象を取得
    data: {
      number: 0  //numberをセット
    },
    methods: {
      increaseNumber: function(){
        return this.number += 1;  //numberに対して、１ずつ加えていく
      }
    }
  })
</script>

【まとめ】

■　htmlでは、{{}}でvuejsのデータを表示
■　vuejsでは@click等の便利なディレクティブが多数ある

【オススメ記事】

■ 【Vue.js】 IF文・For文　条件分岐、繰り返し処理
https://qiita.com/tanaka-yu3/items/0ccf9a11525331b764de

■ 【node.js】ルーティング設定ホーム画面表示させる。
https://qiita.com/tanaka-yu3/items/1c8859e16070e67d73c0

■ 【node.js】 node.jsインストール 芋っていたけど、簡単だった件...
https://qiita.com/tanaka-yu3/items/739db5ffed24a8d9ae4b