Programmers Office

こちらのコースをやってみました。以下、単なるメモです。

Vue JS Crash Course

https://github.com/bradtraversy/vue_crash_todolist

node10の頃

Vue CLI インストール

https://cli.vuejs.org/guide/installation.html

$ npm install -g @vue/cli
$ vue --version
@vue/cli 4.3.1

4なんだ・・・

$ vue create test
いっぱいエラー出てるけど・・・

$ cd test
$ npm run serve

開きました

cd ..
vue ui

Vue プロジェクトマネージャ 画面が自動で立ち上がる
http://localhost:8000/project/select

現在のフォルダのまま（testが表示されているフォルダ）
vue_crash_todolist
他はデフォルト
↓
デフォルトプリセット
↓
インストール完了すると、「プロジェクト ダッシュボード」ページが表示される

ダッシュボード画面

プロジェクトタスク画面

main.js がエントリポイント

アロー関数（=>）の復習などしながら（けど、render: h => h(App)　はやはり難しいと思ったら下記でなんとなく分かった！）、App.vue の仕組みの説明。
Vue.jsのrender: h => h(App)について調べた

style記述は、上記のgithubからもらってくる。

Component「Todos.vue」を作って、App.vueで読み込む。

v-bind
https://jp.vuejs.org/v2/guide/class-and-style.html

https://jp.vuejs.org/v2/api/#v-bind

もっと基礎の勉強はこちらの方が良い？

https://vueschool.io/courses/vuejs-fundamentals

emitの意味は発射！

App.vue

36: this.todos = this.todos.filter(todo => tood.id != id);
  36:38  error  'todo' is defined but never used  no-unused-vars
  36:46  error  'tood' is not defined             no-undef

解消しなかった

JSONPlaceholder
今回はこれが使える

https://jsonplaceholder.typicode.com/todos

npm i axios

やはり本当の初心者向けではないかな。