One night Vue.js

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

Read guidehttp://vuejs.org/guide/

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

Give me github star

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