読書メモ Vue.jsの処理

Vue.jsの処理について、初歩的だけど大事そうなところメモ。本のコピペ 🙏

まずはDOM要素にVueインスタンスをマウント

  • Vue.jsの処理は、Vueインスタンスを生成し、DOM要素にマウントするところから始まる
  • オプションオブジェクトのelプロパティ指定したDOM要素が、マウントの対象 f:id:shimabukuromeg:20181005075309p:plain

マウントしたあとの表示に欠かせないdataプロパティ

  • dataプロパティには、UIの状態となるデータのオブジェクトを指定
  • dataプロパティプロパティに指定した値はテンプレートから参照できて、リアクティブシステムに乗っかれる

書いてみたメモ

f:id:shimabukuromeg:20181005084235p:plain

Mustacheというテンプレートエンジンの記法 {{}}Javascript側のデータを展開する

f:id:shimabukuromeg:20181005082710p:plain

f:id:shimabukuromeg:20181005083255p:plain

フィルタ

  • フィルタは汎用的なテキストフォーマット処理をする仕組み(書いてみたメモに追記)

f:id:shimabukuromeg:20181005095511p:plain

  • フィルタで定義したやつをテンプレートで使う

f:id:shimabukuromeg:20181005095720p:plain

算出プロパティ

  • あるデータから派生したデータをプロパティとして公開する仕組み
  • データに何かしらの処理を与えたものをテンプレートに渡したいときに使う
  • Mustacheで展開するには複雑すぎるときに使う(テンプレート側に直接複雑な式を書くのは、読みにくくなるしよくない)

f:id:shimabukuromeg:20181005102058p:plain

f:id:shimabukuromeg:20181005102156p:plain

f:id:shimabukuromeg:20181005102906p:plain

メソッド

2.10 comming soon...

ディレクティブ

2.9 comming soon... ディレクティブ量多そうなので別記事にメモろう

各プロパティ

今のとここ、dataとelとfiltersとcomputedを学んだ。もっと読み進めるぞー

f:id:shimabukuromeg:20181005075618p:plain

完成例

2章では、Vue.jsの基本機能を紹介してくてて、最終的には以下の文房具購入フォームができる。

jsfiddle.net