Vueのコンポーネントファイルをいじってみた件

前回はインストールしたファイルをどのように描画しているか順をおって説明しました。今回はTODOリストをつくって行けるようにいじってみたいと思います。

Todo.vueファイルを作る

まずはTodo.vueファイルを作りルーターに渡していきたいと思います。
まずは新規ファイルを作成し、そこに最低限の記述だけ先にしていきます。

// Todo.vue
<template>
<div class=”todo”>TODO LIST</div>
</template>
<script>
export default {  
name: ‘todo’
}
</script>

templateタグの中に描画する内容を記述していきます。
scriptタグの中にあるexport defaultは外部にデータを渡すための構文です。
呼び出したいファイルでimport構文を書くことでこのファイルで記述した内容が利用可能になります。

ルーティングの設定

Todo.vueファイルをApp.vueファイルで呼び出せばTodo.vueの内容が描画されるのですが、今回はVue Routerを使いApp.vueではrouterを呼び出しています。そのためTodo.vueを src / router.js ファイルでルーティングの設定をしてApp.vueに呼び出しましょう。

import Vue from ‘vue’
import Router from ‘vue-router’
import Todo from ‘./views/Todo.vue’

Vue.use(Router)

export default new Router({
  mode: ‘history’,
  base: process.env.BASE_URL,
  routes: [
    {
      path: ‘/’,
      component: Todo
    }
  ]
})

import {component name} form ‘{ファイルのパス}’
でTodo.vueファイルを呼び出して、routesのなかで設定していきます。
ここでもexport構文を使い、外で使えるように設定しています。
これをApp.vueで呼び出しているわけですね。
routesのプロパティは

• path: urlの記述
• component: 使用するコンポーネントの名前をしてします。(import構文でつけた名前)

このようになっています。本当はもっとたくさんのプロパティがあるのですが、リファレンスは別の機会にまとめていきたいと思います。
ここまでの記述でlocalhost:8080/にアクセスするとTodo.vueコンポーネントが描画されているはずです。

無事描画されました！
Home | Aboutのメニューに関してはApp.vueに記述されていますのでそちらで設定して行きます。
ということで次はApp.vueでヘッダーとフッターを作っていきたいと思います。