Vue.js のグローバルコンポーネントを使ってみた

# 初めに

前回に引き続きVue.jsで学んだことのアウトプットとして投稿します。

## コンポーネントの中にメソッドを書く

```html
  <div id="app">
    <new-btn></new-btn>
    {{ message }}
  </div>
```

```js
Vue.component('new-btn', {
  template: `
  <button v-on:click='displayDate'>
    日付を表示</button>
  `,
  methods: {
    displayDate: function() {
      date = new Date();
      app.message =
        date.getFullYear() + '/' +
        ('0' + date.getMonth() + 1).slice(-2) + '/' +
        ('0' + date.getDate()).slice(-2) + '-' +
        ('0' + date.getHours()).slice(-2) + ':' +
        ('0' + date.getMinutes()).slice(-2) + ':' +
        ('0' + date.getSeconds()).slice(-2);
    }
  }
})

var app = new Vue({
  el: '#app',
  data: {
    message: ''
  }
})
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621414/fcfc7753-f047-a6b6-bcef-19f12b4488cf.png)



これは次のコードと同じ結果になる。


```html
  <div id="app">
    <button v-on:click="displayDate">日付を表示</button>
    {{ message }}
  </div>
```


```js
var app = new Vue({
  el: '#app',
  data: {
    message: ''
  },
  methods: {
    displayDate: function() {
      date = new Date();
      this.message = 
        date.getFullYear() + '/' +
        ('0' + date.getMonth() + 1).slice(-2) + '/' +
        ('0' + date.getDate()).slice(-2) + '-' +
        ('0' + date.getHours()).slice(-2) + ':' +
        ('0' + date.getMinutes()).slice(-2) + ':' +
        ('0' + date.getSeconds()).slice(-2);
    }
  }
})
```

## コンポーネントの中にデータオブジェクトを書く

コンポーネントの中に `data` を書く。メソッドが呼ばれるたび、`data` の中の count にアクセスして +1 する。


```js
Vue.component('new-btn', {
  template: `
  <button v-on:click='displayDate'>
  日付を表示{{ count }}回</button>
  `,
  methods: {
    displayDate: function() {
      date = new Date();
      app.message =
        date.getFullYear() + '/' +
        ('0' + date.getMonth() + 1).slice(-2) + '/' +
        ('0' + date.getDate()).slice(-2) + '-' +
        ('0' + date.getHours()).slice(-2) + ':' +
        ('0' + date.getMinutes()).slice(-2) + ':' +
        ('0' + date.getSeconds()).slice(-2);
      this.count++;
    }
  },
  data: function() {
    return {
      count: 0
    }
  }
})

var app = new Vue({
  el: '#app',
  data: {
    message: ''
  }
})
```


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621414/07f224d5-1af2-76e8-c809-155628c9822d.png)

## コンポーネントのプロパティで日付を何回も出現させる

```html
  <div id="app">
    <button v-on:click="displayDate">ボタン</button>
    <date-display
      v-for="dateText in dateList"
      v-bind:date="dateText"
    ></date-display>
  </div>
```

```js
Vue.component('date-display', {
  props: ['date'],
  template: '<p>{{ date }}</p>'
})

var app = new Vue({
  el: '#app',
  data: {
    dateList: []
  },
  methods: {
    displayDate: function() {
      dateNow = new Date();
      var dateText =
        dateNow.getFullYear() + '/' +
        ('0' + dateNow.getMonth() + 1).slice(-2) + '/' +
        ('0' + dateNow.getDate()).slice(-2) + '-' +
        ('0' + dateNow.getHours()).slice(-2) + ':' +
        ('0' + dateNow.getMinutes()).slice(-2) + ':' +
        ('0' + dateNow.getSeconds()).slice(-2);
      this.dateList.push(dateText)
    }
  }
})
```


- 動作結果

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621414/90164918-f6f2-f424-5ec8-88473ad3a0f0.png)

# 参考記事

- Vue.js 日本語公式ドキュメント  
https://jp.vuejs.org/v2/guide/components.html