Vue.jsのリアクティブを実感してみます

Vue.jsはnpmからインストールしなくてもCDNですぐに勉強することができます。

idとel(多分エレメントの略)を紐づけます。{{~}}はmustache(マスタッシュ)と呼びます。dataには、app.priceというようにしてアクセスすることができます。以下をコーディングしてChromeで開きます。

app.priceをChromeの開発者ツールから代入してみます。(ここでいうappはvar appのappです)

Vue.jsのリアクティブを実感してみます

Vue.jsのリアクティブを実感してみます

こんな感じで、すぐにリアクティブに画面が変わります!

dataの中身は複数記述できます。

この値をHTMLでレンダリングする際にmustache(マスタッシュ)を使用します。

「{{name}}は{{age}}歳です」みたいにコーディングします。

v-ifv-elseというキーワードを使用してif~elseのようなレンダリングをすることができます。

ageを変更するとレンダリングも変わります。

Vue.jsのリアクティブを実感してみます

Vue.jsのリアクティブを実感してみます

v-forなんていう構文もあります。if~elseができるからfor文みたいなレンダリングが可能なようです。

JSONの中に配列を用意してあげます。上記だとemployeesというキーで配列を用意しています。値はJSON形式をカンマ区切りしているだけですね。

以下のように表示されます。

Vue.jsのリアクティブを実感してみます

Vue.jsのリアクティブを実感してみます

el,dataなどはVueコンポーネントが持っているプロパティと呼ばれるものです。

その他にもmethods,filters,computed,watchライフサイクルハックがあります。

次回methodsプロパティについて勉強しようと思います!

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA