Vueの基礎

Hello World

https://jsfiddle.net/shogo_t2525/w5m9qLd8/

・elオプションにDOMを指定

・dataオプションにリアクティブにするオブジェクト

リアクティブ

https://jsfiddle.net/shogo_t2525/w5m9qLd8/

オブジェクトの変更を検知してhtmlの表示を更新する

dataにあるもの => リアクティブ

constなど => 非リアクティブ

ディレクティブ

https://jsfiddle.net/shogo_t2525/Ls7o8mrb/

・v-から始まる特別な属性

・ディレクティブを使うことで様々な機能が利用可能

v-bind, v-for, v-if, v-onなど...

v-bind は省略可能

v-on は @に省略可能

コンポーネント

コンポーネント => 部品と思ってもらえればOK

毎回記述するのは面倒なので部品化しちゃいましょうって話

https://jsfiddle.net/shogo_t2525/6hscb41y/

・データの受け渡し

・親コンポーネントと子コンポーネントの関係性

　親コンポーネントから子コンポーネントはpropsにてデータを渡すことができる

　子コンポーネントから親コンポーネントに何かしたい場合はemitを使用する

computed

算出プロパティ => わかりにくい...

https://jsfiddle.net/shogo_t2525/0vzf2Lk3/

つまり

・computedで宣言されたものはcacheして保持する

・computed内のリアクティブなdataが変更された場合に再計算を行う