まえがき
Vue.js #2 Advent Calendar 2017の記事です。
フロント初心者なので、vue.js固有の話とフロントフレームワーク全体の話が混ざっているかもしれませんが、ご容赦下さい。
どのページにも表示されるheaderをつくりたい
vue-routerを使ってroutingを行いつつ、一番上に常にheaderを置きたかった。
はじめは「単一コンポーネントだし全てのページの最初におけば良いでしょ」とかおもっていました。
問題
$project_top/src/components/HelloWorld.vueに< router-view>を入れてもが動かない。
<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を呼び出せば良いらしいです。
つまりこういうことでした。
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view name='top_navigation'>
<router-view name='contents'>
</div>
</template>
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方法が分からない
ある1つの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 ベースのツールについてまだ詳しくない場合)。
忠告は聞くべき