Folder01

gihyo.jp : vue.js入門

Links and Memo

第1回　プログレッシブフレームワーク Vue.js
第2回　Vue.js基礎文法最速マスター

上記2つの項目を学んで、最初にこの講座を学ぶのは違う気がしました（v-ifの説明を省略するとの文章を見つけて...）。ということで公式サイトで学んでから戻ることにする。

File List

01.html

input要素にv-modelを利用して指定箇所の内容を変更する

02.html

マスタッシュ構文で要素内にvueオブジェクトのdataを挿入する

02b.html

computedプロパティを利用して計算結果を要素内に挿入する

02c.html

上記サンプルに01.htmlのv-modelを追加して価格を変更できるようにした

02d.html

computedはfunctionをreturnすることでクラスのように利用できる

02e.html

computedは引数を渡せない。引数を使う場合はmethodsプロパティを利用する。

03.html

v-forを利用するとデータ数に応じて要素を追加できる（リスト表示などに便利）。

04.html

v-showを利用すると条件に応じて要素の表示/非表示を切り替えることができる。

05.html

v-bindを利用すると指定した属性を変更できる。ここではclass属性を変更してcssを充てている。

06.html

v-onを利用するとイベント発生時の処理を設定できる。ここではinputイベントの処理を設定している。

06b.html

上記の亜種。changeイベントは入力が完了してから処理される。

07.html

v-onとmethodsを組み合わせて、イベントが発生したら引数を渡して関数を実行している。

08.html

v-on,v-model,v-showを組み合わせて作成したフォーム。

08b.html

上記の亜種。input要素のv-modelにlazy修飾子を付けると、変更後に処理されるようになる。

Folder02

vue.js : 公式サイト：はじめに

Links and Memo

はじめに

「はじめに」の項目は概論だったので、gihyoと同じく飛ばしても良かったと思う。後の章で詳細が説明されるようなので概略だけ把握した。最後のコンポーネントの部分は説明足らずでサンプル作成に悩んだ...

File List

01.html

v-bindを利用してhtmlのターゲット属性（hover時に表示するメッセージ）を動的に変更。

02.html

v-ifのサンプル。v-showと似ている。違いはソース内のコメントで説明

03.html

v-forのサンプル。gihyoですでに学んだね。

04.html

v-onのサンプル。gihyoですでに学んだね。

04b.html

v-onのイベントハンドラにはcomputedを指定することはできないようだ

04c.html

methodsやcomputedはイベント以外ではなく挿入に利用するならreturnが必要

04d.html

methodsはイベントに設定するときに()を付けてもエラーにならず機能するんだね

04e.html

イベントでmethodsを利用するときにreturnは無意味。これはイベントハンドラだからだね

05.html

v-modelは双方向（inputなどからvue内のmessageを変更できます）のバインドです。

06.html

最もシンプルなコンポーネントのサンプル

Folder03

vue.js : 公式サイト：インスタンス

Links and Memo

インスタンス

new Vueによって作成されるインスタンスの基本的な機能について。

File List

01.html

vueの起動はインスタンス作成のタイミング。リアクティブシステムで外部オブジェクトと同期する

01b.html

リアクティブシステムは後から追加されたデータには連動できない

01c.html

なので追加を想定してデータを作っておく

02.html

Object.freezeを利用するとリアクティブシステムを切断できる。何に使うかはナゾ。

03.html

$を付けることでインスタンス内のプロパティにアクセスできる。

04.html

デフォルトで持っている$watchは、dataの指定したプロパティが変化したときの処理を指定できて便利かも！！

04b.html

v-modelを利用してwatchの機能を確認するサンプル

04c.html

watchの機能を解除するサンプル

05.html

createdやmountedのようなライフサイクルをフックする関数について

Folder04

vue.js : 公式サイト：テンプレート構文

Links and Memo

テンプレート構文

マスチェット構文の基礎的とv-bindとv-onの簡単な説明。後半は概要的な部分も多く後の章で詳細を学ぶようだ。

File List

01.html

基本はマスチェット。{{}}内に情報を挿入します。

01b.html

{{}}内にはjavaScriptの数式もOK

01c.html

{{}}内では三項演算子は利用できるが、if文はダメ

01d.html

{{}}内ではjavaScriptのメソッドも利用できる

02.html

htmlには対応していない。htmlを挿入する場合はv-html ディレクティブを使う

03.html

属性にはマスチェットは使えないのでv-bindでバインドする

03b.html

属性にはマスチェットを使うとエラーになる

03c.html

未解決v-bindでの文字列の足し算は可能だがvueのプロパティで文字列の足し算を利用する方法が分からない...

04.html

v-bindでhrefの設定をしている例

05.html

v-onに対し修飾子preventを使うことでイベントフローを止めることができます

06.html

v-bindとv-onの省略構文

Folder05

vue.js : 公式サイト：算出プロパティとウォッチャ

Links and Memo

算出プロパティとウォッチャ

computedとmethodsの違いを理解した。computedはキャッシュされ描画によって再処理されず軽い。methodsは引数を使えるがキャッシュされず描画コストは高い。watchはプロパティの変化を観察できて複雑な中間処理に役立つ。 v-onではcomputedを設定できないのが少し残念。

File List

01.html

すべてをマスチェットに入れるのは良くない

01b.html

そういうときにはcomputed（算出プロパティを利用する）

01c.html

プロパティなので利用するときに()を付けてはいけない

02.html

computedもリアクティブなので、元データが変更されるたびに処理される

03.html

methodsも似たことができます。()の付け忘れに注意

03b.html

methodsは引数を送れる。描画のたびに呼び出されるのでシンプルなページでも使わない方がよい

04.html

computedとmethodsの処理の差を確認

05.html

watch（監視プロパティ）のサンプル

06.html

watchは1つのdataしか監視できないので、複数のdataを組み合わせた処理は苦手

06b.html

なのでcomputedの方がwatchよりも柔軟に対応できる

07.html

computedはsetterとしても利用できる。computedのプロパティは$なしでアクセスできる

08.html

他のjsライブラリを利用した遅延処理のサンプル。watch活用版

08b.html

computedでも入力の遅延処理に挑戦した。getterとsetterの関係に縛られるのかも...

Folder06

vue.js : 公式サイト：クラスとスタイルのバインディング

Links and Memo

クラスとスタイルのバインディング

前半はクラスのバインド。後半はスタイルのバインド。スタイルのバインドは個人的には使いたくない（cssとして設定を分離したいので）。プレフィックスの自動挿入は便利だけど、もう必要ないよね。

File List

01.html

v-bindを利用すると属性値にvueのdataを利用できる

02.html

v-bindのオブジェクト構文：{}を利用すると簡単な条件式を設定できる（trueのときはclass付加など）

02b.html

失敗例：dataの設定にdataの値は利用できない

03.html

ボタンを追加してactive/deactiveを変更できるようにしました

03b.html

v-onによるイベントハンドラにcomputedは設定できません（02/04b.html）

04.html

属性の設定に三項演算子を利用してみた

04b.html

上記の亜種。インラインに長文を書くのは良くないので、computedに納めた

05.html

属性に複数の値を設定する場合は配列を利用する

05b.html

配列の中にオブジェクト構文も利用できる

05c.html

配列とcomputedを組み合わせたサンプル

コンポーネントにおいて

コンポーネントの知識前提の説明有り。あとで戻るか...（06.htmlを空けておく）

07.html

クラスではなくスタイル（style）を直接バインドしている

07b.html

上記の亜種。オブジェクトでスタイルを設定している。これは少しマシか

08.html

複数のオブジェクトを設定したい場合は配列を使う。javaScriptは変数名に-を使えないのでキャメルで回避

08b.html

上記の亜種。キャメルで回避しなくてもjsonのようにプロパティを文字列にしてもOKっぽい

09.html

transformの自動プレフィックスを確認したかったけどできないかった...

09b.html

複数プレフィックス設定を配列でまとめて記述することもできる

Folder07

vue.js : 公式サイト：条件付きレンダリング

Links and Memo

条件付きレンダリング

v-ifとv-showの違いは06.html〜08.htmlのサンプルで理解できる。個人的にはv-showの仕組みの方が把握しやすい。v-showにはelseの仕組みはないが類似処理はできるし、要素の順番も気にしなくて良いから便利だと思う。描画負荷は少し重いらしいけど。

File List

01.html

v-ifは指定したdataがtrueのときのみ要素を表示する

01b.html

上記の亜種。v-ifはクエリ内に条件式も設定できる

01c.html

上記の亜種。クエリ内に条件式には論理和や論理積も使える

01d.html

いちおう否定演算子「!」も確認。利用できた

02.html

上記の拡張。v-ifの後にv-elseを追加できる

02b.html

v-elseの単独利用はダメ。v-ifと順番を入れ替えるのもダメ

02c.html

v-ifとv-elseの間に他の要素があってもダメ

03.html

まとめて判断する場合はtemplateを利用する。template自体は描画されない

03b.html

templateにv-elseを利用した

04.html

templateではなくdivでもよい。特に領域にcssを設定したい場合は

05.html

v2.1からはv-else-ifも使える

06.html

要素は再利用されるため？。切り替えでユーザーの入力が残ってしまう

06b.html

placeholderではなくvalueにしても同じ

07.html

上記の問題を回避するためにkeyを設定する

07b.html

上記の亜種。入力した内容を記憶させるようにしたv-modelを使うと簡単

08.html

v-showはブロックを個別に持つので、簡単にユーザーの入力を保持できる

Folder08

vue.js : 公式サイト：リストレンダリング

Links and Memo

リストレンダリング

情報を沢山扱うアプリには必須な機能。Filter等で新しく作成された配列の要素もリアクティブに接続される。

File List

01.html

v-forでリストの数だけ表示。配列の中にobjectオブジェクト

01b.html

上記の亜種。配列の中に文字列だけをいれた。プロパティ名が無いので複雑なリストには向かない

01c.html

二次配列を使ったサンプル

01d.html

v-forのネスト処理

02.html

v-forではインデックス番号も引数で取得できる

03.html

v-for中の要素からvueのdataにもアクセスできる...って普通だよね

04.html

v-forはinの代わりにofも使える

05.html

v-forで最初の配列をobjectオブジェクトに変更した。01.htmlと比較すべし

05b.html

上記の亜種。objectオブジェクトのキー（プロパティ名）も取得できる

05c.html

上記の亜種。さらにindex番号も取得できる

06.html

普通のfor文のように指定回数だけ処理させることもできる

07.html

dataの配列をリバースさせると、自動で表示もリバースする

07b.html

上記の亜種。dataの要素を追加するとリストも自動的に増える

07c.html

上記の亜種。dataの要素（連想配列）をキーでソート

08.html

ユーザー入力がある場合は注意。入力はソートされない。07/06.htmlの問題と同じ

08b.html

上記の問題はkeyをv-bindすることで解決できる。07/07.htmlを参照のこと

09.html

本来は元の配列を変更しないfilterなどの関数もvueではリアクティブに接続している

09b.html

上の亜種。純粋にfilterを利用したサンプル。リアクティブとはいえdataに代入しないと表示に反映されない

10.html

index番号で指定した要素を変更するとリアクティブに反応しないのは仕様

10b.html

上記の修正版。連想配列を利用してプロパティを指定して変更するのが無難。01b.htmlと同じ意見

10c.html

どうしても配列をインデックス番号で操作したい場合はVueに用意されたset関数を利用する

11.html

再確認：03/01b.hml。リアクティブシステムは後から追加されたデータには連動できない

11b.html

上記の解決。要素に追加できなくても値は変更できる。つまりネストすれば対応できるというわけ！

12.html

上記の応用。v-forを利用して視覚的に変更されたかを確認できるサンプル

12b.html

上記の亜種。外部に用意したObjectを変更してもリアクティブです

12c.html

上記の亜種。assignを利用してobjectをマージしたサンプル

13.html

元のデータを維持したい場合はcomputedを駆使

13.html

上記と比較。computedを利用しても元データに代入してしまうと元データも変更される（あたりまえ）

14.html

13.htmlの応用で失敗例。ボタンをクリックしたら元データを変更せずにフィルタリング

14b.html

11b.htmlの応用で成功例。データをネストしてしまえばリアクティブに要素を追加できる

14c.html

14c.htmlの亜種。データをVue外部においているのでbeforeMountで設定する必要は無い

template での v-for

テンプレートについては後で学ぼう。いちおう15.htmlを空けておく

16.html

v-forとv-ifを組み合わせて条件にあったデータだけを表示する

17.html

上記の応用。リアクティブな仕組みを追加した

コンポーネントと v-for

コンポーネントの知識前提の説明有り。あとで戻るか...

Folder09

vue.js : 公式サイト：イベントハンドリング

Links and Memo

イベントハンドリング

vueでのイベンの設定は色々ある。()を設定しないメソッドイベントハンドラ、これはメソッド側でイベントオブジェクトを受け取ることができる。()を設定するインラインイベントハンドラ、これは引数を渡すことができる。もしインラインイベントハンドラでイベントオブジェクトを利用したいときは$eventを使う。また使う機会は少ないと思うが、処理をクエリ内に直接記述することもできる。

vueとは関係なくeventのpassive設定は覚えておく。とくにスマホアプリではパフォーマンスの向上に繋がる。
https://developers.google.com/web/updates/2016/06/passive-event-listeners

File List

01.html

v-onでクリック時に実行する処理を設定。文字列で直接実行するサンプル

01.html

上記の亜種。v-on:は@で置きかえることができる。v-onの省略構文。参考04/06.html

02.html

インラインメソッドハンドラ。クリック時に実行するメソッド名を指定する方法。引数もOK

02b.html

メソッドイベントハンドラ。イベント名に()を付けない場合はイベントオブジェクトが渡される

03.html

vueの外から簡単にメソッドを実行できる

03b.html

上記の亜種。methodsをプロパティの様式で書いてみた

04.html

02b.htmlと比較。イベント名に()を付けてもイベントオブジェクトが欲しいとき

05.html

ネストされた要素でのイベントの伝播を確認する

05b.html

修飾子stopを利用したので、イベントの伝播が停止する

05c.html

修飾子stopよりもselfの方が理解しやすい

06.html

通常のイベントの伝わり方を確認

06b.html

上記と比較。キャプチャモードでのイベントの伝わり方を確認

07.html

修飾子preventのサンプル。イベントの伝播を停止してリンクなどブラウザ本来の機能を効かなくする

07b.html

上記の亜種。修飾子preventだけの設定もOK

08.html

修飾子のonceを使うと1回だけしか反応しなくなります/dd>

09.html

複数の修飾子をつなげることもできます

10.html

vueのscrollで修飾子のpassiveを使いたかったけれどダメだった。どうすれば良いの？？？

10b.html

上記の亜種。windowではなくsectionにスクロールバーを設定すればvueで修飾子のpassiveを使えるけど
とりあえずスマホアプリのときはスマホではtouchstart、touchmoveにpassiveを設定した方が良いみたい

11.html

キーコードを指定して特定のキーが押されたときに処理を実行することも可能。enterキーでのsubmit等に便利

11b.html

上記の亜種。一部のキーコードはケバブケースに変更する必要がある。

12.html

複数のキーコードを連結して【ctrl + c】のような入力も処理できる

13.html

厳密な入力が必要な場合は.exact修飾子を使う

14.html

右ボタンクリックも取得可能

Folder10

vue.js : 公式サイト：フォーム入力バインディング

Links and Memo

フォーム入力バインディング

フォームに関する機能。便利。

File List

01.html

v-modelでtextareaとdataを双方向的にバインド。フォームの初期値は無視されvueの初期値が採用される。textareaタグ内にはマスチェット構文は使えない

02.html

v-modelをチェックボックス（true/false）に利用したサンプル

02b.html

v-modelのチェックボックスで選択したvalueをdata（配列）に格納することもできる

03.html

v-modeをラジオボタンで使う。htmlのグループ分けはvueの設定の前には無視される

03b.html

上記と比較。純粋なhtmlならname属性によってグループ分けされる

03c.html

上記と比較。dataを複数用意することで複数のグループに対応したサンプル

04.html

v-modeをセレクトボックス（単体）で使う

04b.html

v-modeをセレクトボックス（multiple）で使う。複数の場合はチェックボックス同様に配列で管理

05.html

v-forを利用してセレクトボックスのoptionを設定。便利

06.html

フォームの値をカスタマイズ。チェックボックスの例。trueをyes、falseをnoにカスタムしている。何かに使えそう！

07.html

値のバインド。v-bindをvalueに使うと文字列以外も設定できる（サブ情報などの設定に便利かも！）

08.html

修飾子lazyのサンプル。inputからフォーカスが外れた or Enterキー入力してから処理を開始

08b.html

修飾子numberのサンプル（lazyとも組み合わせた）。入力を数字として処理

08c.html

修飾子trimのサンプル。前後のスペースを削除

Folder11

vue.js : 公式サイト：コンポーネントの基本

Links and Memo

コンポーネントの基本

この章はコンポーネントの基礎だけで詳細は次章。コンポーネントはクラスのインスタンスっぽく変数なども個別で持てる。

File List

01.html

最小限のコンポーネント。クラスのインスタンスのように個別に変数が持てる

01b.html

staticな変数。もし共通の変数を持たせたい場合は外部の数値をreturnするようにする。

02.html

プロパティを使用した子コンポーネントへのデータの受け渡し。プロパティをhtml側に記述した例

02b.html

上記の亜種。プロパティをvueのdataに記述した例。覚えるのはこっち

03.html

悪い例。templateには単一の要素しか設定できない。並列に複数の要素を設定するとエラーになる

03b.html

上記の解決例。div要素で2つの要素を囲み単一の要素にした。

04.html

プロパティを追加した。IEはテンプレート文字列が使えないので、TypeScriptとかで対応しないと...

04b.html

上記の亜種。v-htmlを利用すればcontent内にhtmlタグを記述できる

05.html

テンプレートからvueのメソッドを実行する

05b.html

公式サイトのサンプルを改造して個別にフォントサイズを変更できるようにした

05c.html

上記の亜種。インラインでサイズを管理。上記よりこちらが王道！

06.html

未解決。vueインスタンスからtemplateのdataにアクセスする方法が分からない

06b.html

上記の迂回案。template内にmethodsを作成した。こちらの方が王道だと思う。でも上のも気になるのです...

07.html

templateでv-modelは利用できないが、v-onとv-bindを組み合わせることで可能。カスタムイベントを学んでから振り返る

08.html

slotのサンプル。ダイアログなどに便利。でも詳細はコンポーネントの章にて。

09.html

動的コンポーネントのサンプル。タブによるコンテンツ切り替えに便利。でも詳細はコンポーネントの章にて。

09b.html

上記の亜種。v-forやcssの無いシンプルなサンプル。slotと組み合わせることはできないのか？

10.html

上記の派生？。componentとslotのサンプルを探していたら見つけたもの

11.html

tableやul,selectのような中の要素が決まっているような要素の中を置きかえる場合、templateのタグが妥当でも外に出されてしまう

11b.html

上記の解決。isを利用することで対応できる

Folder12

vue.js : 公式サイト：コンポーネントの登録

Links and Memo

コンポーネントの登録

ローカルでの登録は基礎編になかったので勉強になった。

File List

01.html

基礎の復習。グローバルコンポーネント

02.html

ローカルコンポーネントはvueコンストラクタ内に記述する

02b.html

上記の亜種。外部にjavascriptのオブジェクトとして作成しておくのもあり。

モジュールシステム

未解決自分はモジュールシステムを知らないので飛ばす。

Folder13

vue.js : 公式サイト：Props

Links and Memo

Props

prop名について。javaScript側ではキャメルケース、html側ではケバブケースが基本っぽい（javaScriptは変数名に-が利用できないし、html側は大文字小文字を判別できない）。 propは型指定できたり、値をチェック（Validation）できる。

File List

01.html

html側でprop名をキャメルケースにしてしまうとエラーになる。

01b.html

上記の解決案。html側ではケバブケースに書き換えた

01b.html

上記の亜種。javaScript側をケバブケースに書き換えたらエラーになった...

02.html

プロパティは型指定できる。これは型指定していない例。02b.htmlと比較

02b.html

上記と比較。Objectオブジェクトで設定することでプロパティは型指定できる。

02c.html

わざと型指定を間違えた例。コンソールに警告がでる（開発版vueのみ）

03.html

v-bindでプロパティに数値を使った例

03b.html

v-bindでプロパティにブール値を使った例

03c.html

v-bindでプロパティに配列を使った例

03d.html

v-bindでプロパティにObjectを使った例

04.html

Passing the Properties of an Object。コンポ側とvue側でプロパティ名を揃えるとまとめて設定できる。便利。

05.html

One-Way Data Flow。親の変更は子に伝わるが、この変更は親に伝わらず警告がでるサンプル

05b.html

本家サイトのサンプルを解読してみた（その1）

05c.html

本家サイトのサンプルを解読してみた（その2）

06.html

Validation。型指定にnullを設定すると何でもOKになる。たぶん使わない

06b.html

Validation。配列を利用すると複数の型指定が可能。便利そうだけどたぶん使わない

06c.html

Validation。requiredを利用すると値の設定がされなかった時に警告になる

06d.html

Validation。defaultを利用すると値の設定がされなかった時にデフォルト値を設定できる

06e.html

Validation。上記の亜種。defaultはfunctionを設定して状態によって変更できる

06f.html

Validation。functionを設定してカスタムバリデーションを作成できる

06g.html

Validation。オリジナルの型を作成してバリデーションに利用することも可能

07.html

Non-Prop Attributes。コンポーネントにバインドではない普通の属性を設定すると、そのままtemplateのほうに反映される

07b.html

Non-Prop Attributes。ネットで見つけたサンプル

08.html

replace。元々ある属性値を上書きできます。

09.html

07.htmlと比較。inheritAttrsをfalseにすると属性の継承がOFFになります

Folder14

vue.js : 公式サイト：カスタムイベント

Links and Memo

カスタムイベント

checkboxなどフォームの要素はmodelオプションで指定しておかないと属性として機能しない場合がある。vueのイベント名が予約語と被っていると機能しないが、native修飾子でvueも受け取れるようになる。コンポーネント内でv-modelよりもsync修飾子の利用が推奨される。

File List

01.html

悪い例：コンポーネントやプロパティとは違い、イベント名の大文字と小文字は自動的に変換されません。つまりケバブケースを使いましょう

02.html

modelオプション。フォームの要素はvalue属性を別の目的で使う事があります

02b.html

未解決上記との比較。changeなら元々イベントとして設定しなくても処理されるのでは？

03b.html

ネイティブにclickイベントを設定していると、v-onでvueのメソッドを指定しても実行されない

03.html

上記と比較。native修飾子を利用することでvueのメソッドを実行できる

03c.html

未解決上記との比較prevent修飾子を利用すればネイティブの処理は止められると思ったがダメだった。

04.html

ネットで見つけたnative修飾子のサンプル。ボタンのデザインと機能を分離する案

05.html

未解決公式サイトのサンプル。vueのメソッドが実行されない...

06.html

ネットで見つけたsync修飾子のサンプル。

06b.html

上記の亜種。sync修飾子を使わずにv-modelを利用したもの。非推奨（syncを使いましょう）。

07.html

sync修飾子本家サイトのサンプル。

07b.html

未解決syncにobjectを設定して、まとめて設定する構文を利用したが機能しない...

Folder15

vue.js : 公式サイト：スロット

Links and Memo

スロット

slotタグを使うとコンポーネントに個別の情報を簡単に渡せる（デフォルトの設定もできる）。vueのデータを使いながらv-ifで部分的に表示を変えることも可能。

File List

01.html

シンプルなslotの例

01b.html

コンポーネント側にslotタグがないとhtml側で送信したデータは無視される

02.html

slotにコンポーネントを渡すことも可能

03.html

上記の発展。コンポーネントにコンポーネントを入れてみた

04.html

slotとは関係ないのだけどテンプレートの方にコンポーネントを入れてみた

04b.html

上記の発展。変数をバインドしてコンテンツ毎にアイコンを変更してみた。

05.html

名前付きスロット。必須のテクニック。複数のスロットを設定できる

05b.html

上記の亜種。タグがない場合はtemplateタグを利用してslot名を指定

06.html

slotのデフォルト設定。templateの中にデフォルトの文字をいれておくだけ

07.html

スロット内でのマスチェットはOK

07b.html

上記の亜種。コンポーネント側のスロット内でのマスチェット処理もOK

08.html

08b.htmlとの比較用。まずはコンポーネントやslotを使っていないシンプルなサンプル

08b.html

上記の派生。コンポーネントを利用したが、まだslotは利用していない

09.html

scoped slotのサンプルスロットに送った内容から親のデータにアクセスできる

09b.html

上記の亜種。javaScriptの分割代入を使うと少しシンプルになる。しかしIEは対応していない

09c.html

上記の亜種。子コンポーネントに分けたらスコープは必要なくなった..

Folder16

vue.js : 公式サイト：動的 & 非同期コンポーネント

Links and Memo

動的 & 非同期コンポーネント

実質「keep-alive」のみ学習。非同期処理についてはvue-routerや外部ファイルの扱いを知らないためペンディング。

File List

01.html

通常はタブを切り替えた際にコンテンツの状態はリセットされる

01b.html

上記との比較。keep-aliveタグを利用すると表示を切り替えても状態を維持できる

02.html

段階的に01b.htmlを作成する。動的コンポーネントを利用してタブで表示を切り替える

02b.html

上記の続き。クリックしたタブにクラスを付加して選択された他部を赤くする

03.html

上記の続き。ブログ記事の追加。01.htmlと同じ段階

03b.html

上記の派生。mountedイベントを利用して最初のブログ記事をデフォルト表示

03c.html

上記の完成。さらに前に実行されるcreatedイベントを利用したらOKだった！

04.html

未解決非同期コンポーネント。しかし外部データの読込知識がないのでPending

ロード状態のハンドリング

未解決ロード状態のハンドリング。vue-routerの知識がないのでPending

Folder17

vue.js : 公式サイト：特別な問題に対処する

Links and Memo

特別な問題に対処する

前半はコンポーネント間のイレギュラーな連携。王道ではないけれど、小さなコンテンツでは重宝すると思う。後半はカスタムイベントやインラインテンプレートについて。仕組みはシンプルだがメリットがよく分からなかった...。

File List

01.html

vueインスタンスの外部からdata等にアクセスするには$rootを利用

01b.html

コンポーネントの中から$rootを利用してvueのdataにアクセス

02.html

$parentを利用すると親コンポーネントにアクセスできる（構造が変わると動作しなくなる危険があるので非推奨）

02b.html

上記の派生。逆に親から子にアクセスする場合は、コンポーネント経由でアクセスするのが王道だよね？

03.html

$refを利用してvueからコンポーネントにアクセス

03b.html

上記の亜種。さらに子コンポーネントにアクセス

03c.html

子コンポーネントのdataにアクセス

03d.html

イベント処理のタイミングでは使えるけど生成時には使えない。公式ページにある警告「$refsはコンポーネントの描画後にデータが反映されるだけ」のため。

04.html

provideとinject。親コンポーネントから子コンポーネントに情報を渡す

0b.html

プログラム的なイベントリスナー。公式サイトのサンプルをシンプルにした例

05b.html

カスタムイベントの設定/削除

循環参照

未解決ファイルツリーとかに使うもの。個人的に使わないと思うのでパス

07.html

インラインテンプレートのサンプル。一時的にコンポーネントとは異なる内容を表示する。メリットがよく分からない...

07b.html

上記の派生。templateはhtml部に記述することもできる（id属性で名前を付ける必要有り）。メリットがよく分からない...

07c.html

上記の派生でx-template。scriptタグでテンプレートを設定することもできる。メリットがよく分からない...

08.html

v-onceを利用すると1回だけ変更/設定でき、その後は静的要素となる。メリットがよく分からない...

Folder18

vue.js : 公式サイト：トランジション（1）

Links and Memo

Enter/Leave とトランジション一覧

トランジションの仕組み自体はシンプル。リアクティブにも対応していてスゴイ。この項目は要素やコンポーネントのトランジションについて。

File List

01.html

演出アニメはtransitionタグで囲みcssで設定

01b.html

上記の派生。cssアニメのtransition設定が自由に使える

01c.html

上記の派生。cssアニメのanimation設定（キーフレームアニメ）が自由に使える

02.html

animate.cssとの連携。クラス名の規約の上書きで対応

03.html

コールバックの設定（javascriptフック）。アニメが終わった後に所定のメソッドを実行できる。たぶん使う！

03b.html

明示的なトランジション期間の設定。アニメの完了とは同期させずに終了のコールバックなどを設定

03c.html

未解決上記の派生。キーフレームアニメで利用するとバグる？

04.html

javascriptアニメを使う場合利用するのはenterとleave。cssアニメと干渉しないように「css="false"」を推奨

05.html

最初に表示するときのアニメ設定はappear属性を利用する

06.html

要素が同じ場合に複数の要素を切り替えるにはkey属性を設定する

06b.html

上記の派生。要素が同じ場合key属性を設定しないとアニメは機能しない

06c.html

要素が異なればkey属性無しでアニメできる

07.html

トランジションモードを利用してアニメのタイミングをずらす

07b.html

上記の亜種。in-outでタイミングをずらす。

08.html

コンポーネント間でもトランジションできます。この場合はkey属性は必要ありません

09.html

リストの追加/削除にトランジションを使う場合はtransition-groupを利用する

10.html

リストの順番移動にもtransition-groupを利用する

11.html

09.htmlと10.htmlをミックスしたサンプル

11b.html

上記の亜種。inline要素には利用できないことに注意

12.html

上記の応用。スタッガリングリストの作成は意外と簡単

13.html

トランジションの再利用。templateにtransitionを設置

トランジションの再利用

関数型コンポーネント。これは「描画関数とJSX」を学んでから

14.html

動的にトランジションを変更。transitionのnameをbindで可変にするだけ

15.html

未解決Vueのtransitionで要素を順番にフェードインさせる。しかしボタン連打に対応できず...

15b.html

上記の回避案。フラグを利用して移行中はボタンを押せないようにした...

15c.html

Vueのtransitionで要素を順番にフェードインさせる。他サイトのサンプル

Folder19

vue.js : 公式サイト：トランジション（2）

Links and Memo

状態のトランジション

タイトルは「状態」のトランジションだが、内容的には「数値」のトランジションという感じ。しかしvue.js自体は数値に関するアニメ処理はできないため外部ライブラリ（anime.js）などを利用する。この辺りは辺に密に処理するのではなく、アニメ側はanime.jsに完全に任せてトリガーをvue.jsに設置するのが良さそう。

File List

01.html

TweenMaxを利用した数値アニメ。vue.js側としてはwatchやcomputedを利用する

01b.html

上記の亜種。私はanime.js派なのでanime.jsを利用したサンプル

02.html

anime.jsでsvgをアニメさせたを利用したサンプル。vue.jsはsvgのプロパティもバインドできる。

Folder20

vue.js : 公式サイト：ミックスイン

Links and Memo

ミックスイン

ミックスインはコンポーネントの部品のようなもの。コンポーネント間で共通した部分に利用すると良さそう。

File List

01.html

mix-inだけの最も基礎的なサンプル

02.html

作成したmix-inはvueのmixinsプロパティに設定することで利用できる

02b.html

未解決newしたコンポーネントをvueに追加する方法はあるの？

03.html

mix-inのマージ。同じ名前は上書きされ、それ以外はマージされる

03b.html

mix-inのマージ。createdなどライフサイクル系は上書きされず両方実行される。

03c.html

上記の亜種。methodsは通常通り上書きされる。

04.html

グローバルミックスイン。効果範囲が広いのでたぶん使わない

カスタムオプションのマージストラテジ

未解決カスタムオプションについて学んでいないので飛ばす

Folder21

vue.js : 公式サイト：カスタムディレクティブ

Links and Memo

カスタムディレクティブ

「v-なんちゃら」というカスタムディレクティブを作成できる。サンプル01b.htmlのv-focusは便利かも。

File List

01.html

グローバルカスタムディレクティブ。サンプルの初期フォーカスは便利かも

01b.html

上記の派生。設定したvueインスタンス内ないでのみ利用できるローカルカスタムディレクティブ

02.html

幾つかのフック関数のサンプル

03.html

関数による省略記法と引数にobjectオブジェクトを渡す方法

Folder22

vue.js : 公式サイト：描画関数とJSX

Links and Memo

描画関数とJSX

render(描画関数)を利用してプログラム的に要素を設定できる。

File List

01.html

タグとslotの設定のみの基本的なサンプル

01b.html

上記の亜種。子ノードにたくさんの要素を設定したサンプル

02.html

データオブジェクトのシンプルなサンプル（attrsの設定）

02b.html

データオブジェクトのシンプルなサンプル（classとstyleの設定）

03.html

制約。同じ仮想ノードを2回登録してはいけない。でも何故か警告が出ない..

03b.html

上記の回避案。同じ仮想ノードを複数追加したい場合はfactory関数を使う

04.html

下記の比較用。v-forとv-ifのサンプル

04b.html

上記の比較用。素のjavaScriptを利用して書き換えたサンプル

05.html

描画関数にはv-modelの対応が無いためjavaScriptを利用して作らなければならない

05b.html

上記の派生。イベントとキー修飾子の簡単なサンプル

06.html

描画関数内でのslotの実現

06b.html

$scopedSlotsを利用するとスロット内にデータを渡せます

JSX

未解決VueでJSXを使うためのBabelプラグインがあります。私はBabelを知らないのでスルー

07.html

関数型コンポーネントの初歩的なサンプル。

08.html

勘違い編。子要素/コンポーネントへの属性およびイベントの受け渡し

08b.html

勘違い編。上記の派生。第2引数を消しても機能する...。なにか勘違いしている気がする...

09.html

勘違い解決！コンポーネントのタグに設定した属性やイベントを渡す仕組みなのだから子要素の属性は関係ない

10.html

slots()とchildrenの違い。slots()はスロット名が使えるよ！使わないときはdefaultを忘れずに！

11.html

テンプレートのコンパイル。Vue.compileを利用すると文字列をrenderで利用できる形にコンパイルできる

Folder23

基礎から学ぶVue.jsを利用した復習(1)

Links and Memo

chapter1~2

本書で利用するライブラリへのリンク。復習を兼ねて本書１章（基礎知識）と２章（データの登録と更新）を読み、本家サイトで説明のなかった要素についてまとめた。

File List

lodash.comについてKayacのブログ

lodashは配列/イディオム/テンプレートに関連した便利な関数群を提供してくれる

Vue公式サイトにあるaxiosの例

Promise ベースの HTTP クライアントでAPIからのデータ受信に便利

Vueのデータをhtmlのscroll属性にバインドしてスクロールをコントロール（失敗例）

v-bindに対するprop修飾子。単独ではスムーススクロールはできないのでanime.jsの力を借りた。しかしユーザーのスクロール操作に対応できずNG

Vueのデータをhtmlのscroll属性にバインドしてスクロールをコントロール（成功例）

上記の解決案。v-on:scrollでスクロール値をdataに反映することで問題を回避。何かに利用できそう

Vue-scrollプラグインの利用

上記の方法だとページのスクロールは無理っぽいので調べたらプラグインを発見した。便利！

ハイフン付くのcssクラス名

ハイフン付きのcssクラス名はバインドする際クォートで囲まないとエラーになる

svgをリアクティブに設定

svgというよりinputで作成するスライダーをメモしたかった

v-showでもトランジションOK

本家サイトではv-ifを利用したトランジションだけだったので、v-showでも可能か確認した

SVGを操作する

svgの操作よりもinputで作成するスライダーに興味があった

v-for：配列

配列の要素をv-forで取得する構文

v-for：Object（値のみ）

上記の亜種。Objectの場合も値だけの取得なら構文は配列と同じ

v-for：Object（値とkey値）

上記の亜種。key値も必要な場合は（）を利用し第2引数を用意する

v-for：Object（値とkey値とindex番号）

上記の亜種。index番号も必要なら第3引数も用意する

v-forで指定回数繰り返す

配列やObjectを使うのではなくjavascriptのように指定回数だけ繰り返すことも可能

v-forで直接配列を使う

上記の亜種。v-forには直接配列を指定することも可能

v-forで文字列を使う

上記の亜種。v-forは文字列から1文字ずつ抽出していくことも可能

jsonの読込（axiosの利用）

P84ajax関連のライブラリ、axiosを利用してjsonファイルを読み込む

jsonの読込（jQueryの利用）

jQueryのgetJsonを利用したサンプル

$elの使い方

P85vueインスタンスのターゲット要素にアクセスできる。ただしDOMが描画されるmount以降

$refsの使い方

P86これは本家サイトでも学んだがコンポーネントを絡めたサンプルで複雑だった。これは超シンプル。

$refsの使い方

P86本家サイトでも注意されたがあくまでも一時的な変更なので注意が必要

$refsの使い方（上記の亜種）

上記のような処理はdataに変数を追加して管理する

$refsの使い方（上記の亜種）

v-ifの代わりにv-showを利用すれば問題ないが、やはり上記のが正統

v-pre（vueコンパイルしない）

P88完全に静的な子要素にはv-preを利用するとパフォーマンスアップ。でも余り使わないかな...

v-text（テキスト部分を属性部分から設定）

P89v-textを使うとマスチェット構文を使わずにテキストを設定できる。デフォルトの設定に使えるかも。htmlタグを利用したい場合はv-htmlを使う。そちらは本家サイトでも学んだ。

v-cloak（コンパイル前の表示を設定）

P91vueの表示に時間がかかるような場合、それまでVue部分を表示しないような設定が可能です。設定にはcssを利用します

仮想DOMと実際のDOMの描画差を確認

P92仮想DOMの描画タイミングを確認したかったがシンプルなサンプルでは差は出ないみたい。でも差は認識しておくべき。

Folder24

基礎から学ぶVue.jsを利用した復習(2)

Links and Memo

chapter3~4

復習を兼ねて本書３章（イベントとフォーム入力の受け取り）と４章（データの監視と加工）を読み、本家サイトで説明のなかった要素についてまとめた。

File List

loadイベントの利用

v-onを利用して画像が読み込まれたらフェードインするサンプル

.native修飾子のサンプル

P102native修飾子を利用するとコンポーネントタグからvueのメソッドを実行できる

fileタイプのinputにはs-modelは使えない

P111なので代わりにchangeイベントで変更する

rangeタイプのサンプル

P112モダンブラウザならinputにrange型がある

rangeタイプのサンプル

P112モダンブラウザならinputにrange型がある

colorタイプのサンプル

P112モダンブラウザならinputにcolorｗ型がある

スクロールイベントの取得

P114vue単独ではbodyのスクロールには対応できないので色々と頼る。スクロール位置によってUIを返るときに便利。このサンプルはナビ背景を変更しています

スムーススクロールの実現

上記の亜種。これもvue単独では難しいのでライブラリに頼る

Vue外部から値を更新して反映させる

P117外部からVue関連の要素を変更した場合はイベントを利用してVueを更新しリアクティブを起動するという手もある。イザという時に覚えておこう

computedの入れ子使用

P121computedの中で他のcomputedを利用しても問題なく機能する

computedの値は通常設定できない

P122computedは基本的にRead onlyなので、このサンプルはエラーになります

computedにsetterを設定する

P122computedにsetterを設定すれば値を設定することが可能になる

computedを利用したリストの絞り込み（簡易版）

P124データに変更がない限り更新されないcomputedは負荷が軽い。複雑そうに見える仕組みもomputedで事足りることは多い

computedを利用したリストの絞り込み

P124上記の亜種。本に載っているのはこっち。上記は機能（上限の設定）を削除して機能を把握しやすくした

上記のサンプルにソートを追加

P126上記の亜種。本に載っているソースを少し変更し、ソートor生データの切換にした。ソート処理にはlodashライブラリを利用した

ウォッチャ

P128本家サイトでは$watchを使っていたけれどVue内にも設定できるのね

ウォッチャのオプション

上記の亜種。本家サイトではスルーされていたdeepやimmediateのオプション

ウォッチャのdeep

上記の亜種。deepの機能を確認。配列やオブジェクトの参照渡しなのでoldValは取得できないよ。必要になることは少ないと思うけど、そういうときは→P132

ライフサイクルの関数内でウォッチャ開始

P130$watchを利用してmountedしてから監視をするようにしました

ウォッチャを停止する

P130$watchの返値はfunction型になっており、実行することで監視を停止できる

1回だけ変化を監視するウォッチャ

上記の亜種。unwatchを上手く利用することで1回だけ変化を監視できるようにする。なんとなく使う機会ありそう

watchの頻度をコントロール

P130ネット処理などを挟む重い処理はwatchで監視するには負荷が高い。そういう場合はlodashライブラリのdebounceを利用すると良いかも

メモ：lodashのdebounce

上記のサンプルで利用したdebounceはスクロール時の値の処理に使えると思う！

watchで複数の値をまとめて監視

P131computedで複数の値を配列で返すfunctionを作成し、それをwatchで監視する（どちらかの変数が変化したら処理）

watchでAPIと連携

P133computedで複数の値を配列で返すfunctionを作成し、それをwatchで監視する（どちらかの変数が変化したら処理）

メモ：フィルタでテキストの変換処理

フィルタは本家学習でスルー（プラグインより後ろだったので...）した部分なのでしっかり学ぼう！

フィルタの使い方（ローカル）

P134filterを利用すればdataはそのままに表現系だけ変更できるので便利！

フィルタの使い方（グローバル）

上記の亜種。インスタンスを跨いで利用するようなものはVue本体に追加

フィルタに引数を渡す

P135（）を利用して引数を複数渡すことができます

複数のフィルタを通す

P136フィルタはパイプで連結できる。左から順に処理される

カスタムディレクティブ

P140本家サイトでも学んだけれど、watchの親戚扱いなのね。ライフサイクルはbind/inserted/update/componentUpdated/unbindで引数はel/binding/vnode/oldVnode。サウンドの再生/停止を切り替えるv-audioディレクティブを作成したよ!

カスタムディレクティブ(2)

上記の亜種。ライフタイムのupdateはこれを内包しているコンポーネントの他の要素に変化があったときも実行されるので、念のためoldValueと比較して同じ時は弾くと良い。

nextTick

P143DOM更新後に処理をする（仮想DOMと実際のDOMの変化にはticks単位の差があるため）。これは重要