【Vue.js】いいねボタン作ってみる（練習）

はじめに

Vue.jsの練習で作ったいいねボタンを、覚えるがてら書き残します。

完成形

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Component</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>

  <div id="app">
    <p>Total Likes: {{ total }}</p>
    <like-component message="Like" @increment="incrementTotal"></like-component>
    <like-component message="Awesome" @increment="incrementTotal"></like-component>
    <like-component message="Great" @increment="incrementTotal"></like-component>
    <like-component @increment="incrementTotal"></like-component>
  </div>

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

Vue.js

(function() {
  'use strict';

  var likeComponent = Vue.extend({
    props: {
      message: {
        type: String,
        default: 'Like'
      }
    },
    data: function() {
      return {
        count: 0
      }
    },
    template: `<button @click="countUp">{{ message }}{{ count }}</button>`,
    methods: {
      countUp: function() {
        this.count++;
        this.$emit('increment');
      }
    }
  });

  var app = new Vue({
    el: '#app',
    components: {
      'like-component': likeComponent
    },
    data: {
      total:0
    },
    methods: {
      incrementTotal: function() {
        this.total++;
      }
    }
  });
})();

自分なりに解説

まず基本的なHTMLは飛ばしますが、完成系の

中がVue.jsで制御されている部分です。
今回はVue.jsのComponentを使っていいねボタンを作成しますので、以下のように記述していきます。
HTML

<div id="app">
  <like></like>
</div>

はHTMLにないタグです。
これからVue.jsで制御していきます。
Vue.js

(function() {
  'use strict';

  var like = Vue.extend({
    template: `<button>いいね</button>`
  });

  var app = new Vue({
    el: "#app",
    components: {
      'like': like ←このlikeはメソッドは上の変数likeを呼び出してる。
    }
  });
})();

Vue.extendとして、続けてtemplate:〜〜と書くことで、HTMLに作ったlikeのタグにが表示される。
次にいいねが押された回数カウントするように、カウントのメソッドを作る。
Vue.js

(function() {
  'use strict';

  var like = Vue.extend({
    data: function(){  ←② countについて
      return{
        count:0
      }
    },
    template: `<button @click="countUp">いいね{{ count }}</button>`,　←① @clickについて
    methods: {
      countUp: function(){
        this.count++;
      }
    }
  });

  var app = new Vue({
    el: "#app",
    components: {
      'like': like
    }
  });
})();

①@clickはイベントで、v-on:clickとも書けます。
よくあるクリックでイベント発火ってやつですね。
この時countの初期値が欲しいので、dataを作ってcountの数値を渡しますが、Component内はdataを関数で返す必要があります。

②関数とするためにfunction()とし、returnでcount:0を返してます。
あとはmethodsのcountUpに基づき、数字がクリックするごとに増えるといった流れです。

Propsを持たせる

現時点でHTMLのを増やせばボタンが増えてくれます。
その上で、いいね以外のボタンもComponentを使って増やす場合に、表示したい文字が変わるケースもあると思います。
変更方法も書いていきます。
HTML

<div id="app">
  <like message="いいね"></like>
  <like message="よくない" class="hoge"></like> ←こういうclassも設定できます。
  <like></like>
</div>

message="いいね"のことを、カスタム属性といいます。
続いてVue.jsで操作する方法。
Vue.js

(function() {
  'use strict';

  var like = Vue.extend({
  ①props: {
      message: {
        type: String,
        default: 'いいね'
      }
    },
    data: function(){
      return{
        count:0
      }
    },
    template: `<button @click="countUp">{{ message }}{{ count }}</button>`,　←②
    methods: {
      countUp: function(){
        this.count++;
      }
    }
  });

  var app = new Vue({
    el: "#app",
    components: {
      'like': like
    }
  });
})();

①HTMLでlike要素毎messageに割り振られた文字列に変えるためにpropsを設定。
今回の書き方はに何も文字が割り振られてなかった場合、いいねと設定する書き方です。
props: ['message']でも表示されます。
あとはtemplate内の「いいね」と設定していた文字列を{{ message }}に変えて、HTMLで設定されたmessageの文字列を表示するといった仕組みです。

とりあえず、一旦以上！個人アプリに取り入れるために、勉強中です〜