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

vue.jsを触ってみた

More than 3 years have 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 ベースのツールについてまだ詳しくない場合)。

忠告は聞くべき

forestsource
twittter:https://twitter.com/forestsource
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