Vue.js入門 #Vue.js

社内勉強会の時のメモです。
ざっくりとVueを触った手順とできたこと。

環境準備

※ Nodeのインストールが必要 v8で動作確認（古いと動かない場合がある）

1.vue-cliのインストール
$ npm i -g vue-cli

2.vueコマンドが使えるようになったか確認（バージョンが出たらOK）
$ vue --version

3.Vue.jsのテンプレートを利用してプロジェクトを作ってみる。
$ vue init webpack-simple my-project
プロジェクトネームとか聞かれるのでとりあえずエンターを押しまくる。

$ cd my-project
$ npm i

以上のコマンドで、my-projectフォルダにVueのテンプレートが一式落ちてきていろいろ試してみることができる。

4.確認用ブラウザの立ち上げ
$ npm run dev

App.vueの中身

<template>...</template> 　HTMLを記述
<script>...</script> 　　　jsを記述
<style>...</style>　　　　 CSSを記述

App.vueの中身を見ると、vueファイルの構造は大きく３つに分かれていることがわかる。

データバインディング

Vue.jsではHTML内で{{...}}を用いて記述した箇所と、script内のDataに記述した値がつながっている。

<h1>{{ msg }}</h1>
<a :href="url">link sample</a>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      url: 'https:chatbox-inc.com'
    }
  }
}
</script>

タグの属性に値を入れたい時は属性名の前に:をいれる。

イベントハンドリング

サンプル1_カウンターボタン

<a @click="countUp">eventButton</a>
<p>{{counter}}</p>

<script>
export default {
  name: 'app',
  data () {
    return {
      counter: 1
    }
  },
  methods: {
      countUp() {
          this.counter++;
      }
  }

}
</script>

処理に関することはmethodsに記述する。
これでeventButtonがクリックされると{{counter}}の数字が増える処理が行われる。

サンプル2_要素の表示/非表示

<a @click="toggle">message Show Button</a>
    <p v-if="showMessage">message</p>

<script>
export default {
  name: 'app',
  data () {
    return {
      showMessage: true
    }
  },
  methods: {
      toggle() {
          this.showMessage = !this.showMessage
      }
  }

}
</script>

message Show Buttonをクリックするとmessageを出したり消したりできる。

コンポーネントの利用

コンポーネントは.vueファイルで作成することができる。

▼ 新たに作ったExample.vueにサンプルコンポーネントを定義する

<template>
    <div>
        サンプルコンポーネント
    </div>
</template>

別ファイルで定義したコンポーネントの参照はimport文を用いて行うことができる。

▼ App.vueでExample.vueを参照する

<script>
import ExampleComponent from './Example.vue'
</script>

import後名前をつけて登録することでの中で利用可能なタグとなる。

▼ App.vueで読み込んだExampleComponentをコンポーネントとしてmyComponentタグに登録する。

<script>
import ExampleComponent from './Example.vue'
    export default {
        components: {
          myComponent: ExampleComponent
        }
    }
</script>

▼ 登録したコンポーネントを使用する

<myComponent></myComponent>

↓ HTML結果

<div>
    サンプルコンポーネント
</div>

Vue.jsによるSPA開発

JSアプリケーションにおける画面状態遷移では、ルーティングのライブラリを用いた手法が一般的に使われる。
Vue.jsではVueRouterと呼ばれるルータライブラリを用いてSPAを構築するのが一般的。

1.VueRouterをインストールする

npm i vue-router --save

2.`src/main.js` にVueRouterの記述を行う

▼ main.js

main.js

import VueRouter from 'vue-router'
Vue.use(VueRouter)

var router = new VueRouter({
    routes : [
      // ここにルートを記述
    ]
})

3.ルートを記述する

const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
// インポートして別ファイルから参照
import ExampleComponent from './Example.vue'
import Post from './Post.vue'


var router = new VueRouter({
    routes : [
　　　　// アドレスと表示させたいコンポーネントを紐付けて記述する
      { path: '/foo', component: Foo },
      { path: '/bar', component: Bar },
      { path: '/', component: ExampleComponent },
      { path: '/post/:id', component: Post }
    ]
})

4.ルートを利用する

▼ src/App.vue

<template>
　<router-link to="/">top</router-link>
        <router-link to="/foo">foo page</router-link>
        <router-link to="/bar">bar page</router-link>
        <router-link to="/post/2355">投稿2355</router-link>
        <router-link to="/post/0655">投稿0655</router-link>

        <router-view></router-view>
　　　　
</template>

の設置場所でURLに応じで指定されたコンポーネントと切り替わる。
ルートのURL切り替えにはrouter-link要素が利用できる。hrefではなくto要素にルートのURLを記述する。

本番用サーバにアップロード

ブラウザでvueは認識できないので、
npm run buildによって吐き出されるdist/build.jsとHTMLの２つのみサーバにUPすればOK.

追記（src/Post.vue）

Post.vueをうっかり記述忘れてたみたいなので、とりあえず補足という形になりますが記載しておきます。
▼ src/Post.vue

<template>
    <div>
        <h1>{{title}}</h1>
        <p>投稿のID: {{$route.params.id}}</p>
    </div>
</template>

<script>
    export default {
        data() {
            return{
                title: "記事のタイトル"
            }

        }
    }
</script>

Vue.js入門