Vue SPA 基礎編 ~フロントエンドへの一歩~
Vue CLI
環境構築編でも触れましたが、
Vue CLIとは開発支援のためのコマンドラインインターフェース。
アプリケーションのビルドなどの支援をする。
またwebpackに必要なファイルを自動的に作成もする。
webpack
こちらも環境構築編で触れましたが、
複数のJSファイルをモジュール化して、それを組み合わせて表示する。
その際にモジュールをまとめるバンドルツールがwebpack。
クロスドメイン対策
config/index.js
proxyTable: { '/api':{ target: 'http://localhost:8081', changeOrigin:true, pathRewrite: { '^/api':'/dev/api/' } } },
本番環境が/api
だが
開発環境では/dev/api
となる。
単一ファイルコンポーネント
Single File Components 通称「SFC」
HTML、CSS、JavaScriptを.vue
という拡張子のファイルにまとめて記述し管理する。
マークアップ言語やスタイルシート言語の変更
Pug
やSass
などを使用する場合には必要パッケージをインストールして以下のように記述する。
<template lang="sass">
Vue.jsプラグイン
グローバルメソッドのVue.use
でVue.jsに登録する。
import Vuex from 'vuex' Vue.use(Vuex)
プラグイン自作
install
という名前の公開されたメソッドを定義し、Vue.use
で受け取れる。
インスタンスプロパティを登録する場合は$
から始まる名前を使用する。
ES2015(ES6)モジュール
ECMAScript
ES5に比べて運用しやすい。
ただ書き方が少し変わる。
大きな違い
変数宣言
var が let か constになる
functionの省略
hoge : function(){ }
-> hoge() { }
Promise
非同期処理を抽象化したオブジェクト、操作する仕組みになっている。
非同期処理の完了をしり、引数にresole
(解決)、reject
(拒否)のコールバック関数で結果によってどちらを呼び出す。
次回!
Vuexによるアプリケーション状態管理!
さらに便利に効率的に!ここからが面白い!
Vue コンポーネントクライマックス編 -第3章- ~Vueマスター!~
スロット
スロットは親から子コンポーネントにテンプレートの一部を差し込む機能で
コンテンツやテンプレートの一部をカスタマイズする際に使用する。
デフォルトスロット
HTML <parent>埋め込みたいもの</parent>
HTML <div class="child"> <slot>埋め込まれる場所</slot> ->このまま実装すると[埋め込みたいもの]がはいる </div>
名前付きスロット
複数のスロットを使用するときは、親と子のタグにslot=名前
で名前をつけて使用する。
スコープ付きスロット
スロットはコンテンツ定義側のスコープが維持されるので、
子側のスコープにアクセスができない。
そんなときはslot-scope
を使い、
コンテンツの定義に必要なデータを子コンポーネントから取得する。
双方向データバインディング コンポーネント版
おさらい
双方向データバインディングとは
v-model
でフォームの入力値を同期させて表示させる。
コンポーネント版ではv-model
とprops
、$emit
を駆使する。
.sync
.sync
修飾子では複数の属性を同期させることが可能。
$emit
がトリガとなる。
色んなテンプレートの定義
templateオプション
template
オプションに直接かく。
単一ファイルコンポーネントを使用しない場合に推奨。
単一ファイルコンポーネント
コンポーネント単位でJavaScriptとHTMLとCSSをセットにして.vue
拡張子のファイルに書く。
独自フォーマットでビルド環境が必要。
中規模開発以上で推奨。
描画関数
正確にはテンプレートではないが、DOMを構築するための方法。
仮想DOMについて深く理解する必要がある。
難易度が高め。
コンポーネントの色々
関数型コンポーネント
ライフサイクルや監視が行われないためパフォーマンスを最適化できる。
functional
オプションを付与することで、状態とインスタンスを持たない。
props
を使えるためデータは使えないが有効になる。
動的コンポーネント
コンポーネントの切り替えができる。
属性is
を使用する。
Mixin
複数のコンポーネントの同一処理を行なっている場合、
オプションを抜き出して共通処理を行う。
コンポーネントのライフサイクル
要素が切り替わるタイミングでインスタンスが破棄され、初期化されるので注意。
keep-alive
組み込みコンポーネント<keep-alive>
を使用すると、
破棄されず、コンポーネントと状態を維持される。
Vue コンポーネント親子関係編 -第2章- ~関係を制覇しろ!~
親子関係(親子コンポーネント)
テンプレートで他のコンポーネントを使用すると親子関係になる。
props
とカスタムイベント
を使用する。
親コンポーネント→子コンポーネント
データバインディングで親のデータを子コンポーネントが使用できる。
props down
というデータフロー
親 <child v-bind:val="test">
子 Vue.component('child'.,{ props:['val'] })
注意
props
で受け取った値を子コンポーネント側から変更することはできない。
もし変更した場合は、算出プロパティを使用して新たなデータとして定義する。
また子コンポーネント側から元のデータ自体に変更する場合は$emit
を使用することができる。
受け取りデータの指定
props
では受け取り型(Stringなど)の指定が推奨されており、指定の型以外の場合は警告をだす。
またデフォルト値や必須項目を定義できる。
子コンポーネント→親コンポーネント
子コンポーネントから親コンポーネントに変更をする場合や、
データを渡す場合は
カスタムイベント
と、インスタンスメソッドの$emit
を使用する。
event up
というデータフロー
親 <child v-on:test-event="method"> ->test-eventが発生したらmethodを呼び出す。
子 this.$emit('test-event')
親が子コンポーネントのイベントを認識する
1.v-on
ディレクティブ(@で省略可能)で子のイベントをハンドルする。
2.$emitでトリガーする。
親子コンポーネントの色々
非親子コンポーネント
親子以外のコンポーネント間ではVueインスタンスをイベントバス
として使用する。
ただ複雑化した場合、Vuexの導入を検討した方が良い。
var bus_test = new Vue()
bus_test.$emit('bus_test')
bus_test.$on('test-event',function(){ //test-eventが発火した際の処理 //thisはbus_testのインスタンス })
子コンポーネントを参照する
親が子のメソッドを使用したい場合に$refs
を使用する。
次回
コンポーネントの制覇!
SPAの足がかり!
Vue コンポーネント基礎編 -第1章- ~コンポーネントは核である!~
コンポーネント
テンプレート(html)とJavaScriptをセットにして、
機能ごとに分割して管理できるようにする仕組み。
例:headerのセット,mainのセットとして最終的に組み合わせる。
コンポーネントの定義
Vue.component
メソッドでグローバルに登録しすべてのコンポーネントから使用できる。
テンプレート内ではケバブケース<test-component>
で記述。
またコンポーネントはルートインスタンスnew Vue()
する前に定義する。
ローカルの定義
ローカルとしてコンポーネントのスコープ内だけで使用するには
コンポーネントの定義を特定のコンポーネントのcomponents
オプションに定義する。
コンポーネントのオプション
1.データやメソッドを定義できる。
2.dataはオブジェクトを返す関数にする必要がある。
3.テンプレートのルート要素は単一にする必要がある。
4.コンポーネントを複数使用した場合、別々のインスタンスになる。
コンポーネント間の通信
コンポーネントのインスタンスはスコープがあり、
スコープ内のデータやメソッドは、this
でアクセスできる。
スコープ外のアクセス、コンポーネント間の連携
1.propsとカスタムイベントを使う(親子間の通信)
2.イベントバスを使う(非親子間)
3.Vuexの状態管理
次回
親子間通信を学ぶ!
Vueの利便性をめちゃくちゃ高めます!
Vue 算出プロパティとトランジション編 ~自由なデザインを!~
算出プロパティ
算出プロパティとは処理を含めることができるデータのこと。
ゲッター(取得) セッター(代入)
算出プロパティへの代入を行う場合エラーになる。
しかし、getで値を取得し、setでプロパティに代入することで対応できる。
キャッシュ機能
算出プロパティとメソッドの違いは、
算出プロパティは結果をキャッシュするため、トリガがリアクティブなデータのみ(元のデータ)になる。
なので、元のデータが変わらない限り結果に変更はない。
算出プロパティの色々
ウォッチャ (watch)
データや算出プロパティに変化が起こった場合に処理を実行する。
ただウォッチャ自体がデータを返すことはない。
フィルタ(|パイプ)
テキストベースの変換処理を実行する機能。
(文字や数字などの)
ただthisへのアクセスはできない。
カスタムディレクティブ
ディレクティブの自作を行う。(v-○○)
ただ描画の最適化はされない。
データバインディングだけでできない場合のみ使用。
nextTick
nextTickはDOMの更新後にアクセスするために更新を待つ機能。
グローバルメソッドのVue.nextTick
か
インスタンスメソッドthis.$nextTick
(thisが使える)をコールバック関数として定義する。
ただウェブフォントや画像が含まれたら更新は待たない。
トランジション
基本
VueがCSSトランジション/アニメーション(フェードイン、フェードアウトなど)
のためのクラスを付与して使いやすくした機能。
トランジションの色々
単一要素トランジション
条件による描画状態の切り替えや
動的コンポーネントなどの場合に使用する。
Enterは対象要素がDOMに追加されたとき(表示)
Leaveは対象要素がDOMから削除されたとき(非表示)
リストトランジション
<transition-group>
を使用して複数の要素をグループ化して移動のアニメーションを行う。(追加、削除含む)
ユニークキーの指定が必要。
SVGのトランジション
SVGの要素やSVG自体もコンポーネント化可能。
トランジションフック
JavaScriptを用いたトランジション操作を可能にする。
Vue 基本バインディング編 ~UI革命~
リアクティブシステム
リアクティブシステムとは
Vueの内部の核となるシステムで
同期や最適化などを行う。
データバインディングはその機能の内の1つである。
リアクティブシステム中のデータをリアクティブデータという。
クラスのデータバインディング
HTML
<div id = ''one"> <h1 v-bind:class="{'test': test1}">test</h1> <h1 v-bind:style="{color:textColor}">test</h1> </div>
new Vue({ el: '#one', data:{ test1:true, textColor:'red' } })
$elと$refs
$elと$refsはDOMを直接参照する。
画面上の位置などで必要となる。
$elの使用法
Vueのライフサイクルでmounted以降で使用でき、
ルート要素が参照できる。
mounted : function(){ console.log(this.$el) //ルート要素 -> <p>aaa</p> }
$refsの使用法
ルート以外の要素で対象要素にref属性で名前をつけて使用する。
mounted : function(){ console.log(this.$refs.test) //<p ref="test"></p>のDOM }
注意
描画処理の最適化をしないためDOMの更新に使用するには向いていない。
双方向データバインディング
データバインディングとは
ユーザの入力値をデータと同期させ、
v-model
ディレクティブを使用する。
処理
1.要素のvalue属性の更新。(データバインディング)
2.更新後、valueデータを描画(イベントハンドリング)
使用法は要素によって異なるため要確認。
知識
修飾子(.○○)についてはイベントやv-modelなどで覚えきれないほどあるのでその都度調べる必要がある。
dataオプション直下のプロパティは追加ができないため、初期値で定義する必要がある。
データ内容の確認には{{ $data }}でJSON形式で画面に表示できる。{{}}はMustache(マスタッシュ)記法。