Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
One Night Vue.js 
万葉究楽部
profile 
株式会社万葉 / @Kyuden_
Vue.js 事例紹介 
こんな感じの通知機能が20分位※で作れました。それくらい扱いやすいです。 
※デザインの時間は除く
Vue.jsさわってみましょう
環境構築 
CloneしてREADME.mdを読んでね 
https://github.com/Kyuden/one-night-vue
Stage 1 
双方向バインディングを体験
2 staps 
1. ブラウザで表示 
• www/demo1.html 
2. コードから処理を推測 
• coffee/demo1.coffee 
• haml/demo1.haml
thinking time
coffee/demo1.coffee 
! 
new Vue 
el: "#demo1" 
data: 
message: "Hello Vue" 
haml/demo1.haml 
! 
%body 
#demo1 
%p{"v-text"...
Vue VueクラスのコンストラクタでViewModelを作成 
VueModelではなくViewModel
coffee/demo1.coffee 
! 
new Vue 
el: "#demo1" 
data: 
message: "Hello Vue" 
haml/demo1.haml 
! 
%body 
  
以下の初期値をVueクラスのコン...
next
coffee/demo1.coffee 
! 
new Vue 
el: "#demo1" 
data: 
message: "Hello Vue" 
haml/demo1.haml 
! 
%body 
#demo1 
%p{"v-text"...
el 
ViewModelに紐付けるDOM要素を指定 
1つのViewModelには一つのDOMしか紐付けることが出来ないのでIDで指定
coffee/demo1.coffee 
! 
new Vue 
el: "#demo1" 
data: 
s  #demo1のDOMを指定している 
message: "Hello Vue" 
haml/demo1.haml 
! 
%bod...
coffee/demo1.coffee 
! 
new Vue 
el: "#demo2" 
s 
data: 
message: "Hello Vue" 
haml/demo1.haml 
! 
%body 
 #demo1を#demo2に変...
next
coffee/demo1.coffee 
! 
new Vue 
el: "#demo1" 
data: 
message: "Hello Vue" 
haml/demo1.haml 
! 
%body 
#demo1 
%p{"v-text"...
data 
ViewModelが保持するデータを定義 
ViewModelのプロパティにアクセスするプロキシと言っても良い
coffee/demo1.coffee 
! 
new Vue 
el: "#demo1" 
data: 
message: "Hello Vue" 
haml/demo1.haml 
! 
%body 
 data配下にmessageプロパテ...
next
coffee/demo1.coffee 
! 
new Vue 
el: "#demo1" 
data: 
message: "Hello Vue" 
haml/demo1.haml 
! 
%body 
#demo1 
%p{"v-text"...
v-text 
DOM要素の内側をViewModelのプロパティ値でバインディングする 
v-◯◯◯をDirectiveと呼ぶ。EX) v-textディレクティブ
coffe/demo1.coffee 
! 
new Vue 
el: "#demo1" 
data: 
message: "Hello Vue" 
haml/demo1.haml 
! 
%body 
#demo1 
%p{"v-text" ...
next
coffee/demo1.coffee 
! 
new Vue 
el: "#demo1" 
data: 
message: "Hello Vue" 
haml/demo1.haml 
! 
%body 
#demo1 
%p{"v-text"...
v-model 
%inputや%selectや%textareaなど編集可能な要素を使用し 
ViewとViewModle間で双方向データバインディングを行う 
データは常に同期される(同期のタイミングを指定するオプションも存在する)
coffe/demo1.coffee 
! 
new Vue 
el: "#demo1" 
data: 
message: "Hello Vue" 
haml/demo1.haml 
! 
%body 
#demo1 
%p{"v-text" ...
Stage 1 End
Stage 2 
{{ }}
2 staps 
1. ブラウザで表示 
• www/demo2.html 
2. コードから処理を推測 
• coffee/demo2.coffee 
• haml/demo2.haml 
以後省略(全Stage同じです)
thinking time
coffee/demo2.coffee 
! 
new Vue 
el: "#demo2" 
data: 
user: 
firstName: "Masahiro" 
lastName: "kyuden" 
haml/demo2.haml 
!...
{{ }} 
Mustacheはv-textとしてコンパイルされる 
Mustacheテキスト以外にHTML属性指定でも使用することができる
coffee/demo2.coffee 
! 
new Vue 
el: "#demo2" 
data: 
user: 
firstName: "Masahiro" 
lastName: "kyuden" 
haml/demo2.haml 
!...
Stage 2 End
Stage 3 
色々なDirectiveを使ってみよう
thinking time
coffee/demo3.coffee 
! 
new Vue 
el: '#demo3' 
data: 
todos: [ 
{ 
done: true 
content: 'Learn JS' 
} 
{ 
done: false 
con...
v-repeat 
配列を指定する事で子のViewModelを作成する 
(配列の要素の数だけ繰り返し実行される) 
引数がない場合はViewModelのDataを配列として扱う
coffee/demo3.coffee 
! 
new Vue 
el: '#demo3' 
data: 
todos: [ 
{ 
done: true 
content: 'Learn JS' 
} 
{ 
done: false 
con...
next
coffee/demo3.coffee 
! 
new Vue 
el: '#demo3' 
data: 
todos: [ 
{ 
done: true 
content: 'Learn JS' 
} 
{ 
done: false 
con...
{{ }} 
MustacheのBindingはHTML属性指定でも有効 
ただし%imgのsrc指定はv-attrを使用するべき。 
ブラウザ評価時にMustache形式のままHTTPリクエストを発行し404が起きるため
next
coffee/demo3.coffee 
! 
new Vue 
el: '#demo3' 
data: 
todos: [ 
{ 
done: true 
content: 'Learn JS' 
} 
{ 
done: false 
con...
v-on 
イベントリスナーを要素に登録する。関数か式を引数で評価する。 
キータイプイベントなども用意されている
coffee/demo3.coffee 
! 
new Vue 
el: '#demo3' 
data: 
todos: [ 
{ 
done: true 
content: 'Learn JS' 
} 
{ 
done: false 
con...
Stage 3 End
Stage 4 
filterを使ってみよう
thinking time
coffee/demo4.coffee 
! 
new Vue 
el: '#demo4' 
data: 
todos: [ 
{ 
done: true 
content: 'Learn JS' 
} 
{ 
done: false 
con...
| 
任意のフィルターで値を処理することができる 
ディレクティブごとにフィルターの使用用途は異なる
coffee/demo4.coffee 
! 
new Vue 
el: '#demo4' 
data: 
todos: [ 
{ 
done: true 
content: 'Learn JS' 
} 
{ 
done: false 
con...
coffee/demo4.coffee 
! 
new Vue 
el: '#demo4' 
data: 
todos: [ 
{ 
done: true 
content: 'Learn JS' 
} 
{ 
done: false 
con...
Stage 4 End
Stage 5 
methodを使ってみよう
thinking time
coffee/demo5.coffee 
! 
new Vue 
el: '#demo5' 
data: 
nameList: [] 
displayName: "" 
newName: "" 
methods: 
addName: -> 
@...
methods 
methods配下にメソッドを定義する 
定義されたメソッドはdirectiveから直接呼ぶことができる
coffee/demo5.coffee 
! 
new Vue 
el: '#demo5' 
data: 
nameList: [] 
displayName: "" 
newName: "" 
methods: 
addName: -> 
@...
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 guide 
http://vuejs.org/guide/
Give me github star 
https://github.com/Kyuden/one-night-vue
参考文献 
• http://vuejs.org/guide/ 
• http://todomvc.com/examples/vue/
Upcoming SlideShare
Loading in …5
×

One night Vue.js

3,219 views

Published on

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

Published in: Software
  • Follow the link, new dating source: ♥♥♥ http://bit.ly/2ZDZFYj ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Sex in your area is here: ❤❤❤ http://bit.ly/2ZDZFYj ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • If you want to download or read this book, copy link or url below in the New tab ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { https://urlzs.com/UABbn } .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • If you want to download or read this book, copy link or url below in the New tab ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ACCESS that WEBSITE Over for All Ebooks (Unlimited) ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... DOWNLOAD FULL EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M }
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

One night Vue.js

  1. 1. One Night Vue.js 万葉究楽部
  2. 2. profile 株式会社万葉 / @Kyuden_
  3. 3. Vue.js 事例紹介 こんな感じの通知機能が20分位※で作れました。それくらい扱いやすいです。 ※デザインの時間は除く
  4. 4. Vue.jsさわってみましょう
  5. 5. 環境構築 CloneしてREADME.mdを読んでね https://github.com/Kyuden/one-night-vue
  6. 6. Stage 1 双方向バインディングを体験
  7. 7. 2 staps 1. ブラウザで表示 • www/demo1.html 2. コードから処理を推測 • coffee/demo1.coffee • haml/demo1.haml
  8. 8. thinking time
  9. 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. 10. Vue VueクラスのコンストラクタでViewModelを作成 VueModelではなくViewModel
  11. 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. 12. next
  13. 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. 14. el ViewModelに紐付けるDOM要素を指定 1つのViewModelには一つのDOMしか紐付けることが出来ないのでIDで指定
  15. 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. 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. 17. next
  18. 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. 19. data ViewModelが保持するデータを定義 ViewModelのプロパティにアクセスするプロキシと言っても良い
  20. 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. 21. next
  22. 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. 23. v-text DOM要素の内側をViewModelのプロパティ値でバインディングする v-◯◯◯をDirectiveと呼ぶ。EX) v-textディレクティブ
  24. 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. 25. next
  26. 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. 27. v-model %inputや%selectや%textareaなど編集可能な要素を使用し ViewとViewModle間で双方向データバインディングを行う データは常に同期される(同期のタイミングを指定するオプションも存在する)
  28. 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. 29. Stage 1 End
  30. 30. Stage 2 {{ }}
  31. 31. 2 staps 1. ブラウザで表示 • www/demo2.html 2. コードから処理を推測 • coffee/demo2.coffee • haml/demo2.haml 以後省略(全Stage同じです)
  32. 32. thinking time
  33. 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. 34. {{ }} Mustacheはv-textとしてコンパイルされる Mustacheテキスト以外にHTML属性指定でも使用することができる
  35. 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. 36. Stage 2 End
  37. 37. Stage 3 色々なDirectiveを使ってみよう
  38. 38. thinking time
  39. 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. 40. v-repeat 配列を指定する事で子のViewModelを作成する (配列の要素の数だけ繰り返し実行される) 引数がない場合はViewModelのDataを配列として扱う
  41. 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. 42. next
  43. 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. 44. {{ }} MustacheのBindingはHTML属性指定でも有効 ただし%imgのsrc指定はv-attrを使用するべき。 ブラウザ評価時にMustache形式のままHTTPリクエストを発行し404が起きるため
  45. 45. next
  46. 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. 47. v-on イベントリスナーを要素に登録する。関数か式を引数で評価する。 キータイプイベントなども用意されている
  48. 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. 49. Stage 3 End
  50. 50. Stage 4 filterを使ってみよう
  51. 51. thinking time
  52. 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. 53. | 任意のフィルターで値を処理することができる ディレクティブごとにフィルターの使用用途は異なる
  54. 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. 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. 56. Stage 4 End
  57. 57. Stage 5 methodを使ってみよう
  58. 58. thinking time
  59. 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. 60. methods methods配下にメソッドを定義する 定義されたメソッドはdirectiveから直接呼ぶことができる
  61. 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. 62. Stage 5 End
  63. 63.
  64. 64. TODOアプリを作ってみよう
  65. 65. TODOアプリ仕様
  66. 66. 実装ファイル • coffee/demo6-1.coffee • haml/demo6-1.haml
  67. 67. Answer • coffee/demo6-2.coffee • haml/demo6-2.haml
  68. 68. demo7も用意してあるので Vueに興味が湧いた方は読んでみてください
  69. 69. 少しだけVue.jsの雰囲気をつかめたでしょうか?
  70. 70. 特徴
  71. 71. Simple • APIがsimpleで機能も少なく学習コストが低い • ViewModelをインスタンス化するだけで使い始める事ができる 公式guideを読むのがおすすめ。一日あれば十分に読める
  72. 72. Fast ! • TodoMVC projectのベンチマークテスト(非公式)で最も早い • IE8以下に対応していないため、JSの新機能の恩恵を得られる設計と なっているのが大きいかもしれない
  73. 73. Flexible • 他のライブラリと合わせて使用する事ができる • 他のライブラリに依存していない Lo-Dash.jsなど慣れしたんだライブラリと組み合わせて使うことができる
  74. 74. next step
  75. 75. Read guide http://vuejs.org/guide/
  76. 76. Give me github star https://github.com/Kyuden/one-night-vue
  77. 77. 参考文献 • http://vuejs.org/guide/ • http://todomvc.com/examples/vue/

×