「Vue.jsでCRUD操作を行ってみよう」の感想・備忘録

管理者

4年前

posted with ヨメレバ

Amazonで見る

Kindleで見る

kindle本「Vue.jsでCRUD操作を行ってみよう」のまとめ。

点数
感想
Vue.js + Fetch APIによるCRUD操作
Vue CLIでのESLint設定

点数

70点

感想

React版とほぼ同じ内容だった。

役に立つ情報は少なかった。

Vue.js + Fetch APIによるCRUD操作

npm init -y
npm install @vue/cli
vue create vueapp
（defaultを選択）
App.vueを修正

<template>
  <div>
    <p>サイト名：<input v-model="name" placeholder="Site Name"></p>
    <p>URL：<input v-model="url" placeholder="Site URL"></p>
    <p>
      <button @click="addTodo">登録</button>
    </p>
    <table>
      <tr v-for="site in sites" :key="site.id">
        <td>{{ site.name }}</td>
        <td>{{ site.url }}</td>
        <td><button @click="deleteTodo(site.id)">削除</button></td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      name: '',
      url: 'https://',
      sites: []
    }
  },
  created() {
    fetch('/sites')
    .then((res) => res.json())
    .then((data) => {
      this.sites = data;
    })
    .catch((err) => {
      console.log(err);
    });
  },
  methods: {
    addTodo() {
      fetch('/sites', {
        method: 'POST',
        headers: {
          'Content-type': 'application/json; charset=UTF-8'
        },
        body: JSON.stringify({
          id: this.sites.length + 1,
          name: this.name,
          url: this.url,
        }),
      })
      .then((res) => res.json())
      .then((data) => {
        this.name = '';
        this.url = 'https://';
        this.sites.push(data)
      }).catch((err) => {
        console.log(err);
      });
    },
    deleteTodo(id) {
      fetch('/sites', {
        method: 'DELETE',
        headers: {
          'Content-type': 'application/json; charset=UTF-8'
        },
        body: JSON.stringify({
          id: id,
        }),
      })
      .then(() => {
        this.sites = this.sites.filter((site) => {
          return site.id !== id;
        })
      })
      .catch((err) => {
        console.log(err);
      });
    }
  }
}
</script>

<style>
table {
  border-collapse: collapse;
}

td {
  border: solid 1px #000;
  padding: 6px;
}
</style>

Vue CLIでのESLint設定

Vue CLIでdefaultを選択（またはManuallyでESLint with error prevention onlyを選択）すると、package.jsonのeslintConfig のextendsにeslint:recommendedが設定される。

recommendedは以下のページでレ点が入っているルールが適用される。
https://eslint.org/docs/rules/

ルールを変更したい場合は、package.jsonのeslintConfigのrulesに定義する。
値はoff, warn, errorのいずれか。

"rules": {
  "no-extra-semi”: "off"
}