「Web技術速習テキスト 実践編」の感想・備忘録

module.exports = {
  publicPath: './'
}

props: {
  city: String,
  hoge: String
},

<button class="btn text-white" @click="deleteCity">
  <i class="fas fa-trash-alt"></i>
</button>

<script>
// methodsにメソッドを定義
deleteCity() {
  this.$emit('deleteCity', this.city)
}
</script>

<Child v-for="city in cities" :city="city.name" :key="city.id" @delete-city="deleteCity" class="card shadow"/>

<script>
// methodsにメソッドを定義
deleteCity(delCity) {
  const index = this.cities.findIndex((city) => {
    return city.name === delCity;
  });
  if (index >= 0) {
    this.cities.splice(index, 1);
  }
}
</script>

<div class="jumbotron">
  <h1>Web技術速習テキスト 実践編</h1>
</div>

<div class="card-deck">
  <HelloWorld v-for="city in cities" :city="city.name" :key="city.id" class="card shadow"/>
</div>

<!-- HelloWorld.vue -->
<template>
  <div>
    <div class="card-header text-white bg-primary text-center h3">{{ city }}</div>
    <div class="card-body h2">{{ time }}</div>
  </div>
</template>

<button class="btn text-white" @click="deleteCity">
  <i class="fas fa-trash-alt"></i>
</button>

<button class="btn btn-info">クラスによる指定</button>
<b-btn>タグによる指定</b-btn>

// テーブルはBootstrap Vueの方が便利。
<b-table striped hover :items="cities" :fields="fields"></b-table>

<b-card v-for="picure in pictures" :key="picure.id">
  <b-card-body>
  <b-card-title>{{picure.id}}:{{picure.filename}}</b-card-title>
  <b-img :src="`./img/${picure.filename}`"></b-img>
  </b-card-body>
</b-card>

<script>
import axios from 'axios'

// methods内のメソッドに処理追加
axios.get('./pictures.json', {params: {hoge: 'hogehoge'}})
    .then((response) => {
      this.pictures = response.data.pictures;
    })
    .catch((error) => {
      console.log(error);
    });
</script>

<v-app>
  <v-main>
    <v-container>
      <v-row>
        <v-col sm="4" class="yellow">行1</v-col>
        <v-col sm="4" class="blue">行2</v-col>
      </v-row>
    </v-container>
  </v-main>
</v-app>

<v-btn x-small class="ma-2" color="success">success</v-btn>
<v-btn x-large class="ma-2" color="info">info</v-btn>

<v-card max-width="344">
  <v-card-title class="primary lighten-3">ここにタイトルが入ります</v-card-title>
  <v-card-text>ここに本文が入ります</v-card-text>
  <v-card-actions>
    <v-btn color="warning">ボタン</v-btn>
  </v-card-actions>
</v-card>

<v-date-picker v-model="date" :landscape="false"></v-date-picker>
<v-time-picker v-model="time" :landscape="false" format="24hr"></v-time-picker>

<v-dialog v-model="isShowDialog" max-width="300">
  <template v-slot:activator="{ on }">
    <v-btn v-on="on">
      Open
    </v-btn>
  </template>
  <v-card>
    <v-card-title class="headline">ダイアログです。</v-card-title>
    <v-card-text>よろしいですか？</v-card-text>
    <v-card-actions>
    <v-btn max-width="100" color="success">OK</v-btn>
    <v-btn max-width="100" color="info">キャンセル</v-btn>
    </v-card-actions>
  </v-card>
</v-dialog>
<!-- 表示をv-dialogの外側から行う場合は.stop修飾子が必要 -->
<v-btn color="warning" @click.stop="isShowDialog=!isShowDialog">ダイアログ表示/非表示</v-btn>