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

本書で利用するライブラリへのリンク。復習を兼ねて本書1章(基礎知識)と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

復習を兼ねて本書3章(イベントとフォーム入力の受け取り)と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にcolorw型がある
スクロールイベントの取得
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単位の差があるため)。これは重要