Contenu connexe
Similaire à One night Vue.js (20)
One night Vue.js
- 7. 2 staps
1. ブラウザで表示
• www/demo1.html
2. コードから処理を推測
• coffee/demo1.coffee
• haml/demo1.haml
- 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"}
- 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"}
- 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"}
- 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"}
- 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"}
- 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"}
- 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"}
- 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タグ内にバインディングされる
- 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"}
- 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プロパティ値を同期させる
- 31. 2 staps
1. ブラウザで表示
• www/demo2.html
2. コードから処理を推測
• coffee/demo2.coffee
• haml/demo2.haml
以後省略(全Stage同じです)
- 33. coffee/demo2.coffee
!
new Vue
el: "#demo2"
data:
user:
firstName: "Masahiro"
lastName: "kyuden"
haml/demo2.haml
!
#demo2
%p {{ 'hello' + ' ' + user.firstName + ' ' + user.lastName }}
- 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"}
- 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}}
- 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を与えると要素数分作成さ
れる。
- 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}}
- 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}}
- 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 を評価する
- 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}}
- 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}}
復数のフィルターを掛ける事ができる
- 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"}
- 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イベントをフィルターで
制御することができる
- 72. Fast
!
• TodoMVC projectのベンチマークテスト(非公式)で最も早い
• IE8以下に対応していないため、JSの新機能の恩恵を得られる設計と
なっているのが大きいかもしれない