Vue.js tutorial for biginer https://github.com/Kyuden/one-night-vue

1. One Night Vue.js
万葉究楽部

2. profile
株式会社万葉 / @Kyuden_

3. Vue.js 事例紹介
こんな感じの通知機能が20分位※で作れました。それくらい扱いやすいです。
※デザインの時間は除く

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

5. 環境構築
CloneしてREADME.mdを読んでね
https://github.com/Kyuden/one-night-vue

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

7. 2 staps
1. ブラウザで表示
• www/demo1.html
2. コードから処理を推測
• coffee/demo1.coffee
• haml/demo1.haml

8. thinking time

9. coffee/demo1.coffee
!
new Vue
el: "#demo1"
data:
message: "Hello Vue"
haml/demo1.haml
!
%body
#demo1
%p{"v-text" => "message"}
%input{"v-model" => "message"}

10. Vue VueクラスのコンストラクタでViewModelを作成
VueModelではなくViewModel

11. coffee/demo1.coffee
!
new Vue
el: "#demo1"
data:
message: "Hello Vue"
haml/demo1.haml
!
%body
以下の初期値をVueクラスのコンストラクタに渡し
ViewModelを作成している
el: "#demo1"
data:
message: "Hello Vue"
#demo1
%p{"v-text" => "message"}
%input{"v-model" => "message"}

12. next

13. coffee/demo1.coffee
!
new Vue
el: "#demo1"
data:
message: "Hello Vue"
haml/demo1.haml
!
%body
#demo1
%p{"v-text" => "message"}
%input{"v-model" => "message"}

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

15. coffee/demo1.coffee
!
new Vue
el: "#demo1"
data:
s #demo1のDOMを指定している
message: "Hello Vue"
haml/demo1.haml
!
%body
#demo1
%p{"v-text" => "message"}
%input{"v-model" => "message"}
#demo1のDOMがViewModelを紐づく

16. coffee/demo1.coffee
!
new Vue
el: "#demo2"
s
data:
message: "Hello Vue"
haml/demo1.haml
!
%body
#demo1を#demo2に変更すると
ViewModelの管理外となるので動作しない
#demo1
%p{"v-text" => "message"}
%input{"v-model" => "message"}

17. next

18. coffee/demo1.coffee
!
new Vue
el: "#demo1"
data:
message: "Hello Vue"
haml/demo1.haml
!
%body
#demo1
%p{"v-text" => "message"}
%input{"v-model" => "message"}

19. data
ViewModelが保持するデータを定義
ViewModelのプロパティにアクセスするプロキシと言っても良い

20. coffee/demo1.coffee
!
new Vue
el: "#demo1"
data:
message: "Hello Vue"
haml/demo1.haml
!
%body
data配下にmessageプロパティとして
初期値 ‘’Hello Vue’’ を定義している
#demo1
%p{"v-text" => "message"}
%input{"v-model" => "message"}

21. next

22. coffee/demo1.coffee
!
new Vue
el: "#demo1"
data:
message: "Hello Vue"
haml/demo1.haml
!
%body
#demo1
%p{"v-text" => "message"}
%input{"v-model" => "message"}

23. v-text
DOM要素の内側をViewModelのプロパティ値でバインディングする
v-◯◯◯をDirectiveと呼ぶ。EX) v-textディレクティブ

24. coffe/demo1.coffee
!
new Vue
el: "#demo1"
data:
message: "Hello Vue"
haml/demo1.haml
!
%body
#demo1
%p{"v-text" => "message"}
%input{"v-model" => "message"}
messageプロパティ値"Hello Vue”が
%pタグ内にバインディングされる

25. next

26. coffee/demo1.coffee
!
new Vue
el: "#demo1"
data:
message: "Hello Vue"
haml/demo1.haml
!
%body
#demo1
%p{"v-text" => "message"}
%input{"v-model" => "message"}

27. v-model
%inputや%selectや%textareaなど編集可能な要素を使用し
ViewとViewModle間で双方向データバインディングを行う
データは常に同期される(同期のタイミングを指定するオプションも存在する)

28. coffe/demo1.coffee
!
new Vue
el: "#demo1"
data:
message: "Hello Vue"
haml/demo1.haml
!
%body
#demo1
%p{"v-text" => "message"}
%input{"v-model" => "message"}
%input要素への入力値に応じて
messageプロパティ値が更新される
%input要素への入力値に応じて
messageプロパティ値を同期させる

29. Stage 1 End

30. Stage 2
{{ }}

31. 2 staps
1. ブラウザで表示
• www/demo2.html
2. コードから処理を推測
• coffee/demo2.coffee
• haml/demo2.haml
以後省略(全Stage同じです)

32. thinking time

33. coffee/demo2.coffee
!
new Vue
el: "#demo2"
data:
user:
firstName: "Masahiro"
lastName: "kyuden"
haml/demo2.haml
!
#demo2
%p {{ 'hello' + ' ' + user.firstName + ' ' + user.lastName }}

34. {{ }}
Mustacheはv-textとしてコンパイルされる
Mustacheテキスト以外にHTML属性指定でも使用することができる

35. coffee/demo2.coffee
!
new Vue
el: "#demo2"
data:
user:
firstName: "Masahiro"
lastName: "kyuden"
haml/demo2.haml
!
#demo2
%p {{ 'hello' + ' ' + user.firstName + ' ' + user.lastName }}
%p{"v-text" => "'hello ' + user.firstName + ' ' + user.lastName"}

36. Stage 2 End

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

38. thinking time

39. 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'
}
]
haml/demo3.haml
!
#demo3
%ul
/step①
%li{"v-repeat" => "todos"}
{{content}}

40. v-repeat
配列を指定する事で子のViewModelを作成する
(配列の要素の数だけ繰り返し実行される)
引数がない場合はViewModelのDataを配列として扱う

41. 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'
}
]
haml/demo3.haml
!
#demo3
%ul
/step①
%li{"v-repeat" => "todos"}
{{content}}
配列であるtodosを与えると要素数分作成さ
れる。

42. next

43. 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'
}
]
haml/demo3.haml
!
#demo3
%ul
sass/style.sass
!
li.done
text-decoration: line-through
/step②
%li{class: "{{done ? 'done' : ''}}", "v-repeat" => "todos"}
{{content}}

44. {{ }}
MustacheのBindingはHTML属性指定でも有効
ただし%imgのsrc指定はv-attrを使用するべき。
ブラウザ評価時にMustache形式のままHTTPリクエストを発行し404が起きるため

45. next

46. 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'
}
]
haml/demo3.haml
!
#demo3
%ul
/step③
%li{class: "{{done ? 'done' : ''}}", "v-repeat" => "todos", "v-on" => "click: done = !done"}
{{content}}

47. v-on
イベントリスナーを要素に登録する。関数か式を引数で評価する。
キータイプイベントなども用意されている

48. 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'
}
]
haml/demo3.haml
!
#demo3
%ul
/step③
%li{class: "{{done ? 'done' : ''}}", "v-repeat" => "todos", "v-on" => "click: done = !done"}
{{content}}
clickされた時に do ne = !d one を評価する

49. Stage 3 End

50. Stage 4
filterを使ってみよう

51. thinking time

52. 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}}

53. |
任意のフィルターで値を処理することができる
ディレクティブごとにフィルターの使用用途は異なる

54. 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}}
Contentに対しuppercaseフィルターを通し
バインディングを行う

55. 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 | lowercase}}
復数のフィルターを掛ける事ができる

56. Stage 4 End

57. Stage 5
methodを使ってみよう

58. thinking time

59. coffee/demo5.coffee
!
new Vue
el: '#demo5'
data:
nameList: []
displayName: ""
newName: ""
methods:
addName: ->
@displayName = @newName
@newName = ""
haml/demo5.haml
!
#demo5
%p {{displayName}}
%input{ "v-model" => "newName", "v-on" => "keyup:addName | key enter"}

60. methods
methods配下にメソッドを定義する
定義されたメソッドはdirectiveから直接呼ぶことができる

61. coffee/demo5.coffee
!
new Vue
el: '#demo5'
data:
nameList: []
displayName: ""
newName: ""
methods:
addName: ->
@displayName = @newName
@newName = ""
methodのコンテキストはViewModel
のインスタンスになる
haml/demo5.haml
!
#demo5
%p {{displayName}}
%input{ "v-model" => "newName", "v-on" => "keyup:addName | key enter"}
v-onではkeyイベントをフィルターで
制御することができる

62. Stage 5 End

63. ！

64. TODOアプリを作ってみよう

65. TODOアプリ仕様

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

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

68. demo7も用意してあるので
Vueに興味が湧いた方は読んでみてください

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

70. 特徴

71. Simple
• APIがsimpleで機能も少なく学習コストが低い
• ViewModelをインスタンス化するだけで使い始める事ができる
公式guideを読むのがおすすめ。一日あれば十分に読める

72. Fast
!
• TodoMVC projectのベンチマークテスト(非公式)で最も早い
• IE8以下に対応していないため、JSの新機能の恩恵を得られる設計と
なっているのが大きいかもしれない

73. Flexible
• 他のライブラリと合わせて使用する事ができる
• 他のライブラリに依存していない
Lo-Dash.jsなど慣れしたんだライブラリと組み合わせて使うことができる

74. next step

75. Read guide
http://vuejs.org/guide/

76. Give me github star
https://github.com/Kyuden/one-night-vue

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