Embed Size (px)
Citation preview
One Night Vue.js 万葉究楽部
profile
株式会社万葉 / @Kyuden_
Vue.js 事例紹介
こんな感じの通知機能が20分位※で作れました。それくらい扱いやすいです。
※デザインの時間は除く
Vue.jsさわってみましょう
https://github.com/Kyuden/one-night-vue
環境構築
CloneしてREADME.mdを読んでね
Stage 1双方向バインディングを体験
2 staps1. ブラウザで表示
• www/demo1.html
2. コードから処理を推測 • coffee/demo1.coffee • haml/demo1.haml
thinking time
haml/demo1.haml ! %body #demo1 %p{"v-text" => "message"} %input{"v-model" => "message"}
coffee/demo1.coffee!new Vue el: "#demo1" data: message: "Hello Vue"
VueVueクラスのコンストラクタでViewModelを作成
VueModelではなくViewModel
haml/demo1.haml ! %body #demo1 %p{"v-text" => "message"} %input{"v-model" => "message"}
coffee/demo1.coffee!new Vue el: "#demo1" data: message: "Hello Vue"
以下の初期値をVueクラスのコンストラクタに渡し ViewModelを作成している
el: "#demo1"data: message: "Hello Vue"
next
haml/demo1.haml ! %body #demo1 %p{"v-text" => "message"} %input{"v-model" => "message"}
coffee/demo1.coffee!new Vue el: "#demo1" data: message: "Hello Vue"
elViewModelに紐付けるDOM要素を指定
1つのViewModelには一つのDOMしか紐付けることが出来ないのでIDで指定
haml/demo1.haml ! %body #demo1 %p{"v-text" => "message"} %input{"v-model" => "message"}
coffee/demo1.coffee!new Vue el: "#demo1" data: message: "Hello Vue"
s #demo1のDOMを指定している
#demo1のDOMがViewModelを紐づく
haml/demo1.haml ! %body #demo1 %p{"v-text" => "message"} %input{"v-model" => "message"}
coffee/demo1.coffee!new Vue el: "#demo2" data: message: "Hello Vue"
s #demo1を#demo2に変更すると ViewModelの管理外となるので動作しない
next
haml/demo1.haml ! %body #demo1 %p{"v-text" => "message"} %input{"v-model" => "message"}
coffee/demo1.coffee!new Vue el: "#demo1" data: message: "Hello Vue"
dataViewModelが保持するデータを定義
ViewModelのプロパティにアクセスするプロキシと言っても良い
haml/demo1.haml ! %body #demo1 %p{"v-text" => "message"} %input{"v-model" => "message"}
coffee/demo1.coffee!new Vue el: "#demo1" data: message: "Hello Vue"
data配下にmessageプロパティとして 初期値 ‘’Hello Vue’’ を定義している
next
haml/demo1.haml ! %body #demo1 %p{"v-text" => "message"} %input{"v-model" => "message"}
coffee/demo1.coffee!new Vue el: "#demo1" data: message: "Hello Vue"
v-textDOM要素の内側をViewModelのプロパティ値でバインディングする
v-◯◯◯をDirectiveと呼ぶ。EX) v-textディレクティブ
haml/demo1.haml ! %body #demo1 %p{"v-text" => "message"} %input{"v-model" => "message"}
coffe/demo1.coffee!new Vue el: "#demo1" data: message: "Hello Vue"
messageプロパティ値"Hello Vue”が %pタグ内にバインディングされる
next
haml/demo1.haml ! %body #demo1 %p{"v-text" => "message"} %input{"v-model" => "message"}
coffee/demo1.coffee!new Vue el: "#demo1" data: message: "Hello Vue"
v-model%inputや%selectや%textareaなど編集可能な要素を使用し
ViewとViewModle間で双方向データバインディングを行う
データは常に同期される(同期のタイミングを指定するオプションも存在する)
haml/demo1.haml ! %body #demo1 %p{"v-text" => "message"} %input{"v-model" => "message"}
coffe/demo1.coffee!new Vue el: "#demo1" data: message: "Hello Vue"
%input要素への入力値に応じて messageプロパティ値を同期させる
%input要素への入力値に応じて messageプロパティ値が更新される
Stage 1 End
Stage 2{{ }}
2 staps1. ブラウザで表示
• www/demo2.html
2. コードから処理を推測 • coffee/demo2.coffee • haml/demo2.haml
以後省略(全Stage同じです)
thinking time
haml/demo2.haml !#demo2 %p {{ 'hello' + ' ' + user.firstName + ' ' + user.lastName }}
coffee/demo2.coffee!new Vue el: "#demo2" data: user: firstName: "Masahiro" lastName: "kyuden"
{{ }}Mustacheはv-textとしてコンパイルされる
Mustacheテキスト以外にHTML属性指定でも使用することができる
haml/demo2.haml !#demo2 %p {{ 'hello' + ' ' + user.firstName + ' ' + user.lastName }}
coffee/demo2.coffee!new Vue el: "#demo2" data: user: firstName: "Masahiro" lastName: "kyuden"
%p{"v-text" => "'hello ' + user.firstName + ' ' + user.lastName"}
Stage 2 End
Stage 3色々なDirectiveを使ってみよう
thinking time
haml/demo3.haml !#demo3 %ul /step① %li{"v-repeat" => "todos"} {{content}}
coffee/demo3.coffee!new Vue el: '#demo3' data: todos: [ { done: true content: 'Learn JS' } { done: false content: 'Learn vue.js' } { done: true content: 'Lean yourself' } ]
v-repeat配列を指定する事で子のViewModelを作成する
(配列の要素の数だけ繰り返し実行される)
引数がない場合はViewModelのDataを配列として扱う
haml/demo3.haml !#demo3 %ul /step① %li{"v-repeat" => "todos"} {{content}}
coffee/demo3.coffee!new Vue el: '#demo3' data: todos: [ { done: true content: 'Learn JS' } { done: false content: 'Learn vue.js' } { done: true content: 'Lean yourself' } ]
配列であるtodosを与えると要素数分作成される。
next
haml/demo3.haml !#demo3 %ul /step② %li{class: "{{done ? 'done' : ''}}", "v-repeat" => "todos"} {{content}}
coffee/demo3.coffee!new Vue el: '#demo3' data: todos: [ { done: true content: 'Learn JS' } { done: false content: 'Learn vue.js' } { done: true content: 'Lean yourself' } ]
sass/style.sass!li.done text-decoration: line-through
{{ }}MustacheのBindingはHTML属性指定でも有効
ただし%imgのsrc指定はv-attrを使用するべき。
ブラウザ評価時にMustache形式のままHTTPリクエストを発行し404が起きるため
next
haml/demo3.haml !#demo3 %ul /step③ %li{class: "{{done ? 'done' : ''}}", "v-repeat" => "todos", "v-on" => "click: done = !done"} {{content}}
coffee/demo3.coffee!new Vue el: '#demo3' data: todos: [ { done: true content: 'Learn JS' } { done: false content: 'Learn vue.js' } { done: true content: 'Lean yourself' } ]
v-onイベントリスナーを要素に登録する。関数か式を引数で評価する。
キータイプイベントなども用意されている
haml/demo3.haml !#demo3 %ul /step③ %li{class: "{{done ? 'done' : ''}}", "v-repeat" => "todos", "v-on" => "click: done = !done"} {{content}}
coffee/demo3.coffee!new Vue el: '#demo3' data: todos: [ { done: true content: 'Learn JS' } { done: false content: 'Learn vue.js' } { done: true content: 'Lean yourself' } ]
clickされた時に を評価するdone = !done
Stage 3 End
Stage 4filterを使ってみよう
thinking time
haml/demo4.haml !#demo4 %ul %li{class: "{{done ? 'done' : ''}}", "v-repeat" => "todos", "v-on" => "click: done = !done"} /step① {{content | uppercase}}
coffee/demo4.coffee!new Vue el: '#demo4' data: todos: [ { done: true content: 'Learn JS' } { done: false content: 'Learn vue.js' } { done: true content: 'Lean yourself' } ]
|任意のフィルターで値を処理することができる
ディレクティブごとにフィルターの使用用途は異なる
haml/demo4.haml !#demo4 %ul %li{class: "{{done ? 'done' : ''}}", "v-repeat" => "todos", "v-on" => "click: done = !done"} /step① {{content | uppercase}}
coffee/demo4.coffee!new Vue el: '#demo4' data: todos: [ { done: true content: 'Learn JS' } { done: false content: 'Learn vue.js' } { done: true content: 'Lean yourself' } ]
Contentに対しuppercaseフィルターを通しバインディングを行う
haml/demo4.haml !#demo4 %ul %li{class: "{{done ? 'done' : ''}}", "v-repeat" => "todos", "v-on" => "click: done = !done"} /step② {{content | uppercase | lowercase}}
coffee/demo4.coffee!new Vue el: '#demo4' data: todos: [ { done: true content: 'Learn JS' } { done: false content: 'Learn vue.js' } { done: true content: 'Lean yourself' } ]
復数のフィルターを掛ける事ができる
Stage 4 End
Stage 5methodを使ってみよう
thinking time
haml/demo5.haml !#demo5 %p {{displayName}} %input{ "v-model" => "newName", "v-on" => "keyup:addName | key enter"}
coffee/demo5.coffee !new Vue el: '#demo5' data: nameList: [] displayName: "" newName: "" methods: addName: -> @displayName = @newName @newName = ""
methodsmethods配下にメソッドを定義する
定義されたメソッドはdirectiveから直接呼ぶことができる
haml/demo5.haml !#demo5 %p {{displayName}} %input{ "v-model" => "newName", "v-on" => "keyup:addName | key enter"}
coffee/demo5.coffee !new Vue el: '#demo5' data: nameList: [] displayName: "" newName: "" methods: addName: -> @displayName = @newName @newName = ""
methodのコンテキストはViewModel のインスタンスになる
v-onではkeyイベントをフィルターで 制御することができる
Stage 5 End
！
TODOアプリを作ってみよう
TODOアプリ仕様
実装ファイル• coffee/demo6-1.coffee • haml/demo6-1.haml
Answer• coffee/demo6-2.coffee • haml/demo6-2.haml
demo7も用意してあるので
Vueに興味が湧いた方は読んでみてください
少しだけVue.jsの雰囲気をつかめたでしょうか？
特徴
Simple• APIがsimpleで機能も少なく学習コストが低い
• ViewModelをインスタンス化するだけで使い始める事ができる
公式guideを読むのがおすすめ。一日あれば十分に読める
Fast!
• TodoMVC projectのベンチマークテスト(非公式)で最も早い
• IE8以下に対応していないため、JSの新機能の恩恵を得られる設計となっているのが大きいかもしれない
Flexible
• 他のライブラリと合わせて使用する事ができる • 他のライブラリに依存していない
Lo-Dash.jsなど慣れしたんだライブラリと組み合わせて使うことができる
next step
参考文献• http://vuejs.org/guide/ • http://todomvc.com/examples/vue/
