Vue公式Docsを徹底解析

Vuejsを学んでいるのだけれど、公式ドキュメントや書籍などを参考にしているところ、
基本の形が複数あって何を信じればいいのかわからない。
さすがは多様性の時代。。。
プログラミング言語においても多様性が求められる時代なのでしょうか？

ひとまずひとつひとつ読み解いていきましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1573902/114b94d3-de9e-0de0-1f6f-bb3d94562252.png)
ん？もしかして書き方変わった...?

一旦チュートリアルからやり直してみよう。

# アプリケーションの作成

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1573902/3df4c7ac-fe7d-d1b7-9e24-b137f8074f43.png)

まず冒頭でvueを読み込み、そこから"createApp"を読み込むとのことですが
この"vue"は恐らくCDNから取得してきているのかな？
"createApp"がそもそも何なのかはよく突き詰めていなかった。。
まあ何か重要なオブジェクトとして考えておこう。

その下で定数"app"を宣言。
そこにcreateAppオブジェクトを格納。今の所処理は何もない。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1573902/a0fab123-a227-3457-1af3-e85326fd18a9.png)

おお、分からない。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1573902/a4ac1fc1-ee07-2fce-34de-d7a47fe7f6e7.png)
プログラミングチックな説明ですね。
Vueを使ってAppを作成する。
それが前にやっていた"createApp"ということなのでしょうか？
"createApp"を使って"app"に設定をすることにより、
(定数"app"に"createApp"オブジェクトを格納することにより、)
そのオブジェクト内の変数や関数を使用できるようになる。
それが __アプリケーションのインスタンス__ 。
"createApp"を使ってインスタンス化したオブジェクト。インスタンス。"app"はインスタンス。

「const app = createApp({})」
をすることでアプリのインスタンスは生成したが、
それだけでは使用できない。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1573902/d4324c06-ba3b-2dc2-bd9a-e8170b28a82a.png)

"app"をある特定の要素に対してマウント(着床)しないと、
その処理・変数がレンダリングされない。
その為の __app.mount('#app')__ は必須となる。

ちなみにこの場合の __'#app'__ は『コンテナ引数』というらし。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1573902/4d2865d3-42ae-1c55-e714-0ab54d784804.png)
ちょくちょく登場してくる『ルートコンポーネントの言葉の意味がよく分からない。』
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1573902/899f97ab-c673-ea82-bd24-e1f11b9a7b5d.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1573902/d36d0112-8242-ed1f-2751-291077d6cb7c.png)

これは"component"を使うことで、特定のコンポーネントをどこでも使えますよということ。
コンポーネントとは、HTML内の< img >とか< button >とかそういうもの。
それと同じように< TodoDeleteButton >という要素も使えるよという話。 

さっきまでよく話に出てきたルートコンポーネントについては
下記の記事にて紹介しているっぽいので後ほど確認しておく

https://qiita.com/moccow/items/d2070c9a622a09244eef

# テンプレート構文
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1573902/f4d53854-f3e0-24bf-aca0-80d9e4008d9d.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1573902/53ad084f-729b-9193-57ac-4cc953c31397.png)

マスタッシュ構文を使用してプロパティを埋め込もうとするとき、
プロパティ値が例えばHTML要素のような文字列だとしても、
{{  }}の中身では単なる文字列として認識されてしまうので、
タグまで記載されてしまう。

もしこのプロパティをHTML変換したい場合には
__v-html__ ディレクティブを使用してイコールでプロパティを結び付ければいい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1573902/7aa72515-ad92-bb8e-c629-868fefd0d9dd.png)

# v-bind

https://ja.vuejs.org/guide/essentials/template-syntax.html#attribute-bindings

v-bindは非常によく使われるディレクティブだという。
なのでDocsを良く読み込んでおくこと

できることを以下にまとめておくと、
・属性の中でプロパティを使用
・属性のboolenを操作できる(disable要素等)
・オブジェクトとしてまとめておくことで、複数の属性を渡すことができる。
・JavaScriptの式を使える(※イマイチぴんと来ていない)
・関数によって属性値を決めることができる。

v-bind含めその他のディレクティブは過去にまとめた記事があるので、そちらを参考に

https://qiita.com/raisack8/items/5d403d7280519c19b763

いや、しかしVuejsの公式ドキュメントは読みやすいし分かりやすい。

# リアクティビティーの基礎
そもそも「リアクティビティ」とは
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1573902/0c06f4be-58e3-3633-b4a5-7dcbd98e2d28.png)

https://ja.vuejs.org/guide/essentials/reactivity-fundamentals.html

このページは要素に紐づけずに単体で実行するような処理なのかな？
よくわからないので一旦飛ばし。
ちなみに"export default"はJavaScriptの記述法らしい。

# 算出プロパティ

compute
の説明かな。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1573902/e9a52049-c7b3-c79e-7dbc-cc35de2dffcc.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1573902/24c08bdc-169e-768b-baba-8c43fe2d8f90.png)
ん？たしかに
算出プロパティはリアクティブな依存関係にもとづきキャッシュされる

|算出プロパティ(compute)  |メソッド呼び出し(method)  |
|---|---|
|プロパティが変更されたら実行  |画面が描画される度に実行  |
|プロパティが変更されない限りは実行されない  |キャッシングしない  |

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1573902/453eef98-5136-9e4e-14cc-f23a18c7f83f.png)

ちょっと算出プロパティは難しいかも！

# 小休憩
とまあ、この辺りは根本の根本って感じな気がする。
ここまで深く知らなくても一旦はコードかけるはずなので、肝心なVueの書き方を見ていこうと思うので、
残りはDocsを読み込んでおいてくれ

https://ja.vuejs.org/guide/essentials/component-basics.html#defining-a-component


https://reffect.co.jp/vue/understaind-vue-basic#Vuex-2


https://techblog.roxx.co.jp/entry/2019/03/29/120000


https://v2.ja.vuejs.org/v2/guide/#%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%AB%E3%82%88%E3%82%8B%E6%A7%8B%E6%88%90

https://v2.ja.vuejs.org/v2/guide/single-file-components.html

https://reffect.co.jp/vue/vue-jest-test