ブラウザに自由自在に描画できるVue.jsの本質

ブラウザに自由自在に描画できるVue.jsの本質

JavaScriptのフレームワークの一つとして、まるでHTMLを記述するように、ブラウザに表示する要素を出し分けられるVue.js。その本質は、ブラウザがHTMLをツリー上に読み込んだDOMに対して、Vue自体が仮想DOMを予め生成し、その差分だけを実際のDOMに反映していく処理の流れにあること。

JS側に記述する処理方法に関しても「data」「methods」「filters」「computed」など、さまざまなオプションが用意されており、簡単な記述で見た目をどんどんと変えていくことができます。

これまではJQueryを利用してアニメーションを描くことも多かったですが、今後、Vue.jsが主流になっていくのかもしれません。

ありがとうございました!

目次

本のまとめ

▼読んだ本は?

■Vue.jsのツボとコツがゼッタイにわかる本

▼Vue.jsとは?

■ウェブアプリケーションのUIを構築するための、オープンソースのフレームワーク
■作成したUIをコンポーネント化し、HTMLタグとそっくりな構文でページに配置できる
■ページの描画内容をHTML形式のテンプレートで定義
■描画に使うデータをJavaScriptで定義
■DOMを操作するプログラムを書かなくても、ページの表示を変更できる

▼DOMってなに?

【1】ブラウザがHTMLを読み込む
【2】などの形で、ツリー状でメモリに読み込む
【3】このツリー状のデータを「DOM」と呼ぶ
【4】ツリーの節に相当する箇所を「ノード」と呼ぶ

▼仮想DOMとは?

■Vueがメモリー上に構築する仮想的なDOM
【1】Vueは実際のDOM更新の前に、仮想DOMを更新する
【2】仮想DOMにおける更新差分だけを抽出し、実際のDOMへノードの追加・削除を行う

▼プログラムの基本要素は?

■オブジェクト
└共通の性質をもった「動くモノ」
└例えば「自動車オブジェクト」

■プロパティ
└「モノ」の持つ属性
└例えば「メーカー・ナンバー」

■メソッド
└「モノ」が行う動作
└例えば「加速・原則・右折・左折」

■クラス=設計図
└オブジェクトが持つプロパティやメソッドを描いた設計図

■インスタンス
└クラスを元に作成されるオブジェクトのこと

▼Vue.jsで使えるプロパティ(オプションと呼ぶ)は?

■data
└描画に利用するデータを定義するプロパティ

■methods
└処理を行うメソッドを定義するプロパティ

■filters
└テンプレートにバインドしたデータがテキストとして出力される前に、何らかの加工を加えるプロパティ

■computed
└何らかの算出を行った結果を返す算出プロパティ

■watch
└データの変更を監視するプロパティ。監視したいデータと、データが変更された時に実行したいハンドラを予め登録して使うことが多い

▼テンプレートのテキストにデータをバインドするには?

■HTML側

■JS側

▼テンプレートの属性にデータをバインドするには?

■HTML側

■JS側

▼テンプレートのスタイルにデータをバインドするには?

■HTML側

■JS側

▼テンプレートのクラス属性にデータをバインドするには?

■HTML側

■CSS側

■JS側

▼テンプレートの属性にリストデータをバインドするには?

■HTML側

■JS側

▼条件付きで描画するには?

■HTML側

■JS側

▼コンマで数値を区切るフィルターを適用するには?

■HTML側

■JS側

▼フィルターを一定範囲のみに適用するには?

■HTML側

■JS側

▼算出プロパティでうるう年を判定するには?

■HTML側

■JS側

▼イベントとイベントハンドラって?

■イベント
└主にユーザーの操作をきっかけにして、ブラウザの中で発生する出来事
└例えば「マウスのホイールを動かす」「ページをスクロールする」「リンクをクリックする」

■イベントハンドラ
└イベントの発生をプログラムで検知して、何らかの処理を行うもの

▼クリックイベントによるイベントハンドラの作り方は?

■HTML側

■JS側

▼ウインドウサイズを取得して表示するには?

※windowサイズの変更はVueではなく、通常のJSで取得する

■HTML側

■JS側

▼マウスカーソルの位置を取得して表示するには?

■HTML側

■JS側

▼データ変更に伴い表示を変えるには?

■HTML側

■JS側

▼算出プロパティを監視するには?

■HTML側

■JS側

▼テンプレートのフォーム入力をバインドするには?

■HTML側

■JS側

▼フォームの全角入力もバインドするには?

■HTML側

■JS側

▼チェックボックスの入力をバインドするには?

■HTML側

■JS側

▼グループ化したチェックボックスの入力をバインドするには?

■HTML側

■JS側

▼カレンダーの入力値をバインドするには?

■HTML側

■JS側

▼スライドイン・アウトのアニメーションを行うには?

■HTML側

■CSS側

■JS側

▼外部のCSSを読み込んでスライドイン・アウトのアニメーションを行うには?

■HTML側(head)

■HTML側(body)

■JS側

関連する記事