vue.jsでアプリ作成中にわからなくなったことまとめ【Vue.js初心者】

vue.jsは細かい単位でパーツに分けて、テンプレートを読み込む形で表示を作成するので、入れ子のようになっている。

なので、途中から自分でもテンプレート間の依存関係が分からなくなりがちです。特に、vue.js自体に慣れていない時はなお。

el

vue.jsの説明とかでよく見るやつ。

例）el: '#app'

elはvueのインスタンスが対象とする要素を定義するもの。

上記の例で言うと、HTML要素のdivタグなどの中にid="app"とすると、その中だけがvueの対象とすることができる。

v-○○

ディレクティブという

v-key

v-forとセットで使う
v-forで展開する要素のidを追跡させる。

配列のindexをv-keyにすると要素を削除したときなどにindexが自動で割り振り直されてしまい、要素の挙動を追跡できなくなる。

props

親コンポーネントから子コンポーネントにデータを伝えるために使う。

(子コンポーネントから親の場合はemitを使う)

子コンポーネントでpropsに名前を設定

親コンポーネントでprops名にデータを指定する

上記で子コンポーネントから親コンポーネントのデータを参照できる。

computed

算出プロパティ：computed property

dataとmethodsの特性を合わせ持っている。

結果がcacheされて、キャッシュの値が使われる。

computedと依存関係にあるものに基づいてキャッシュされる。

依存関係にあるものが変化したら、それに応じて、計算される。

v-model

双方向のデータbinding。HTML側とJavaScript側、双方向からデータのやりとり、反映がされる機能。

v-bind

v-modelとの違いが疑問に思いがち。

JavaScript側からHTML側へデータを操作する。

JavaScript側からHTML側への一方通行のため、v-bindではHTMLが変更されても検知できない。

mounted

mountedはライフサイクルフックと呼ばれる。vueを実行するときの初期化の決められたタイミングで呼ばれる関数。

methods

自分で独自の関数を定義できる。

クリック、マウスオーバーなど、HTMLに対して行われたイベントと組み合わせて使う。

hogeという関数を定義したら、下記のように使える。

<button v-on:click="hoge">ボタン</button>

→button要素をクリックしたら、methodsで定義したhoge関数を実行。

ちなみに v-on: の部分は@で置き換えることができる。

v-on:click → @click