Vue.js入門を読んで
- 2021.06.22
概要 「Vue.js入門 基礎から実践アプリケーション開発まで」の本を読んだのですが、特に前半パートでのVue.jsの基本的な文法を中心に備忘として整理します。後半パートでは、Vue.jsで使用できるプラグインのVue RouterやVuexなどについても記載されていたましたが、本記事では割愛します。 導入 Webの歴史 1990-2000 Webの誕生、Javascript/CSSのWebブラウザ搭載 2000-2010 サーバサイドベースのアプリケーションフレームワークの誕生Ajax/JQuery/HTML/Node.jsの登場 2010-2018 AltJsの登場、Webフロントエンドライブラリ/フレームワークの登場Babel/ESLint/Webpackなどの様々なツールの登場 AltJsとは ES2015と前後して登場したJavaScriptを変換できるAltJSと呼ばれるプログラミング言語より簡潔な構文を目指したCoffeeSript、型を注釈として付与するTypeScriptが有名 Web Componentsの要素 Custom Elements HTML Template Shadow DOM HTML imports Vue.jsの特徴 コンポーネント指向 リアクティブなデータバインディング(双方向バインディング) プログレッシブフレームワーク 宣言的レンダリング クライアントサイドルーティング = Vue RouterでSPAに対応 大規模向け状態管理 = コンポーネント間で状態の共有方法 リアクティブなデータバインディング(双方向バインディング)は以下のイメージ プログレッシブフレームワークとは=フレームワークはどんな時でも、どんな規模でも、段階的に柔軟に使えるべきである=必要になった時に問題解決するライブラリを適宜導入して問題を解決する 宣言的レンダリングとは=データ変更のたびにリアクティブなDOMレンダリングとユーザによる入力データの同期が可能 Vue.jsはビュー層に焦点があてられたライブラリで、厳密にはフレームワークではない以下のような様々なプラグインで構成されているVue Router：ルーティングプラグインVuex：大規模なWebアプリケーションを構築するための状態管理プラグインVue Loader：webpack向けのローダーライブラリVue CLI：コマンドラインツールVue DevTools：開発ツール 基本構文 UIは、データとそのデータを画面に表示するビュー、データを変更するユーザのアクションの3つから成り立っている コンストラクタ VueインスタンスをDOM要素にマウント(適用)することで、Vue.jsの機能がその要素内で使えるようになる マウント elプロパティで指定したDOM要素をマウント メソッドによるマウントelプロパティを定義せずに、$mountメソッドを用いる UIのデータ定義 dataプロパティには、UIの状態となるデータのオブジェクトを指定するdataプロパティに与えた値はVue.jsのリアクティブシステムに乗るVueインスタンス生成時にdataを与えておき、それをテンプレートで表示するのがVue.jsの表示の基本的な仕組み テンプレート構文 Mustache記法 {{ }}でデータや式を記述 ディレクティブによるHTML要素の拡張 名前がv-で始まる属性(v-bind 等 フィルタ {{ 値 | フィルタ }}フィルタは関数で定義する 算出プロパティ 公開プロパティを算出する関数を定義する ディレクティブ 条件レンダリング(v-if/v-show) 違いは、v-ifは式の結果に応じてDOM要素を追加・削除するのに対して、v-showはスタイルのdisplayプロパティの値を変更することで実現 クラスとスタイルのバインディング v-bind:class=”オブジェクト・配列”v-bind:style=”オブジェクト・配列” リストレンダリング(v-for) 配列あるいはオブジェクトのデータをリストレンダリングv-for=”要素 in 配列” イベントハンドリング v-onはイベントが起きた時に属性値を実行する v-on:イベント名=”式として実行したい属性値” フォーム入力バインディング(v-model) ビュー(DOM)で変更があった時に、その値をVueインスタンスのデータとして更新 ライフサイクルフック created: インスタンスが生成されて、データが初期化された後に呼ばれるmounted: インスタンスにDOM要素が紐づいた後に呼ばれるbeforeDestroy: インスタンスが破棄される前に呼ばれる メソッド(methods) データの変更やサーバーにHTTPリクエストを送る際に利用する コンポーネントの基礎 コンポーネントを作成する Vue.component(tagName, options) コンポーネントを継承する Vue.extend() コンポーネント間の通信 親コンポーネントから子コンポーネントにのみデータを渡すことが可能となっている propsオプションを利用する親からはテンプレートの属性(v-bind)経由で渡すことができる子コンポーネントから親コンポーネントにはカスタムイベントを使用する イベントのリスン：$on(eventName)イベントのトリガー：$emit(eventName)