vue + firebase 02_簡易To doリストアプリ

Javascript Vue Firebase

■Bootstrap Vueのインストール

  1. 公式サイトよりコマンド入手。

    npm install vue bootstrap bootstrap-vue

    をアプリのディレクトリで実行。

  2. パッケージのインポート。

    import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'

    を　src/router/index.js　にコピペ。

  3. さらに

    // Import Bootstrap an BootstrapVue CSS files (order is important)

    import 'bootstrap/dist/css/bootstrap.css'

    import 'bootstrap-vue/dist/bootstrap-vue.css'

    // Make BootstrapVue available throughout your project

    Vue.use(BootstrapVue)

    // Optionally install the BootstrapVue icon components plugin

    Vue.use(IconsPlugin)

    をコピペして準備完了。

    ここまでのindex.jsは以下。

import Vue from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
import Router from 'vue-router'
import Index from '@/pages/Index'
// Import Bootstrap an BootstrapVue CSS files (order is important)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
// Make BootstrapVue available throughout your project
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',
      name: 'Index',
      component: Index
    }
  ]
})

■pagesディレクトリ作成

  1. src/pages ディレクトリを作成。

    その中にindex.vue　を作成。

  2. index.vue　を構築する。

    vba　で雛形を用意。

  3. コンポーネント名をつける。

    name: "Todo"

    としておく。

  4. 次にtemplateの中にページタイトルを入力してゆく。

    基本的にtemplateにはhtmlを入力してゆく。

    とりあえずh1を入れておく。

    ここまでのindex.vueは以下。

<template>
  <div>
    <h1>Todoリスト</h1>
  </div>
</template>
<script>
export default {
  name: 'Todo'
}
</script>
<style scoped>
</style>

■index.jsの修正とルートディレクトリの変更

  1. src/router/index.jsを開く。

    import Router from 'vue-router'

    の下に

    import Index from '@/pages/Index'

    と入れる。

  2. ルーターを変更。

    path: '/',

    name: 'Index',

    component: Index

    と書き換える。

    import HelloWorld from '@/components/HelloWorld'

    は不要なので削除。

    そして

    src/components/HelloWorld.vue

    も不要なので削除。

  3. 再度

    npm run dev

    で確認

    localhost:8080

    で確認できる（そうターミナルに出てきていれば成功）

  4. ロゴも削除。

    src/App.vue

    の中にある

    を削除。

  5. localhost:8080

    で削除されていればOK

    ここまでのindex.jsは以下。

import Vue from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
import Router from 'vue-router'
import Index from '@/pages/Index'
// Import Bootstrap an BootstrapVue CSS files (order is important)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
// Make BootstrapVue available throughout your project
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',
      name: 'Index',
      component: Index
    }
  ]
})

■TodoForm.vue の新規作成とBootstrapVueを使って作り込み

  1. src/components ディレクトリに

    TodoForm.vue ファイルを新規作成

  2. コンポーネント名を決める。

    name: 'TodoForm'

  3. bootstrapVueのコンテイナーコンポーネント（タグみたいなもの）「b-container」を使う。

  4. 次にインプットグループコンポーネントを用意し、インプットフィールドをラップしていきます(b-input-group)。

  5. 次にフォームインプットコンポーネントを用意します（b-input-group）。

    typeはtext.

    <b-form-input type="text" />

  6. 追加用のボタンを用意。

    インプットグループアペンドを使う。

    ここまでのTodoForm.vueのコードは以下。

<template>
  <b-container>
    <b-input-group>
      <b-form-input type="text" />
      <b-input-group-append>
        <b-button>Button</b-button>
      </b-input-group-append>
    </b-input-group>
  </b-container>
</template>
<script>
export default {
  name: 'TodoForm'
}
</script>
<style scoped>
</style>

■index.vueへコンポーネントの登録

コンポーネントの読み込みには、componentsオプション内に、使いたいコンポーネントを読み込んでいきます。templateのところで呼び出せるようにしますが、ここは小文字で書くのが仕様です。

index.vueは以下のようになる。ブラウザで確認。

<template>
  <div>
    <h1>Todoリスト</h1>
    <todo-form />
  </div>
</template>
<script>
import TodoForm from '@/components/TodoForm'
export default {
  name: 'Todo',
  components: {
    TodoForm
  }
}
</script>
<style scoped>
</style>

■TodoForm.vue ボタンカラー

ボタンカラーの変更は、ボタンコンポーネントにバリアントというプロパティをプロップスとして渡すことで変更することが出来ます。

<b-button variant="info">送信</b-button>

■TodoForm.vue 入力した値をデータプロパティに保存

ではデータオプションを追加し、バリュープロパティを持たせます。

<script>
export default {
  name: 'TodoForm',
  data(){
    return {
      value: ''
    }
  }
}
</script>

そして今回は、inputで入力した値を、そのままvalueプロパティに反映させたいので、v-modelというディレクティブを使用します。

<b-form-input type="text" v-model="value" />

vue.js内でのデータのやりとりをみていきたいので、chromenoのエクステンションを追加していきます。vue.js devtool です。

（vueで作られているものにだけ反応する優れもの）