3/10 Vue.js 学習議事録

[ryu-sugi]

オブジェクトとは

・プログラムの観点から「動くモノ」という性質を持つモノのこと。

プロパティとは

・モノの属性を表す量のこと。

メソッドとは

・モノが行う動作のこと。

コンポーネントについて

・Vue.jsでは単体のオブジェクトを「コンポーネントと呼ぶ」 　→ コンポーネント=単体のオブジェクト ・1つ以上のコンポーネントを組み合わせた物がアプリケーションと考えられている。 ・Vue.jsでは new Vue({...})でコンポーネントを生成することで始まる。 ・コンポーネントの中で使うデータやメソッド→あらかじめ引数として渡す。→単純な数値や文字列では扱いきれない為→名前を持つプロパティとしてオブジェクト表記する。→決まった名前にプロパティを持っている必要がある。

[ryu-sugi]

Vueコンポーネントが持てる主なプロパティの説明

・elオプション = new Vue({})で生成したコンポーネントのインスタンスを→HTML要素に結びつけるプロパティ。 ・dataオプション = コンポーネントに保持するデータを定義する。 ・methodsオプション = コンポーネントが持つメソッド(動作)を定義する。

ライフサイクルハック

・コンポーネントがDOMと結びついた瞬間や、DOMからコンポーネントが削除された瞬間など、特殊なタイミングで →Vueが自動的にコンポーネントへ通知を送ってくれる仕組み。 →書式「ハック名: 関数定義」のようにオブジェクト表記を使うがハック名は予め決待っている。

ディレクティブ

・コンポーネントを結びつけたHTML要素→Vueの監視化に置かれ、「-v」で始まる属性の併用で様々な機能が利用できる。

スコープ

・データ(関数)の有効範囲のことをスコープという。 →関数の中でのみ有効→ローカルスコープ →関数の外でも有効→グローバルスコープ 　→誤作動を防ぐため原則はローカルスコープを使い、独立性を保つコードを意識する。

[ryu-sugi]

三項演算子 (2-4レンダリング)

・三項演算子はif~elseのような条件分岐と等価 →Javascriptだけでなく、多くのプログラミング言語でサポートされている。 →書式：[条件式 ? 条件式が成立した場合に実行する式 : 条件式が不成立の場合に実行する式]

[ryu-sugi]

属性にバインド(結びつけ)する

・バインド(紐付け)したいデータのプロパティ名を属性値に記述。 →属性名の前に「v-bind:」をつける。 → 書式 : <HTML要素名 v-bind : 属性名 = "プロパティ名">

{{...}} マスタッシュ構文 について

・マスタッシュ構文という特殊なテンプレート構文で、 →「要素内容にバインドする場合にのみ使える」 　※属性にバインドする場合は使わないように。

スタイル(style)属性にバインドする

・要素に直接スタイルシートを指定する場合 → Vue.jsのデータをバインドする際はCSSプロパティ名をキャメルケースで記述→値にはバインドしたいアプリのプロパティ名を記述する。 →書式 <要素名 v-bind:style="{CSSのプロパティ名(キャメルケースで記述): アプリケーションのプロパティ名}">