Posted by 概要
「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の機能がその要素内で使えるようになる
var vm = new Vue({
// ...
})マウント
elプロパティで指定したDOM要素をマウント
ar vm = new Vue({
el: '#app',
// ...
})メソッドによるマウントelプロパティを定義せずに、$mountメソッドを用いる
var vm = new Vue({
// ...
})
vm.$mount(el)UIのデータ定義
dataプロパティには、UIの状態となるデータのオブジェクトを指定する
dataプロパティに与えた値はVue.jsのリアクティブシステムに乗る
Vueインスタンス生成時にdataを与えておき、それをテンプレートで表示するのがVue.jsの表示の基本的な仕組み
var vm = new Vue({
data: {
key: value
}
})テンプレート構文
Mustache記法
{{ }}でデータや式を記述
ディレクティブによるHTML要素の拡張
名前がv-で始まる属性(v-bind 等
フィルタ
{{ 値 | フィルタ }}
フィルタは関数で定義する
filters: {
フィルター名: function (value) {
// return ...
}
}算出プロパティ
公開プロパティを算出する関数を定義する
computed: {
算出プロパティ名: function (){
// return ...
}
}ディレクティブ
条件レンダリング(v-if/v-show)
違いは、v-ifは式の結果に応じてDOM要素を追加・削除するのに対して、v-showはスタイルのdisplayプロパティの値を変更することで実現
<p v-if="引数">
// 真なら表示、偽なら非表示
</p>
<p v-show="引数">
// 真なら表示、偽なら非表示
</p>クラスとスタイルのバインディング
v-bind:class=”オブジェクト・配列”
v-bind:style=”オブジェクト・配列”
リストレンダリング(v-for)
配列あるいはオブジェクトのデータをリストレンダリング
v-for=”要素 in 配列”
<ul>
<li v-for="item in arr" v-bind:key="item">{{item}}<li>
</ul>イベントハンドリング
v-onはイベントが起きた時に属性値を実行する
v-on:イベント名=”式として実行したい属性値”
フォーム入力バインディング(v-model)
ビュー(DOM)で変更があった時に、その値をVueインスタンスのデータとして更新
<input type="number" v-model="item.quantity" min="0">ライフサイクルフック
created: インスタンスが生成されて、データが初期化された後に呼ばれる
mounted: インスタンスにDOM要素が紐づいた後に呼ばれる
beforeDestroy: インスタンスが破棄される前に呼ばれる
メソッド(methods)
データの変更やサーバーにHTTPリクエストを送る際に利用する
methods: {
メソッド名: function() {
// 処理
}
}コンポーネントの基礎
コンポーネントを作成する
Vue.component(tagName, options)
コンポーネントを継承する
Vue.extend()
コンポーネント間の通信
親コンポーネントから子コンポーネントにのみデータを渡すことが可能となっている
propsオプションを利用する
親からはテンプレートの属性(v-bind)経由で渡すことができる
子コンポーネントから親コンポーネントにはカスタムイベントを使用する
イベントのリスン：$on(eventName)
イベントのトリガー：$emit(eventName)
