Vue.jsを初めて触ってみた

#Vueをこれから学習することにしたので、その備忘録
2日勉強して得た知識の紹介

##私について
jsを勉強し始めて２ヶ月程度
classとかわからないレベル


##参考にしたもの
Vue公式ドキュメント
https://jp.vuejs.org/
ハンズオンはすぐ挫折。流して最後まで読みました。

キータの記事
https://qiita.com/kiyokiyo_kzsby/items/ce9fe8b72953584fecee
https://qiita.com/don-bu-rakko/items/9a1f7e3a18f526e446ea
↑こちらの記事とてもよかったです。
公式ドキュメントを読んでからyoutubeをみると理解が少し理解出来るようになりました。

キータのyoutubeの成果物

![スクリーンショット 2020-07-15 10.15.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670884/4c2bd0f2-1119-74be-e100-0ec14d86fbdb.png)

axiosで読み取ったjson形式のAPIを使用し、画像の追加、削除が出来るもの。

コードは以下

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        table {
  border-collapse: collapse;
  text-align: left;
  line-height: 1.5;
}

th {
  width: 150px;
  padding: 10px;
  font-weight: bold;
  border: 1px solid #ccc;
}

td {
  width: 350px;
  padding: 10px;
  border: 1px solid #ccc;
}

.yes {
  background-color: #90ee90
}

.no {
  background-color: #ff7f50
}
    </style>
</head>
<body>
    <h1>Vueの練習</h1>
    
    <!-- ここから -->
    
    <div id="app">
      <div>
        <label>
        質問を入力:
        <input type="text" v-model='question'>
        </label>
        <button v-on:click='add()'>送信</button>
        <!-- ボタンを押すとadd関数を実行 -->
      </div>
      
      <!-- 回答 -->
      <table>    
        <thead>
          <tr>
            <td>日時</td>
            <td>質問</td>
            <td>回答</td>
            <td>画像</td>
            <td>削除</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for='item in items'>
            <td>{{item.date | date-filter}}</td><!-- 日時 -->
            <td>{{item.question}}</td><!-- 質問 -->
            <td>{{item.answer}}</td><!-- 回答 -->
            <td><img v-bind:src="item.image" width="100" height="100"></td>
            <td><button v-on:click="remove()">削除</button></td>
          </tr>
          
          <!-- 合計行 -->
          <tr>
            <td colspan="5">合計:{{total}} 件</td>
          </tr>
        </tbody>
      </table>
    </div>

 <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 <script src="https://unpkg.com/axios@0.12.0/dist/axios.min.js"></script>
<script>
Vue.filter('date-filter',function(val){
    if(!val)return;
    return[val.getFullYear(),(val.getMonth()+1),val.getDate()]
    .join('-')+''+'/'+
    [val.getHours(),val.getMinutes(),val.getSeconds()].join(':');
})

new Vue({
    el:'#app',
    data:{
        // item:{},
        items:[],
        question:''
    },
    methods:{//関数を書くときはmethodsを使用する
        add:function(){
            console.log(this.question);
            let vm = this;
        axios.get('https://yesno.wtf/api')
        .then(function(response){
          console.log(response.data);
          console.log(response);
        //   vm.item = response.data
        //   vm.item.date = new Date();
        //   vm.item.question = vm.question;
             let item = {
                 date: new Date(),
                 question: vm.question,
                 answer: response.data.answer,
                 image:response.data.image
             };
             vm.items.push(item);
        });
      },
      remove: function(index) {
    this.items.splice(index, 1);
      }

    },
    computed:{
        total:function(){
            return this.items.length;
        }
    }
});


    
</script>
</body>
</html>
```

##ざっくり解説
####el:html側の場所を指定する(Vueを使用するところ)
####data:Vueで使用する変数を格納する場所。
→question:
v-modelで指定することですることで双方向バインディングを作成
コードに記載していないが、htmlファイル内で  
``` <p>{{question}}</p>```
を打つとinputタグ内で入力した文字がリアルタイムでpタグ内に表示される。

→items:
```<tr v-for='item in items'>
```
上記のように定義することで配列の中の内容をfor文で回し、addをクリックするごとに追加で表が表示されるようにしている。
ちなみに'item in items'の記載は該当する項目を全て変更すれば
~~'a in b'にしても動く。~~
→2020/7/16訂正
今回は動いたが説明に不足あり。
bの部分はdataに記述する変数であり、変数指定があってaの部分の記述がある。
つまり、bを適切に設定した上でaの存在がある。
（この辺りの理解がまだ怪しい。ひき続き学習を進め都度修正します）


####methods:関数を定義するところ　※（）を忘れずつけよう※
####computed:関数の戻り値を変数として利用する　※returnを忘れずにつけよう※
computedは算出プロパティらしいのだが、その理解はまだ出来ていない。念のため、公式ドキュメントを貼っておく。
https://jp.vuejs.org/v2/guide/computed.html#%E7%AE%97%E5%87%BA%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3


2020/7/15の時点での学びは以上です。
所感:公式ドキュメントを軽くでも一読してから動画や書籍を見ると良いと感じた。