参考にさせて頂いたページ
はじめに
公式ドキュメントのガイドを見返すときに、「あれはどこに書いてあったかなー？」というのが、左カラムの大きい見出しだけ見てもまだよくわからなかったりするので、小さい見出しを展開したうえで少し要約して、ところどころ復習しやすくしてみます。
ちなみに2016年2月16日現在の最新v1.0.16についてです。
インデックス
インストール
Vue.jsをプロジェクトにインストール導入する方法について、書いてあります。
はじめに
Hello World
双方向 (Two-way) バインディング
type="text"の要素を使用した、非常に基本的なバインディングについて書いてあります。
リストのレンダリング
v-forを使ってリストを繰り返す方法について書いてあります。
ユーザー入力のハンドリング
v-on:clickによって、methodsを実行することについて、書いてあります。
All Together Now
TODOアプリケーションの作成について書いてあります。
v-on:keyup.enterと記述すると、エイリアスでキーを指定できる例などがあります。
概要
機能の概要です。
リアクティブデータバインディング
データバインディングやディレクティブについてざっくり書いてあります。
コンポーネントシステム
コンポーネントシステムについてざっくり書いてあります。
Vue インスタンス
コンストラクタ
Vueをコンストラクタとしてそのまま使用する例と、Vue.extendによって、Vueを継承させたMyComponentをvar myComponentInstance = new MyComponent()みたいな感じでコンストラクトする例について書かれています。
プロパティとメソッド
インスタンス名.$プロパティ名とかインスタンス名.$メソッド名でインスタンスからプロパティへのアクセスが出来ることについて書かれています。
インスタンスライフサイクル
ライフサイクルについてざっくり書かれています。
ライフサイクルダイアグラム
ライフサイクルについて、図で解りやすく説明しています。
データバインディング構文
展開
テキスト
{{ msg }}と{{* msg }}について書かれています。
生の HTML
{{{ raw_html }}}について書かれています。
属性
HTMLタグの属性の値についてもMustacheで<div id="item-{{ id }}"></div>と記述できる事について書かれています。
バインディング式
mustache タグ内部に入れたテキストは バインディング式 と呼ばれています。
JavaScript 式
mustache タグ内部では、JavaScriptの単一式が使用できることについて書かれています。
文や複数の式は駄目です。
フィルタ
フィルタの使い方、フィルタに引数を渡す方法について、ざっくり書かれています。
ディレクティブ
v-接頭辞が付く属性について、ざっくり書かれています。
引数
ディレクティブは、コロンの次に引数を記述する事ができます。
例えばv-bind:href="url"の場合は、hrefが引数です。
v-on:click="doSomething"の場合は、clickが引数です。
修飾子
<a v-bind:href.literal="/a/b/c"></a>というのを例に挙げて、修飾子について説明しています。
この項にこの例はありませんでしたが、v-on:keyup.enterも修飾子を使用した例です。
省略記法
v-bind と v-on は省略記法があります。
v-bind 省略記法
v-bindの省略記法について、例が書いてあります。
v-on 省略記法
v-onの省略記法について、例が書いてあります。
算出プロパティ
テンプレート内部には単一の式しか書けないので、複数の式を書くことのできる、算出プロパティ (computed property) について書かれています。
vue.js 1.0 その0001-004 算出プロパティ computed - MOTOMICHI WORKS BLOG
基本の例
最も基本的な記述の例について書かれています。
computedのgetterだけを定義する例です。
算出プロパティ 対 $watch
$watchで任意のプロパティを監視できる事に予め触れたうえで、computedプロパティを使用した方が良い例を示しています。
算出 Setter 関数
computedのsetterも定義する場合の記述例を挙げています。
getter関数とsetter関数が定義される例です。
クラスとスタイルのバインディング
v-bind:classとv-bind:styleによってスタイルを変更する方法について書かれています。
バインディング HTML クラス
v-bind:classについて書かれています。
class="{{ className }}"とv-bind:classの両方をひとつの要素に適用するのは非推奨です。
オブジェクト構文
v-bind:class="オブジェクト"という構文で、classをaddしたりremoveしたりする方法について、例を挙げて説明されています。
配列構文
v-bind:class="配列"という構文で、classをaddしたりremoveしたりする方法について、例を挙げて説明されています。
バインディングインラインスタイル
v-bind:styleについて書かれています。
オブジェクト構文
v-bind:style="オブジェクト"という構文で、styleをaddしたりremoveしたりする方法について、例を挙げて説明されています。
配列構文
v-bind:style="配列"という構文で、styleをaddしたりremoveしたりする方法について、例を挙げて説明されています。
自動プリフィックス
v-bind:styleで付与するスタイルには、自動でベンダープレフィックスが付けられる事について書かれています。
条件付きレンダリング
要素の表示と非表示の切り替えについて書かれています。
v-if
v-ifとv-elseについて書かれています。
テンプレートでの v-if
複数の要素に対してレンダリングを制御したい場合はtemplate要素が使用できる。という事について書かれています。
v-show
v-showはtrueの場合もfalseの場合もレンダリングはされる。
falseの場合は、styleがdisplay:none;になる。
v-else
v-else 要素は、v-if または v-show の直後になければなりません。それ以外の場合は認識されません。
v-if 対 v-show
v-ifとv-showの使い分けについて書かれています。
表示と非表示の切り替えが頻繁に行われることが想定される場合はv-showを、ほとんど行われない場合はv-ifを使うとパフォーマンスの観点で適切です。
リストレンダリング
v-for
v-forの基礎的な記述について例を挙げて説明されています。
ループの中では$indexが使えます。
下記のようにする事で、itemだけでなく、indexもエイリアスを指定する事もできます。
<div v-for="(index, item) in items">
{{ index }} {{ item.message }}
</div>
テンプレートでの v-for
v-forでも、template要素を使用する事ができるという事について書かれています。
配列の変化を検出
変更メソッド
「Vue.js は View の更新もトリガするために、監視された配列の変更メソッドをラップ (wrap) します。」という事について書かれています。
配列の置き換え
配列をreturnするメソッドについて、パフォーマンスが考慮されている事などが説明されています。
track-by
track-by属性を使用して<div v-for="item in items" track-by="キー">のように記述することで、当該のオブジェクトを丸ごと置き換えた場合にも、DOMの一部を置き換えるだけで済む。という事について書かれています。
track-by $index
ユニークなキーが無い場合に、$indexを使用する事ができますが、トレードオフもあります。
トレードオフとされる部分をしっかり理解して使う必要があるので、詳細は公式ドキュメントで。
注意事項
JavaScript の制限のため、Vue.js は配列で以下の変更を検出することはできません。
なので、vm.$set( keypath, value )とvm.$remove( [callback] )をそれぞれ使用することで、バインディングできるとかそういう事について書かれています。
オブジェクトの v-for
配列ではなく、オブジェクトのv-forでは、ループの中で$keyも使えるということについて書かれています。
オブジェクトを反復処理するとき、順序は Object.keys() の列挙順のキーに基づいており、全ての JavaScript エンジンの実装で一貫性が保証されていません。
範囲の v-for
10回繰り返しなど、繰り返しの回数を予め決めたv-forについて書かれています。
フィルタ/ソートされた結果の表示
配列に対するフィルタやソートについて書かれています。
メソッドとイベントハンドリング
メソッドハンドラ
v-onでメソッド名に直接バインドして処理を実行します。
このとき実行されたメソッドの中でeventオブジェクトが使用できる事などについて、例を挙げて説明されています。
インラインステートメントハンドラ
「メソッド名に直接バインドする代わりに、私達はインライン JavaScript 文も使用することができます。」という事について書かれています。
このとき、実行するメソッドには$eventを引数として渡す事で、eventオブジェクトを使用する事ができる事などについて説明されています。
イベント修飾子
v-on:click.stop="doThis"やv-on:submit.prevent="onSubmit"とする事で、event.preventDefault() または event.stopPropagation()を実行できる事について、書かれています。
1.0.16からはv-on:click.capture="doThis"とv-on:click.self="doThat"の二つの修飾子が導入されています。
キー修飾子
v-on:keyup.enterやv-on:keyup.13とする事で、任意のキーを指定できる事や、enterなどのエイリアス一覧について書かれています。
なぜ HTML 内にリスナを記述するのですか？
HTML内にリスナを記述することの利点について書かれています。
フォーム入力バインディング
基本的な使い方
Text
Checkbox
Radio
Select
vue.js 1.0 その0001-003 フォーム入力バインディング select要素 - MOTOMICHI WORKS BLOG
値のバインディング
v-bindを使用する事によってインスタンスが持っているdataやオブジェクトリテラルを渡せます。
(v-modelでは静的な文字列またはbooleanだけを渡すことができます)
Checkbox
Radio
Select Options
パラメータ属性
フォーム入力バインディングに使える特別な属性について書かれています。
lazy
lazy属性を付与すると、changeイベント後に同期されます。
number
ユーザーの入力において自動的に数値として永続化する場合、v-model を管理された input の値に対して、number 属性を追加することができます。
debounce
キーストローク後の最小遅延の設定ができます。
トランジション
グローバルAPIのVue.transition(id, hooks)の使い方と、挙動の概要について説明されています。
CSS トランジション
例
button要素のv-on:clickをトリガーにして、スライドトグルの例を挙げています。
トランジション CSS クラス
CSSトランジションに使用されるCSSのclassの命名規則などについて説明されています。
カスタムトランジションクラス
1.0.14からはCSSのclassについて任意のclass名を指定できるようになりました。
トランジションタイプの宣言
複数種類のトリガーに対して、transitionまたはanimationを任意で設定する方法について書かれています。
設定しない場合は正しいタイプをVue.jsが自動的に検出します。
トランジションフローの詳細
トランジションがどのような順序で処理を実行するのか、詳細に説明されています。
CSS アニメーション
CSSアニメーションについて、具体的なコードの例を挙げて説明されています。
JavaScript トランジション
CSSのclassを定義せずに、スタイルの設定もJavaScriptで行う方法について、具体的なコードの例を挙げて説明されています。
スタガリングトランジション
v-forで繰り返し出力されている要素に対して<div v-for="list" transition stagger="100"></div>のように、transition属性とstagger属性を付与する事によって、スタガリングトランジションが適用できます。
具体的なコード例を挙げて説明がされています。
コンポーネント
コンポーネントの使用
登録
- Vue.extend() を使用してコンポーネントコンストラクタを作成
- Vue.component(tag, constructor) で登録
- rootインスタンスを作る (任意のelを引数としてnewする)
- 登録したカスタムタグを<my-component></my-component>のように使用する
などの基本について書かれています。
4つの手順を具体的にコードのうち、JavaScript部分を書くと以下の通りです。
// 定義する (Vue.extend() を使用してコンポーネントコンストラクタを作成)
var MyComponent = Vue.extend({
template: '<div>A custom component!</div>'
})
// 登録する
Vue.component('my-component', MyComponent)
// rootインスタンスを作る (任意のelを引数としてnewする)
new Vue({
el: '#example'
})
ローカル登録
別々にVue.extendで定義したコンポーネントを、グローバルに登録せずにローカルに登録する方法について書かれています。
簡単な登録
定義と登録をいっぺんにやる方法について書かれています。
グローバルに登録、ローカルに登録、両方について例を挙げて説明されています。
コンポーネントオプションの注意事項
Vue.extend()で予め設定するオプションのうち、dataとelはインスタンス間で共有する事が望まれないものである可能性が高いため、以下のように関数の返り値として、新たなオブジェクトを生成する。という事について書かれています。
var MyComponent = Vue.extend({
data: function () {
return { a: 1 }
}
})
is 属性
table要素の内部など、配置できる要素が限定される場所において、カスタムエレメントを使用する仕組みとして、is属性がある。という事について書かれています。
下記のように例が挙げられています。
<table> <tr is="my-component"></tr> </table>
Props
Props によるデータ伝達
子コンポーネントのテンプレートで親データを直接参照できない(そしてすべきでない)ということです。データは props を使用して子コンポーネントに伝達できます。
要するに子コンポーネントとしての使用が想定されるカスタムタグは、propsで明示的に受け取ったデータだけを使用する。
最も簡単なpropsの具体例を挙げて説明がされています。
キャメルケース 対 ケバブケース
HTML の属性は大文字と小文字を区別しません。
そのためprops: ['myMessage']として定義したとき、HTMLに付与する属性としてはケバブケースで<child my-message="hello!"></child>と書くことになります。
動的な Props
v-bind を使用して親のデータに props を動的にバインディングすることもできます。
具体的な例を挙げて説明されています。
リテラル 対 動的
下記はリテラル構文なので、文字列が渡されます。
<!-- これは純粋な文字列"1"を渡します --> <comp some-prop="1"></comp>
変数や数字なども渡せます。
<!-- これは実際の数を渡します --> <comp :some-prop="1"></comp>
Prop バインディングタイプ
「デフォルトで、全ての props は子プロパティと親プロパティとの間で one way down バインディングです。」ということを前提として、「.sync そして .once バインディングタイプ修飾子 (binding type modifier) による one-time バインディングを強いることも可能です。」という事について説明しています。
そして特に以下の事に注意が必要です。
もし、渡される prop がオブジェクトまたは配列ならば、それは参照で渡されることに注意してください。オブジェクトの変更または配列は、使用しているバインディングのタイプに関係なく、子の内部それ自身は、親の状態に影響を与えます。
Prop 検証
バリデーションチェックみたいな事です。
各propは、受け取るデータ型を決める事ができます。
親子間の通信
$root、$parent、$childrenなど、インスタンス間でのアクセスが可能である事に触れたうえで、データのやりとりはpropsを使用して明示的に行う事を推奨しています。
親のチェーン
カスタムイベント
下記のイベントリスニングとイベント発生について書かれています。
- $on()
- $emit()
- $dispatch()
- $broadcast()
具体的な例を挙げて、カスタムイベントの発生と、そのリスニングの説明をしています。
例の中では$onではなく、eventsプロパティを使用しています。
カスタムイベントに対する v-on
さきほどのカスタムイベントの項で挙げられた例よりも<child v-on:child-msg="handleIt"></child>とv-on属性を記述することで、どの要素がカスタムイベントを発生させるかがより明示的であるとしています。
また、親に影響を与える事になる処理が、親のmethodsであるhandleItメソッド内に記述されることで、より理解しやすいコードになる。という事について説明されています。
子コンポーネントの参照
親インスタンスから、子コンポーネントのインスタンスへのアクセスが必要となるとき、v-refを使用する事について書かれています。
具体的な例を挙げて説明されています。
スロットによるコンテンツ配信
slot要素を使い、カスタムタグ内部にカスタムタグを配置する方法について、ざっくり書かれています。
vue.js 1.0 その0001-002 コンポーネント 単一スロット、名前付きスロット - MOTOMICHI WORKS BLOG
コンパイルスコープ
slot要素の使い方の前に、親のスコープと子のスコープについて復習して、それぞれ適切に使用する事について例を挙げて説明しています。
単一スロット
コンポーネントがslot要素を一つ内包している場合について、具体例を挙げて説明しています。
名前付きスロット
コンポーネントが複数のslot要素を内包している場合について、具体例を挙げて説明しています。
動的コンポーネント
is属性を使用して表示するコンポーネントを動的に切り替える方法について、具体的な例を挙げて説明しています。
keep-alive
keep-alive属性について理解できなかった。実際に作ってみる必要がある。
activate フック
activate属性について理解できなかった。実際に作ってみる必要がある。
transition-mode
transition-mode="out-in"またはtransition-mode="out-in"を指定する事で、処理する順番を制御できます。
その他
コンポーネントと v-for
<my-component v-for="item in items"></my-component>のように記述する事で、コンポーネントをループできる事について触れています。
そしてこのとき、コンポーネント内部に$indexやitemを取り込むには、v-bindディレクティブを使ってpropsに渡します。
