Help us understand the problem. What is going on with this article?

Vue.js入門

More than 3 years have passed since last update.

社内勉強会の時のメモです。
ざっくりと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ファイルの構造は大きく3つに分かれていることがわかる。

データバインディング

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の2つのみサーバに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>
cotolier_risa
良いと思ってもすぐ忘れるのでQiitaに記録していけたらなぁと思います。 ミスや不具合等ありましたらお気軽にご指摘いただけると助かります。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away