vue.js
Vue.js #2Day 22

vue.jsを触ってみた

More than 1 year has passed since last update.


まえがき

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方法が分からない

ある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()
},

https://jp.vuejs.org/v2/api/index.html


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


感想

https://jp.vuejs.org/v2/guide/#Vue-js-%E3%81%A8%E3%81%AF%EF%BC%9F


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


忠告は聞くべき