Submit Search
Upload
One night Vue.js
•
10 likes
•
3,446 views
Masahiro Kyuden
Follow
Vue.js tutorial for biginer https://github.com/Kyuden/one-night-vue
Read less
Read more
Software
Report
Share
Report
Share
1 of 77
Download now
Download to read offline
Recommended
Progressive Framework Vue.js 2.0
Progressive Framework Vue.js 2.0
Toshiro Shimizu
Vue.jsでさくっとMVVM
Vue.jsでさくっとMVVM
Satoshi Anai
Vue.js入門
Vue.js入門
Takuya Sato
Vue.js 2.0を試してみた
Vue.js 2.0を試してみた
Toshiro Shimizu
Start React with Browserify
Start React with Browserify
Muyuu Fujita
はじめてのVue.js
はじめてのVue.js
kamiyam .
チュートリアルではじめるVue.js
チュートリアルではじめるVue.js
小川 昌吾
翻訳から始めるVue.js 入門
翻訳から始めるVue.js 入門
Makoto Chiba
Recommended
Progressive Framework Vue.js 2.0
Progressive Framework Vue.js 2.0
Toshiro Shimizu
Vue.jsでさくっとMVVM
Vue.jsでさくっとMVVM
Satoshi Anai
Vue.js入門
Vue.js入門
Takuya Sato
Vue.js 2.0を試してみた
Vue.js 2.0を試してみた
Toshiro Shimizu
Start React with Browserify
Start React with Browserify
Muyuu Fujita
はじめてのVue.js
はじめてのVue.js
kamiyam .
チュートリアルではじめるVue.js
チュートリアルではじめるVue.js
小川 昌吾
翻訳から始めるVue.js 入門
翻訳から始めるVue.js 入門
Makoto Chiba
Vue Router + Vuex
Vue Router + Vuex
Kei Yagi
プロダクトに 1 から Vue.js を導入した話
プロダクトに 1 から Vue.js を導入した話
Shohei Okada
Flask勉強会その1
Flask勉強会その1
Masato Kawamura
AngularJSでの非同期処理の話
AngularJSでの非同期処理の話
Yosuke Onoue
はじめてのVue.js
はじめてのVue.js
Kei Yagi
PHP 2大 web フレームワークの徹底比較!
PHP 2大 web フレームワークの徹底比較!
Shohei Okada
Async Enhancement
Async Enhancement
kamiyam .
Vue.js 基礎 + Vue CLI の使い方
Vue.js 基礎 + Vue CLI の使い方
Kei Yagi
let UIWebView as WKWebView
let UIWebView as WKWebView
Taketo Sano
The master plan ofscaling a web application
The master plan ofscaling a web application
Yusuke Wada
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
Yatabe Terumasa
React入門-JSONを取得して表示する
React入門-JSONを取得して表示する
regret raym
Pyramid入門
Pyramid入門
Atsushi Odagiri
Using SockJS(Websocket) with Sencha Ext JS
Using SockJS(Websocket) with Sencha Ext JS
Kazuhiro Kotsutsumi
Nuxt なしで Vue App 作る時に乗り越えるべき5つの壁
Nuxt なしで Vue App 作る時に乗り越えるべき5つの壁
Yutaro Miyazaki
React.jsでクライアントサイドなWebアプリ入門
React.jsでクライアントサイドなWebアプリ入門
spring_raining
WKWebViewとUIWebView
WKWebViewとUIWebView
Yuki Hirai
SpringOne 2GX 2014 参加報告 & Spring 4.1について #jsug
SpringOne 2GX 2014 参加報告 & Spring 4.1について #jsug
Toshiaki Maki
サーバサイドで動的にhtml生成していたりjQueryをガッツし使っている既存プロジェクトにAngularJSを部分的につっこんでみた @jscafe21
サーバサイドで動的にhtml生成していたりjQueryをガッツし使っている既存プロジェクトにAngularJSを部分的につっこんでみた @jscafe21
佐藤 俊太郎
Hokuriku.NET ASP.NET MVC入門 「実践」 20120825
Hokuriku.NET ASP.NET MVC入門 「実践」 20120825
miso- soup3
20150207コデアルエンジニア学生向けハッカソン就活イベント発表資料
20150207コデアルエンジニア学生向けハッカソン就活イベント発表資料
codeal
JavaScriptでWebDriverのテストコードを書きましょ
JavaScriptでWebDriverのテストコードを書きましょ
Kohki Nakashima
More Related Content
What's hot
Vue Router + Vuex
Vue Router + Vuex
Kei Yagi
プロダクトに 1 から Vue.js を導入した話
プロダクトに 1 から Vue.js を導入した話
Shohei Okada
Flask勉強会その1
Flask勉強会その1
Masato Kawamura
AngularJSでの非同期処理の話
AngularJSでの非同期処理の話
Yosuke Onoue
はじめてのVue.js
はじめてのVue.js
Kei Yagi
PHP 2大 web フレームワークの徹底比較!
PHP 2大 web フレームワークの徹底比較!
Shohei Okada
Async Enhancement
Async Enhancement
kamiyam .
Vue.js 基礎 + Vue CLI の使い方
Vue.js 基礎 + Vue CLI の使い方
Kei Yagi
let UIWebView as WKWebView
let UIWebView as WKWebView
Taketo Sano
The master plan ofscaling a web application
The master plan ofscaling a web application
Yusuke Wada
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
Yatabe Terumasa
React入門-JSONを取得して表示する
React入門-JSONを取得して表示する
regret raym
Pyramid入門
Pyramid入門
Atsushi Odagiri
Using SockJS(Websocket) with Sencha Ext JS
Using SockJS(Websocket) with Sencha Ext JS
Kazuhiro Kotsutsumi
Nuxt なしで Vue App 作る時に乗り越えるべき5つの壁
Nuxt なしで Vue App 作る時に乗り越えるべき5つの壁
Yutaro Miyazaki
React.jsでクライアントサイドなWebアプリ入門
React.jsでクライアントサイドなWebアプリ入門
spring_raining
WKWebViewとUIWebView
WKWebViewとUIWebView
Yuki Hirai
SpringOne 2GX 2014 参加報告 & Spring 4.1について #jsug
SpringOne 2GX 2014 参加報告 & Spring 4.1について #jsug
Toshiaki Maki
サーバサイドで動的にhtml生成していたりjQueryをガッツし使っている既存プロジェクトにAngularJSを部分的につっこんでみた @jscafe21
サーバサイドで動的にhtml生成していたりjQueryをガッツし使っている既存プロジェクトにAngularJSを部分的につっこんでみた @jscafe21
佐藤 俊太郎
Hokuriku.NET ASP.NET MVC入門 「実践」 20120825
Hokuriku.NET ASP.NET MVC入門 「実践」 20120825
miso- soup3
What's hot
(20)
Vue Router + Vuex
Vue Router + Vuex
プロダクトに 1 から Vue.js を導入した話
プロダクトに 1 から Vue.js を導入した話
Flask勉強会その1
Flask勉強会その1
AngularJSでの非同期処理の話
AngularJSでの非同期処理の話
はじめてのVue.js
はじめてのVue.js
PHP 2大 web フレームワークの徹底比較!
PHP 2大 web フレームワークの徹底比較!
Async Enhancement
Async Enhancement
Vue.js 基礎 + Vue CLI の使い方
Vue.js 基礎 + Vue CLI の使い方
let UIWebView as WKWebView
let UIWebView as WKWebView
The master plan ofscaling a web application
The master plan ofscaling a web application
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
React入門-JSONを取得して表示する
React入門-JSONを取得して表示する
Pyramid入門
Pyramid入門
Using SockJS(Websocket) with Sencha Ext JS
Using SockJS(Websocket) with Sencha Ext JS
Nuxt なしで Vue App 作る時に乗り越えるべき5つの壁
Nuxt なしで Vue App 作る時に乗り越えるべき5つの壁
React.jsでクライアントサイドなWebアプリ入門
React.jsでクライアントサイドなWebアプリ入門
WKWebViewとUIWebView
WKWebViewとUIWebView
SpringOne 2GX 2014 参加報告 & Spring 4.1について #jsug
SpringOne 2GX 2014 参加報告 & Spring 4.1について #jsug
サーバサイドで動的にhtml生成していたりjQueryをガッツし使っている既存プロジェクトにAngularJSを部分的につっこんでみた @jscafe21
サーバサイドで動的にhtml生成していたりjQueryをガッツし使っている既存プロジェクトにAngularJSを部分的につっこんでみた @jscafe21
Hokuriku.NET ASP.NET MVC入門 「実践」 20120825
Hokuriku.NET ASP.NET MVC入門 「実践」 20120825
Similar to One night Vue.js
20150207コデアルエンジニア学生向けハッカソン就活イベント発表資料
20150207コデアルエンジニア学生向けハッカソン就活イベント発表資料
codeal
JavaScriptでWebDriverのテストコードを書きましょ
JavaScriptでWebDriverのテストコードを書きましょ
Kohki Nakashima
EWD 3トレーニングコース#5 ewd-xpressアプリ開発第1ステップ
EWD 3トレーニングコース#5 ewd-xpressアプリ開発第1ステップ
Kiyoshi Sawada
AWS + Windows(C#)で構築する.NET最先端技術によるハイパフォーマンスウェブアプリケーション開発実践
AWS + Windows(C#)で構築する.NET最先端技術によるハイパフォーマンスウェブアプリケーション開発実践
Yoshifumi Kawai
13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs
Takayoshi Tanaka
20091030cakephphandson 01
20091030cakephphandson 01
Yusuke Ando
EWD 3トレーニングコース#31 ewd-xpressでWebおよびRESTサービスを作る
EWD 3トレーニングコース#31 ewd-xpressでWebおよびRESTサービスを作る
Kiyoshi Sawada
EWD 3トレーニングコース#31 ewd-xpressでWebおよびRESTサービスを作る
EWD 3トレーニングコース#31 ewd-xpressでWebおよびRESTサービスを作る
Kiyoshi Sawada
EWD 3トレーニングコース#5 ewd-xpressアプリ開発第1ステップ
EWD 3トレーニングコース#5 ewd-xpressアプリ開発第1ステップ
Kiyoshi Sawada
Ruby on Rails Tutorial Chapter8-10
Ruby on Rails Tutorial Chapter8-10
Sea Mountain
Docker Compose入門~今日から始めるComposeの初歩からswarm mode対応まで
Docker Compose入門~今日から始めるComposeの初歩からswarm mode対応まで
Masahito Zembutsu
Rails and twitter #twtr_hack
Rails and twitter #twtr_hack
i7a
SpringMVCとmixer2で作るWebアプリのキホン 2013-01-24 Spring勉強会 #jsug
SpringMVCとmixer2で作るWebアプリのキホン 2013-01-24 Spring勉強会 #jsug
Y Watanabe
WordPressで制御するこれからのIoT
WordPressで制御するこれからのIoT
Yuriko IKEDA
20200304 vuejs
20200304 vuejs
yamamotomsc
Django boodoo
Django boodoo
泰 増田
Ma_gician (世界中のフロントエンダーの残業時間を減らす、新しいフロントエンドフレームワーク)<詳細版>
Ma_gician (世界中のフロントエンダーの残業時間を減らす、新しいフロントエンドフレームワーク)<詳細版>
Eucen Stew
Ruby on Rails Tutorial
Ruby on Rails Tutorial
Ken Iiboshi
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
Yasuhito Yabe
バッテリー監視のためにバックグラウンドタスクについて調べたらなくなってたから泣く泣くタイマーApiを使ってみた話
バッテリー監視のためにバックグラウンドタスクについて調べたらなくなってたから泣く泣くタイマーApiを使ってみた話
Masami Yabushita
Similar to One night Vue.js
(20)
20150207コデアルエンジニア学生向けハッカソン就活イベント発表資料
20150207コデアルエンジニア学生向けハッカソン就活イベント発表資料
JavaScriptでWebDriverのテストコードを書きましょ
JavaScriptでWebDriverのテストコードを書きましょ
EWD 3トレーニングコース#5 ewd-xpressアプリ開発第1ステップ
EWD 3トレーニングコース#5 ewd-xpressアプリ開発第1ステップ
AWS + Windows(C#)で構築する.NET最先端技術によるハイパフォーマンスウェブアプリケーション開発実践
AWS + Windows(C#)で構築する.NET最先端技術によるハイパフォーマンスウェブアプリケーション開発実践
13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs
20091030cakephphandson 01
20091030cakephphandson 01
EWD 3トレーニングコース#31 ewd-xpressでWebおよびRESTサービスを作る
EWD 3トレーニングコース#31 ewd-xpressでWebおよびRESTサービスを作る
EWD 3トレーニングコース#31 ewd-xpressでWebおよびRESTサービスを作る
EWD 3トレーニングコース#31 ewd-xpressでWebおよびRESTサービスを作る
EWD 3トレーニングコース#5 ewd-xpressアプリ開発第1ステップ
EWD 3トレーニングコース#5 ewd-xpressアプリ開発第1ステップ
Ruby on Rails Tutorial Chapter8-10
Ruby on Rails Tutorial Chapter8-10
Docker Compose入門~今日から始めるComposeの初歩からswarm mode対応まで
Docker Compose入門~今日から始めるComposeの初歩からswarm mode対応まで
Rails and twitter #twtr_hack
Rails and twitter #twtr_hack
SpringMVCとmixer2で作るWebアプリのキホン 2013-01-24 Spring勉強会 #jsug
SpringMVCとmixer2で作るWebアプリのキホン 2013-01-24 Spring勉強会 #jsug
WordPressで制御するこれからのIoT
WordPressで制御するこれからのIoT
20200304 vuejs
20200304 vuejs
Django boodoo
Django boodoo
Ma_gician (世界中のフロントエンダーの残業時間を減らす、新しいフロントエンドフレームワーク)<詳細版>
Ma_gician (世界中のフロントエンダーの残業時間を減らす、新しいフロントエンドフレームワーク)<詳細版>
Ruby on Rails Tutorial
Ruby on Rails Tutorial
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
バッテリー監視のためにバックグラウンドタスクについて調べたらなくなってたから泣く泣くタイマーApiを使ってみた話
バッテリー監視のためにバックグラウンドタスクについて調べたらなくなってたから泣く泣くタイマーApiを使ってみた話
One night Vue.js
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/
Download now