4
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

vue.jsを触ってみた

Posted at

まえがき

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

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

忠告は聞くべき

4
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?