vue.jsを触ってみた

まえがき

Vue.js #2 Advent Calendar 2017の記事です。

フロント初心者なので、vue.js固有の話とフロントフレームワーク全体の話が混ざっているかもしれませんが、ご容赦下さい。

どのページにも表示されるheaderをつくりたい

vue-routerを使ってroutingを行いつつ、一番上に常にheaderを置きたかった。
はじめは「単一コンポーネントだし全てのページの最初におけば良いでしょ」とかおもっていました。

問題

$project_top/src/components/HelloWorld.vueに< router-view>を入れてもが動かない。

HelloWorld.vue

<template>
  <div class="hello">
    <p>routing top</p

    <router-view></router-view> <!-- ここ -->
  </div>
</template>

...(略)

当たり前でした。

vue-routerのcomponentを読み込んでいるのは src/main.jsです。
そこで呼び出しているcomponentsはApp。つまり、src/Vue.jsです。
src/componets/HelloWorld.vueが読み込めるはずがありません。
どうやるんだこれ、、、
vue-routerの公式をみてHintを探ります。

名前付きビュー
しばしば、ネストをさせずに同時に複数の view を表示する必要があるでしょう

あ、これです。このしばしばのケースです。
routingに名前をつけて、router-viewを通して別のcomponentを呼び出せば良いらしいです。
つまりこういうことでした。

App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view name='top_navigation'>
    <router-view name='contents'>
  </div>
</template>

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import NavigationBar from '@/components/NavigationBar'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: {top_navigation: NavigationBar, contents: HelloWorld}
    }
  ]
})

外部ライブラリのimport方法が分からない

ある１つのcomponentでaxiosを使いたかったので、src/index.jsにimportとして記述しました。
これでcomponentのmethodsの中でaxiosがつかえ、、、ないですね。
src/index.jsにimportが並んでいるからと言って、ここに書いても別のcomponentでは使えません。
.vueの世界にいると忘れがちになりますが、ここもjavascriptの世界です。

scriptタグでimportするだけでよいのです。

...HelloWorld.app
<script>
import axios from 'axios' //javascript
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'App'
    }
  }
}
</script>
...

arrowが使えない

  created: function() {
    this.hoge()
  },

書き換え後
  created: () => {
    this.hoge()
  },

data プロパティ(例 data: () => { return { a: this.myProp }}) でアロー関数を使用すべきではないことに注意してください。アロー関数は、this が期待する Vue インスタンスではなく、this.myProp が undefined になるため、親コンテキストに束縛できないことが理由です。

はい。documentを見ていないいませんでした。
結局createの中はarrowを使ったので、functionとアローが混ざるカオスな状態に。。。
ちなみに、methodsやwathch、その他もアロー関数をしようすべきでないと書かれています。

　オブジェクトの変更をしても描画されない

  data () {
    return {
      hoge: {name: ''}
    }
  },
  created: function() {
    this.hoge['price'] = 11
  },

はい。documentを(ry
$.se(this.hoge,)t

感想

Vue の他のインストール方法について、インストール ページで紹介しています。注意点として、初心者が vue-cli で始めることは推奨しません（特に、Node.js ベースのツールについてまだ詳しくない場合）。

忠告は聞くべき