<divclass="m-4"id="app"><!-- v-modelはこのinputをVueとバインディングさせる役割 --><inputclass="ml-4 form-control col-sm-11 border-dark"placeholder="ここにtodo入力"v-model="message"><divclass="row m-4"><!-- @click=""の中はVueで記述するメソッド(＠はv-on:の省略です) --><buttonclass=" col-sm-6 btn btn-primary btn-lg"@click="add_item()">追加</button><buttonclass="col-sm-6 btn btn-danger btn-lg"@click="all_del_item">全削除</button></div><divclass=" border container-fluid mb-1"v-for="(item,idx) in items"><!-- v-for( 配列, index(配列内の要素に振られた添字)を(item,idx)と表している ) --><ul><liclass="border-left">
                {{ item }} <buttonclass="col-sm-3 float-right btn btn-warning "@click="del_item( idx )">削除 </button></li></ul></div></div>

<!--
*    <div class="m-4" id="app">
*                m-4    @margin: 4;
*   <input class="ml-4 form-control col-sm-11 border-dark" placeholder="ここにtodo入力" v-model="message">
*                ml-4           @margin-left: 4;
*                form-control   @text系にこのclassをつけるだけで多少良い見た目になる
*                col-sm-11      @画面幅を12個に分けた分の11を使って表示する(sm:タブレットサイズ以下になったら縦並び、または余白を無視する)
*                border-dark    @dark色のborderをつける（そのまま）
*   <div class="row m-4">
*                row    @グリッドシステムで要素を分割する時の親要素につける
*                m-4    @margin: 4;
*   <button class=" col-sm-6 btn btn-primary btn-lg" @click="add_item()">
*                col-sm-6    @画面幅を12個に分けた分の6を使って表示する(sm:タブレットサイズ以下になったら縦並び、または余白を無視する)
*                btn         @Bootstrapで用意されたボタンのデザインになる
*                btn-primary @ボタンの色をprimaryにする
*                btn-lg      @ボタンの大きさLargeにする
*   <button class="col-sm-6 btn btn-danger btn-lg" @click="all_del_item">
*                col-sm-6   @画面幅を12個に分けた分の6を使って表示する(sm:タブレットサイズ以下になったら縦並び、または余白を無視する)
*                btn        @Bootstrapで用意されたボタンのデザインになる
*                btn-danger @ボタンの色をdangerにする
*                btn-lg     @ボタンの大きさLargeにする
*   <div class=" border container-fluid mb-1" v-for="(item,idx) in items">
*                border          @全方位にborderをつける
*                container-fluid @画面サイズに合わせて流動的に変わる
*                mb-1            @margin-bottom: 1;
*   <li class=" border-left" >
*                border-left    @左にborderをつける
*   <button class="col-sm-3 float-right btn btn-warning " @click="del_item( idx )">
*                col-sm-3    @画面幅を12個に分けた分の3を使って表示する(sm:タブレットサイズ以下になったら縦並び、または余白を無視する)
*                float-right @float: right;右に寄せる
*                btn         @Bootstrapで用意されたボタンのデザインになる
*                btn-warning @ボタンの色をwarningにする
*
-->