先日お仕事でvue.jsを使う機会があり、公式チュートリアルに取り組んだもののフロントのJS経験がなかったり、そもそもコーディング自体そこまでできる人間ではなく苦戦したので軽くヒントになりそうなメモ。完全に自分用です。
チュートリアルはこちらから↓
optionapi、SFCを使ってやってました。
2.宣言的レンダリング
https://ja.vuejs.org/tutorial/#step-2
<script>でデータプロパティを定義しておけば{{}}で呼び出せるよ、というやつ
答え見るとcountがあるけどなんで入ってるかはよくわからなかった
3.属性バインディング
https://ja.vuejs.org/tutorial/#step-3
<template>で属性を文字列にバインドしてやることで<style>でdata属性を変更できるよ、というやつ
別に例に倣って<div>は使わなくてもよいが、使うことで複数行に反映することもできる
【今回バインドする属性：class なぜ？→[.クラス名]でスタイルの指定ができるから（そういう構文）、CSSの領域らしい】
4.イベントリスナー
https://ja.vuejs.org/tutorial/#step-4
v-onを使ってイベント発生時の処理を実装しよう、というやつ
methods:{}の形で中に処理内容を実装する。
5.フォームバインディング
https://ja.vuejs.org/tutorial/#step-5
v-modelを使うと動きを変えずにテキスト入力のv-onを省略できるぞ、というやつ
@はv-onの省略形であるため本筋とは逸れるがv-onで置き換えてみることもできる
v-onを省略できるとmesods:{}の実装も不要になる。
v-modelはチェックボタン、ラジオボタン等でも機能する。
参考：https://ja.vuejs.org/guide/essentials/forms
6.条件付きレンダリング
https://ja.vuejs.org/tutorial/#step-6
v-if,v-elseを使用することで条件分岐を実装できるぞ、というやつ。
今回は条件分岐をボタンの押下によって切り替えているため、ボタンでイベント検出（v-onを使用）→methodsに処理の実装をする。
実装内容はbooleanの切り替えなのでこれをどのようにイベント発火毎に切り替えるか考えればよい。
awesomeがbooleanとして定義されているので使用する。
7.リストレンダリング
https://ja.vuejs.org/tutorial/#step-7
v-forを使用することで配列の操作ができるぞ、というやつ（内部的には繰り返し処理だと思う）
v-for ○○ in ××、という記法（エイリアス in 配列名）
今回は大きく分けて2つのイベントを実装する必要がある。
①配列へ値の追加
②配列から値を削除
<ul><li>は箇条書きをするためのタグ。この部分で配列を出力している。
①は.push()を用いる。()は配列に追加する値を属性で指定する。
②は.filter()を用いる。()は絞り込みの条件を指定。今回は、イベントが発火されたitem以外を表示するように指定する。
・どちらもjsのメソッド。vueにはfiltersというものがあるので混同に注意。
・②はアロー関数を使用している。覚えて！
引数 => 式の形は引数を受け取り、[=>]の後の式を戻り値とする。
8.算出プロパティー
https://ja.vuejs.org/tutorial/#step-8
値が変わると依存しているcomputedが実行される。これを利用してチェックの状況を即時反映しよう、というやつ。
参考：https://qiita.com/kaorina/items/bb261a119b9f02e02c2d
v-forの依存先をfilteredTodosに変更→filteredTodosでは条件分岐処理をし、戻り値として配列を指定する。
戻り値をarray型にすることで、前項のv-for ○○ in ××（エイリアス in 配列名）に当てはめることができる。
変更があれば.filterで配列を書き換え、なければ既存の配列をそのまま返す処理の実装が必要。
9.ライフサイクルとテンプレート参照
https://ja.vuejs.org/tutorial/#step-9
厳密には違うが、mounted()は実行時に実行されるものと思ってもよい。参考：https://qiita.com/chan_kaku/items/7f3233053b0e209ef355
コード上でpElementRefは[Hello]であるが、mounted()でtextContentを書き換えをするのがゴール。
10.ウォッチャー
https://ja.vuejs.org/tutorial/#step-10
watchオプションを使用することで値が変化したときにメソッドの実行ができるよ、というやつ
fetchData()で受け取ったデータをjsonに格納して表示している。
watchオプションでTodo idの値を監視し、変化があったときにapiを叩く処理を実装する。
11.コンポーネント
https://ja.vuejs.org/tutorial/#step-11
<script>でimportしたら別ファイルのコンポーネントが使えるよ～というやつ？
これはそういうものとして覚えるのがいいと思ってる
12.props
https://ja.vuejs.org/tutorial/#step-12
親コンポーネントから子コンポーネントに値を渡せるよ、というやつ
予め子コンポーネントでpropsオプションを定義しておき、属性と型を指定。親コンポーネントから呼び出す際に[属性=]の形で指定してあげる。
入力値は親コンポーネントで定義しておく。
13.イベントの発行
https://ja.vuejs.org/tutorial/#step-13
子コンポーネントに実装したメソッドを親コンポーネントで実行しよう、というやつ
子コンポーネントから親コンポーネントに値を渡すときは[emits]オプションを使用する
アロー関数を使用している。覚えて！
引数 => 式の形は引数を受け取り、[=>]の後の式を戻り値とする。
14.スロット
https://ja.vuejs.org/tutorial/#step-14
propを使わずとも<子コンポーネント名>[渡す内容]子コンポーネント名>で値の受け渡しができる。
子コンポーネントでは[渡された値がないときの表記]という記述が必要。おそらく空欄でもOK。
今回は親コンポーネントで定義されているmsgの値の受け渡しを実装したい。
あとがき
ひと月前に復習用にザックリメモしたものをアウトプットの一環として転記しただけなので（内容の精査はしてない）解釈の誤り等ある気がする…
業務で一か月触ったらリファレンスもそこそこ読めるようになってきた。個人的にvueは1ファイル完結なのがかなり素敵だなと思っている。
採用されうる技術スタックの競合としてはReactがあるが、余裕があれば勉強してみたいですね。
初見はめっちゃ苦労したのに、vue.jsのチュートリアルはわかりやすい！ってみんな言ってて悔しかったです