JavaScript
vue.js
vue-router
vue.js2
vue-cli

【2017.11.15更新】Vue.js初心者のぼくがつまづいたところメモ

Vue.js 初心者のぼくがつまづいたところメモ(随時更新)

Vue.js楽しいけど、日本語の文献まだまだ少ないなぁ...。

Vue.js全くの初心者の僕がつまづいていった、
馬鹿みたいに初歩的なエラーから、誰もが陥る落とし穴まで
つらつらとメモしていきます。
(だんだんと書き足していくので、気長に待ってください)

※Vueならワイに任せとけって方は、アドバイスや参考記事などいただけると泣いて喜びます。

1. vue-routerで "/"以外にアクセスできない

index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/Helloworld'
import Register from '@/components/Register'

export default new Router({
  routes: [
    { path: '/', component: Helloworld}
    { path: '/register', component: Register }
  ]
})

http://localhost:8000/
→ アクセスできる

http://localhost:8000/register
→ルートパスのコンポーネントが表示される!!!なぜじゃ!!!!
しかも、なんかurl変わってる!!!なんやこのシャープ!!!
http://localhost:8000/register/#
```

結論

こうしたらいける模様
http://localhost:8000/#/register

HistoryモードとHashモードなるものがある模様。(@kimama1997 さんありがとうございます。)
https://router.vuejs.org/ja/essentials/history-mode.html
http://den2sn.hatenablog.com/entry/2017/06/22/120018

理解しきれてないので、自分なりに噛み砕けたら補足解説いれますm(_ _)m

2. this.$router.pushでリダイレクトしたい(できない)

component.vue
<template>
  <textarea :value="input"></textarea>
  <div id="submit" v-on:click="addFeed">Submit</div>
</template>


<script>
methods: {
  addFeed(e) {
    axios.post("http://localhost:3000/feeds",
      {
        feed: {
          text: this.input
        }
      }
    ).then(function(res) {
      _this.$router.push({ path: "/"})
    })
    e.preventDefault();
  }
}
</script>



[Error]undefined method this.$router .........!
できない...........!

もはやVueの問題でもなんでもなかった(初歩的)

axiosの.doneでthisが変わっていただけでした。
let _this = this

component.vue
<template>
  <textarea :value="input"></textarea>
  <div id="submit" v-on:click="addFeed">Submit</div>
</template>


<script>
methods: {
    let _this = this
  addFeed(e) {
    axios.post("http://localhost:3000/feeds",
      {
        feed: {
          text: this.input
        }
      }
    ).then(function(res) {
      _this.$router.push({ path: "/"})
    })
    e.preventDefault();
  }
}
</script>

3. 親コンポーネントから子コンポーネントにどうやってdata渡すんでしょうか......。

長くなったのでここに書きました!
Vue.js2系で親コンポーネントから子コンポーネントにdataを渡す

4. computed とか created とか mounted とか何がちがうんですか!!!!!!

これから書きます。