YOU ARE DOWNLOADING DOCUMENT

Please tick the box to continue:

Transcript
Page 1: One night Vue.js

One Night Vue.js 万葉究楽部

Page 2: One night Vue.js

profile

株式会社万葉 / @Kyuden_

Page 3: One night Vue.js

Vue.js 事例紹介

こんな感じの通知機能が20分位※で作れました。それくらい扱いやすいです。

※デザインの時間は除く

Page 4: One night Vue.js

Vue.jsさわってみましょう

Page 5: One night Vue.js

https://github.com/Kyuden/one-night-vue

環境構築

CloneしてREADME.mdを読んでね

Page 6: One night Vue.js

Stage 1双方向バインディングを体験

Page 7: One night Vue.js

2 staps1. ブラウザで表示

• www/demo1.html

2. コードから処理を推測 • coffee/demo1.coffee • haml/demo1.haml

Page 8: One night Vue.js

thinking time

Page 9: One night Vue.js

haml/demo1.haml ! %body #demo1 %p{"v-text" => "message"} %input{"v-model" => "message"}

coffee/demo1.coffee!new Vue el: "#demo1" data: message: "Hello Vue"

Page 10: One night Vue.js

VueVueクラスのコンストラクタでViewModelを作成

VueModelではなくViewModel

Page 11: One night Vue.js

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"

Page 12: One night Vue.js

next

Page 13: One night Vue.js

haml/demo1.haml ! %body #demo1 %p{"v-text" => "message"} %input{"v-model" => "message"}

coffee/demo1.coffee!new Vue el: "#demo1" data: message: "Hello Vue"

Page 14: One night Vue.js

elViewModelに紐付けるDOM要素を指定

1つのViewModelには一つのDOMしか紐付けることが出来ないのでIDで指定

Page 15: One night Vue.js

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を紐づく

Page 16: One night Vue.js

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の管理外となるので動作しない

Page 17: One night Vue.js

next

Page 18: One night Vue.js

haml/demo1.haml ! %body #demo1 %p{"v-text" => "message"} %input{"v-model" => "message"}

coffee/demo1.coffee!new Vue el: "#demo1" data: message: "Hello Vue"

Page 19: One night Vue.js

dataViewModelが保持するデータを定義

ViewModelのプロパティにアクセスするプロキシと言っても良い

Page 20: One night Vue.js

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’’ を定義している

Page 21: One night Vue.js

next

Page 22: One night Vue.js

haml/demo1.haml ! %body #demo1 %p{"v-text" => "message"} %input{"v-model" => "message"}

coffee/demo1.coffee!new Vue el: "#demo1" data: message: "Hello Vue"

Page 23: One night Vue.js

v-textDOM要素の内側をViewModelのプロパティ値でバインディングする

v-◯◯◯をDirectiveと呼ぶ。EX) v-textディレクティブ

Page 24: One night Vue.js

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タグ内にバインディングされる

Page 25: One night Vue.js

next

Page 26: One night Vue.js

haml/demo1.haml ! %body #demo1 %p{"v-text" => "message"} %input{"v-model" => "message"}

coffee/demo1.coffee!new Vue el: "#demo1" data: message: "Hello Vue"

Page 27: One night Vue.js

v-model%inputや%selectや%textareaなど編集可能な要素を使用し

ViewとViewModle間で双方向データバインディングを行う

データは常に同期される(同期のタイミングを指定するオプションも存在する)

Page 28: One night Vue.js

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プロパティ値が更新される

Page 29: One night Vue.js

Stage 1 End

Page 30: One night Vue.js

Stage 2{{ }}

Page 31: One night Vue.js

2 staps1. ブラウザで表示

• www/demo2.html

2. コードから処理を推測 • coffee/demo2.coffee • haml/demo2.haml

以後省略(全Stage同じです)

Page 32: One night Vue.js

thinking time

Page 33: One night Vue.js

haml/demo2.haml !#demo2 %p {{ 'hello' + ' ' + user.firstName + ' ' + user.lastName }}

coffee/demo2.coffee!new Vue el: "#demo2" data: user: firstName: "Masahiro" lastName: "kyuden"

Page 34: One night Vue.js

{{ }}Mustacheはv-textとしてコンパイルされる

Mustacheテキスト以外にHTML属性指定でも使用することができる

Page 35: One night Vue.js

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"}

Page 36: One night Vue.js

Stage 2 End

Page 37: One night Vue.js

Stage 3色々なDirectiveを使ってみよう

Page 38: One night Vue.js

thinking time

Page 39: One night Vue.js

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' } ]

Page 40: One night Vue.js

v-repeat配列を指定する事で子のViewModelを作成する

(配列の要素の数だけ繰り返し実行される)

引数がない場合はViewModelのDataを配列として扱う

Page 41: One night Vue.js

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を与えると要素数分作成される。

Page 42: One night Vue.js

next

Page 43: One night Vue.js

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

Page 44: One night Vue.js

{{ }}MustacheのBindingはHTML属性指定でも有効

ただし%imgのsrc指定はv-attrを使用するべき。

ブラウザ評価時にMustache形式のままHTTPリクエストを発行し404が起きるため

Page 45: One night Vue.js

next

Page 46: One night Vue.js

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' } ]

Page 47: One night Vue.js

v-onイベントリスナーを要素に登録する。関数か式を引数で評価する。

キータイプイベントなども用意されている

Page 48: One night Vue.js

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

Page 49: One night Vue.js

Stage 3 End

Page 50: One night Vue.js

Stage 4filterを使ってみよう

Page 51: One night Vue.js

thinking time

Page 52: One night Vue.js

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' } ]

Page 53: One night Vue.js

|任意のフィルターで値を処理することができる

ディレクティブごとにフィルターの使用用途は異なる

Page 54: One night Vue.js

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フィルターを通しバインディングを行う

Page 55: One night Vue.js

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' } ]

 復数のフィルターを掛ける事ができる

Page 56: One night Vue.js

Stage 4 End

Page 57: One night Vue.js

Stage 5methodを使ってみよう

Page 58: One night Vue.js

thinking time

Page 59: One night Vue.js

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 = ""

Page 60: One night Vue.js

methodsmethods配下にメソッドを定義する

定義されたメソッドはdirectiveから直接呼ぶことができる

Page 61: One night Vue.js

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イベントをフィルターで 制御することができる

Page 62: One night Vue.js

Stage 5 End

Page 63: One night Vue.js

Page 64: One night Vue.js

TODOアプリを作ってみよう

Page 65: One night Vue.js

TODOアプリ仕様

Page 66: One night Vue.js

実装ファイル• coffee/demo6-1.coffee • haml/demo6-1.haml

Page 67: One night Vue.js

Answer• coffee/demo6-2.coffee • haml/demo6-2.haml

Page 68: One night Vue.js

demo7も用意してあるので

Vueに興味が湧いた方は読んでみてください

Page 69: One night Vue.js

少しだけVue.jsの雰囲気をつかめたでしょうか?

Page 70: One night Vue.js

特徴

Page 71: One night Vue.js

Simple• APIがsimpleで機能も少なく学習コストが低い

• ViewModelをインスタンス化するだけで使い始める事ができる

公式guideを読むのがおすすめ。一日あれば十分に読める

Page 72: One night Vue.js

Fast!

• TodoMVC projectのベンチマークテスト(非公式)で最も早い

• IE8以下に対応していないため、JSの新機能の恩恵を得られる設計となっているのが大きいかもしれない

Page 73: One night Vue.js

Flexible

• 他のライブラリと合わせて使用する事ができる • 他のライブラリに依存していない

Lo-Dash.jsなど慣れしたんだライブラリと組み合わせて使うことができる

Page 74: One night Vue.js

next step

Page 75: One night Vue.js

Read guidehttp://vuejs.org/guide/

Page 76: One night Vue.js

https://github.com/Kyuden/one-night-vue

Give me github star

Page 77: One night Vue.js

参考文献• http://vuejs.org/guide/ • http://todomvc.com/examples/vue/


Related Documents