tanatiyo 今日のアウトプットは、せお丸さんのYoutube動画です！
せお丸さんは、 Symfony入門についての動画も挙げてくれていて、そこから私は認知するようになりました！
ちょうどVue.js３に関した動画も挙げてくれていたので、勉強させてもらいました！
以下、メモです_φ(･_･
※注意※
動画の内容を、勉強用として自分がわかりやすいようにまとめています。間違ったところもあるかもしれません。なのできちんとした情報をとりたい方は、私のブログは見ずに↑のせお丸さんの動画を見ることをお勧めします。
【Vue.jsとは】
JSのフレームワーク ※便利な機能がまとまったツールのこと
【メリット】
・HTML要素を部品化できる⇨コピペの駆逐、メンテナンスが楽になる
【環境構築】
CDNで読み込む方法（まずは試したい、という時）とnpmでインストールする方法（本格的に運用したい時）
Vue.js（単体）入門-初めてのプログラム
クリックイベント（v-on）v-onで指定したメソッドはmethods{}内でそのメソッドを定義する。
Vue.jsのIF文（v-if）
条件がtrueかどうかで表示、非表示を切り替える。
HTML属性の設定（v-bind）
class属性を操作することが多いイメージ。単純に文字列をdata内で定義して静的な処理を返すだけでなく、props属性と併せることで幅広いことができる。
Vue.jsのループ処理（v-for）
部品化（component）
props
propsで作ったcomponentのタグ内にpropsで文字列を指定することで、componentの表示される文字を変更できる。
また、componentのタグ内にいろんなディレクティブを設定できる。
この例では、v-for,v-bindを設定し、さらにv-forでcomponentをループ処理し、かつv-bindでpropsを動的に操作することで、ループで回した出力表示を変えることができている。
単体はここまで
【Vue.jsとの組み合わせ】
単体で使うことはほとんどない。Vueはコンパクトでシンプルなフレームワーク。
他のツールと併せて使うことがほとんど。
・Vue-router（ルーティング）・・・Webアプリケーションを作る時にルーティングの提供をしてくれるツール
・Vuex（データの状態管理）・・・Vueのデータの状態管理を行う
・Nuxt.js（VueベースのWeb-FW）
どのツールと組み合わせて使うかは、プロジェクトの現場で様々。
必要に応じてオプション的に学習すると良い。
【公式ドキュメント（v２）のディレクティブに関する説明】
