Vue.jsの練習

この記事がよくまとまっている

qiita.com

Vuetifyでやりましょう

vuetifyjs.com

.vueの基本

<template>
  <div></div>
</template>

<script>
export default {
  data: function() {
    return {};
  },
  methods: {},
  computed: {}
};
</script>

dataの練習

script 内の dataで宣言した変数をtemplateで表示せよ

<template>
  <div></div>
</template>
<script>
export default {
  data: function() {
    return {
      message: "Hello Vue!"
    };
  },
  methods: {},
  computed: {}
};
</script>

解答例

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      message: "Hello Vue!"
    };
  },
  methods: {},
  computed: {}
};
</script>

methodの練習

templateにボタンを配置し、クリックされたらmethods: onClickButton()を呼び、カウント変数をインクリメントせよ

<template>
  <div></div>
</template>
<script>
export default {
  data: function() {
    return {
      count: 0
    };
  },
  methods: {
    onClickButton(){
    }
  },
  computed: {}
};
</script>

解答例

<template>
  <div>
    <v-btn @click="onClickButton">クリック</v-btn>
    <p>{{ count }}</p>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      count: 0
    };
  },
  methods: {
    onClickButton() {
      this.count++;
    }
  },
  computed: {}
};
</script>

v-modelの練習

templateにテキストフィールドを配置し、入力された内容をテキストフィールド外に配置したpタグ内に表示せよ

解答例

<template>
  <div>
    <v-text-field v-model="text"></v-text-field>
    <p>{{text}}</p>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      text: ""
    };
  },
  methods: {},
  computed: {}
};
</script>

computedの練習

templateにテキストフィールドを配置し、入力された内容をテキストフィールド外に配置したpタグ内に全て大文字に変換して表示せよ

解答例

<template>
  <div>
    <v-text-field v-model="text"></v-text-field>
    <p>{{upperText}}</p>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      text: ""
    };
  },
  methods: {},
  computed: {
    upperText() {
      return this.text.toUpperCase();
    }
  }
};
</script>

classバインドの練習

templateにボタン「大」「中」「小」、pを配置し、それぞれのボタンが押下されたらpタグ内の文字サイズを変更せよ

解答例

<template>
  <div>
    <v-btn @click="onClickButton('text-h1')">大</v-btn>
    <v-btn @click="onClickButton('text-h4')">中</v-btn>
    <v-btn @click="onClickButton('text-caption')">小</v-btn>
    <p :class="className">神戸プログラミングアカデミー</p>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      className: ""
    };
  },
  methods: {
    onClickButton(c) {
      this.className = c;
    }
  },
  computed: {}
};
</script>

v-forの練習

scriptにオブジェクトの配列を定義し、v-forを使ってテーブルに表示せよ

準備

curl https://raw.githubusercontent.com/prog-ac/sortable-table/master/assets/users.json > users.json

解答例

<template>
  <div>
    <v-simple-table>
      <thead>
        <tr>
          <th>名前</th>
          <th>出身地</th>
          <th>誕生日</th>
          <th>点数</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(user, index) in users" :key="index">
          <td>{{user.name}}</td>
          <td>{{user.pref}}</td>
          <td>{{user.birthday}}</td>
          <td>{{user.score}}</td>
        </tr>
      </tbody>
    </v-simple-table>
    <p>{{users}}</p>
  </div>
</template>

<script>
const users = require("~/users.json");
export default {
  data: function() {
    return {
      users: users
    };
  },
  methods: {},
  computed: {}
};
</script>

アプリケーションを作ってみよう

prog-ac.hatenablog.com

componentの練習(v-model)

上記components/OkCancelDialog.vue にボタンOK/Cancelを配置し、@onOk、@onCancelでemitを実装し、ボタン押下時にダイアログを閉じよ

解答例

OkCancel.vue

<template>
  <v-dialog v-model="dialog" persistent max-width="290">
    <v-card>
      <v-card-title>{{title}}</v-card-title>
      <v-card-text>{{message}}</v-card-text>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn @click="onCancel">キャンセル</v-btn>
        <v-btn @click="onOk">OK</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script>
export default {
  props: {
    title: "",
    message: "",
    value: false
  },
  data: function() {
    return {};
  },
  methods: {
    onOk() {
      this.$emit("onOk", this.title, this.message);
    },
    onCancel() {
      this.$emit("onCancel", this.title, this.message);
    }
  },
  computed: {
    dialog: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      },
    }
  }
};
</script>

index.vue

<template>
  <div>
    <v-btn @click="openDialog('ダイアログ１','神戸')">ダイアログ１</v-btn>
    <v-btn @click="openDialog('ダイアログ２','プロアカ')">ダイアログ２</v-btn>
    <ok-cancel-dialog
      @onOk="onOk"
      @onCancel="onCancel"
      v-model="dialog"
      :title="dialogTitle"
      :message="dialogMessage"
    ></ok-cancel-dialog>
  </div>
</template>

<script>
import OkCancelDialog from "~/components/OkCancelDialog";
export default {
  components: {
    OkCancelDialog
  },
  data: function() {
    return {
      dialog: false,
      dialogTitle: "",
      dialogMessage: ""
    };
  },
  methods: {
    openDialog(title, message) {
      this.dialogTitle = title;
      this.dialogMessage = message;
      this.dialog = true;
    },
    onOk(title, message) {
      this.dialog = false;
      console.log("onOk(): ", title, message);
    },
    onCancel(title, message) {
      this.dialog = false;
      console.log("onCancel(): ", title, message);
    }
  },
  computed: {}
};
</script>