Vueチュートリアル 1日目
今日からVue.jsのチュートリアルを始めた。 一通り読んでいき、初見で思ったことや覚えておいたほうが良さそうなことをメモ書きとして書いておく。
進捗度合い
インストール〜リストレンダリングまで読み進めた。 最初のビルドが結構ごちゃごちゃしてて、頭の中で整理できてない感はあるけれど、とりあえず進めてみることにする。
メモ
https://jp.vuejs.org/v2/guide/index.html
- ユーザーインターフェイスを構築するプログレッシブフレームワーク
- 開発用ビルドと本番用ビルドなどビルド方法も幾つか存在するみたい
- 補足:CSPとか知っておくと良さそう。https://oxynotes.com/?p=8895
- reactive: 受身的な、待ちの姿勢。反応を示す、反応が早い、反応を起こしやすい。つまり、変更などにすぐに反応して反映しやすいってことらしい。
- 要素の属性の束縛(バインディング)
- directive:ディレクティブ、指令、命令
- テキストをデータに束縛できるだけではなく、DOMの構造にデータを束縛できる。
- interaction: 交流、ふれあい、やりとり、相互作用
- なるほど。データや捜査対象のDOMを束縛できるから、jsで設定も楽だし、ロジックの開発に集中できるメリットがありそう。
- 双方向バインディング
Vue Componentを上手く使えば、大規模アプリケーションにおいてコンポーネントを小さく分割でき、開発が行いやすくなる。 component使うと例えばこんな感じになりそう
<div id="app"> <app-nav></app-nav> <app-view> <app-sidebar></app-sidebar> <app-content></app-content> </app-view> </div>
一見、わけのわからないタグを使ってhtmlを書いているように見えるけど、各タグはvue componentで小さく分割されている。分割されたcomponentはこのようにコード量を大幅に削ったものになるらしい。 最初はウッとなりそうだけど、慣れればかなり見やすくなりそう。
https://jp.vuejs.org/v2/guide/instance.html
- 慣例として、 vm (ViewModel の略) を Vue インスタンスの変数名としてよく使っている。インスタンス名に迷ったら
vm
とかで良いかも。 - root vue instance
- とりあえず、「全ての Vue コンポーネントは Vue インスタンスで、同じオプションオブジェクトを受け入れる(いくつかのルート特有のオプションを除く)と理解しておけば十分」らしい
- vmインスタンスのdataプロパティは、インスタンスが作成したときにリアクティブになる。あとからインスタンス作成後にdataプロパティに、新規の値を追加しても、それはリアクティブな状態ではない。あとから追加するのがわかっているのなら、初期値を追加しておくべき。とのこと。
- Object.freeze()
- ユーザー定義のプロパティと区別するために、定義済みのプロパティやメソッドは、
$
が着いている。apiリファレンス - instance life cycle hook
- インスタンスプロパティとかコールバックでアロー関数を使うとエラーになるみたい。
created: () => console.log('hoge
)`みたいなのはだめみたい。
https://jp.vuejs.org/v2/guide/syntax.html
- render関数を利用してjsだけでHTMLを描画する方法もある。ただ基本的にはtemplateを使うのが推奨されているらしい。
- mustaches(2重中括弧)。ちなみに和訳は口ひげ
v-html
は生のHTMLを出力するためにあるが、XSS脆弱性に起因するので、基本的に使わないほうが良さそう。{{ 単一式 }}
はOKだけど、{{ 文 or 単一文 }}
は実行できない。OKなのは{{ 1+1 }}
とか。NGは{{ var a = 1 }}
みたいな式になるケース。ちょっとした単一式ならmustachesを使えそう。- ディレクティブ
https://jp.vuejs.org/v2/guide/computed.html
- テンプレート内にロジックを書くと複雑になるので、算出プロパティというのがある。インスタンス内の設定したdataに依存したロジック結果を出してくれて、
vm.hogeFuga
みたいにあプロパティとして呼び出せる。ドキュメントではgetter関数として利用すると書いている。 - 算出プロパティ。。。なんか和訳イケてない気が。computed property
- 算出プロパティは、普通のメソッド定義と違い、依存関係に基づいて結果をキャッシュしてくれる。
message が変わらない限りは、reversedMessage に何度アクセスしても、関数を再び実行することなく以前計算された結果を即時に返すということです。
- 算出プロパティじゃなくて、computed propertyと呼ぶ。。。
- computed propertyはキャッシュを意識したほうが良さそう。
- computed propertyはsetterもある!
- 多くの場合はcomputed propertyで事足りるけど、データの変更に合わせて非同期通信やコストの高い処理を使うときは
watchオプション
が良さそう。https://jp.vuejs.org/v2/api/#vm-watch
https://jp.vuejs.org/v2/guide/class-and-style.html
- クラスとスタイルも属性になるので、
v-bind
でバインディングすることができる。 v-bind:class
はハッシュみたいに渡せたり、computed propertyも渡せるし、配列で複数のプロパティを渡すことも可能- componetを利用するときは注意が必要で、例えば、componentのtemplateに
<p class="hoge"></p>
とかあったとして、そのcomponentを呼び出す先で<my-component class="{active: isActive}"></my-componet>
とかしたら、rootのhogeクラスも引き継いでくる。その要素上に存在するクラスを上書きするということはない。知っておいておいたほうがハマりが少ないかも。 - インラインスタイルのバインディングでやるときは
fontSize
みたいにキャメルケース。ハイフンで区切る宣言でもいいみたい。 - あと、自動プリフィックス機能もあるみたい。便利。まあ、もうベンダープリフィックスはオワコンではあるけど。
https://jp.vuejs.org/v2/guide/conditional.html
v-if
,v-else
,v-else-if
だけど、HTMLタグも間に入っているから、実際に使ったらすごい見づらそう。if内のHTMLとかが長かったら、「どこにelse句あるんだ??」ってなりそうと思った。- なんで、条件付きレンダリングの章で、説明されてるのかよくわからなかったけど、keyによる再利用可能な要素の制御ができるみたい。
- ??? => v-show はtemplate要素をサポートせず、v-else とも連動しないということに注意してください。
- v-ifは遅延描画 lazy renderingらしい。
- ディレクティブは優先度があるらしく、
v-for
はv-if
よりも優先度が高いみたい。CSSみたいだな
v-showとv-ifの使い分け
とても頻繁に何かを切り替える必要があれば v-show を選び、条件が実行時に変更することがほとんどない場合は、v-if を選びます。
うーん。日本語が理解しにくい。何となく分かるけど。
https://jp.vuejs.org/v2/guide/list.html
v-for
はindexもとれる
<li v-for="(item, index) in items"> {{ index }} - {{ item.message }} </li>
第2引数にindex値がくるみたい。これはrubyのeach_with_index
と同じじゃ。
* ハッシュだったら、keyとindex両方渡せるのか。
<div v-for="(value, key, index) in object"> {{ index }}. {{ key }}: {{ value }} </div>
地味に便利じゃね?と思った。 * in-place patch戦略???
- インデックスでアイテムを直接設定しても、リアクティブにその要素の値を設定できない。でも
set
を使えばいける。 - 配列の長さを設定し直しても、リアクティブに長さを変更できない。でも
splice
を使えばいける。
var vm = new Vue({ data: { items: ['a', 'b', 'c'] } }) vm.items[1] = 'x' // これをやっても、bがリアクティブにbにはならない vm.items.length = 2 // これをやっても、要素数がリアクティブに2個ならない vm.$set(vm.items, indexOfItem, newValue) // これなら行ける vm.items.splice(newLength) // これなら行ける
- 2.2.0 以降でcomponentでv-forを使う場合はkeyは必須みたいです。
- このリストレンダリングの章の最後に簡単なTODOアプリの基本が載っていて参考になりそう。