Submit Search
Upload
Vue.js入門
•
35 likes
•
17,934 views
Takuya Sato
Follow
Vue.jsについての紹介と、1.0の変更点について
Read less
Read more
Engineering
Report
Share
Report
Share
1 of 41
Download now
Download to read offline
Recommended
クライアントサイドMVVMアーキテクチャとVue.jsをまとめたよ
クライアントサイドMVVMアーキテクチャとVue.jsをまとめたよ
Seki Yousuke
チュートリアルではじめるVue.js
チュートリアルではじめるVue.js
小川 昌吾
Vue.jsでさくっとMVVM
Vue.jsでさくっとMVVM
Satoshi Anai
はじめてのVue.js
はじめてのVue.js
kamiyam .
ライオンでも分かるVuejs
ライオンでも分かるVuejs
lion-man
One night Vue.js
One night Vue.js
Masahiro Kyuden
KnockoutJS勉強会 プロジェクトにmvvmを適用する狙い
KnockoutJS勉強会 プロジェクトにmvvmを適用する狙い
Toshihiro Kawachi
Vue.js 2.0を試してみた
Vue.js 2.0を試してみた
Toshiro Shimizu
Recommended
クライアントサイドMVVMアーキテクチャとVue.jsをまとめたよ
クライアントサイドMVVMアーキテクチャとVue.jsをまとめたよ
Seki Yousuke
チュートリアルではじめるVue.js
チュートリアルではじめるVue.js
小川 昌吾
Vue.jsでさくっとMVVM
Vue.jsでさくっとMVVM
Satoshi Anai
はじめてのVue.js
はじめてのVue.js
kamiyam .
ライオンでも分かるVuejs
ライオンでも分かるVuejs
lion-man
One night Vue.js
One night Vue.js
Masahiro Kyuden
KnockoutJS勉強会 プロジェクトにmvvmを適用する狙い
KnockoutJS勉強会 プロジェクトにmvvmを適用する狙い
Toshihiro Kawachi
Vue.js 2.0を試してみた
Vue.js 2.0を試してみた
Toshiro Shimizu
DevLOVE Kansai KnockoutJS
DevLOVE Kansai KnockoutJS
Go Tanaka
プロダクトに 1 から Vue.js を導入した話
プロダクトに 1 から Vue.js を導入した話
Shohei Okada
Progressive Framework Vue.js 2.0
Progressive Framework Vue.js 2.0
Toshiro Shimizu
React.js + Flux
React.js + Flux
dsuke Takaoka
AngularJSでの非同期処理の話
AngularJSでの非同期処理の話
Yosuke Onoue
AngularJSの高速化
AngularJSの高速化
Kon Yuichi
Laravel Blade×vue.js 混在させる場合の注意点
Laravel Blade×vue.js 混在させる場合の注意点
誠一郎 栗原
20140517 knockoutjs hands-on
20140517 knockoutjs hands-on
Seiji Noro
Brush up your Coding! 2013 winter
Brush up your Coding! 2013 winter
Shogo Sensui
エンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJS
Ayumi Goto
Knockout.js を利用したインタラクティブ web アプリケーション開発
Knockout.js を利用したインタラクティブ web アプリケーション開発
Daizen Ikehara
Angular js はまりどころ
Angular js はまりどころ
Ayumi Goto
Start React with Browserify
Start React with Browserify
Muyuu Fujita
Nuxt なしで Vue App 作る時に乗り越えるべき5つの壁
Nuxt なしで Vue App 作る時に乗り越えるべき5つの壁
Yutaro Miyazaki
はじめてのVue.js
はじめてのVue.js
Kei Yagi
RailsでReact.jsを動かしてみた話
RailsでReact.jsを動かしてみた話
yoshioka_cb
ASP.NET MVC と jQuery で実践する標準志向 Web 開発
ASP.NET MVC と jQuery で実践する標準志向 Web 開発
Akira Inoue
初めてのvue.js(2.x系)
初めてのvue.js(2.x系)
健人 井関
作って分かるKnockoutJS@ALM11月
作って分かるKnockoutJS@ALM11月
Takuya Ueda
React を導入したフロントエンド開発
React を導入したフロントエンド開発
daisuke-a-matsui
ftechmeetup_データバインディングはどう実装されているのか
ftechmeetup_データバインディングはどう実装されているのか
kanatsum
AngularJSで業務システムUI部品化
AngularJSで業務システムUI部品化
Toshio Ehara
More Related Content
What's hot
DevLOVE Kansai KnockoutJS
DevLOVE Kansai KnockoutJS
Go Tanaka
プロダクトに 1 から Vue.js を導入した話
プロダクトに 1 から Vue.js を導入した話
Shohei Okada
Progressive Framework Vue.js 2.0
Progressive Framework Vue.js 2.0
Toshiro Shimizu
React.js + Flux
React.js + Flux
dsuke Takaoka
AngularJSでの非同期処理の話
AngularJSでの非同期処理の話
Yosuke Onoue
AngularJSの高速化
AngularJSの高速化
Kon Yuichi
Laravel Blade×vue.js 混在させる場合の注意点
Laravel Blade×vue.js 混在させる場合の注意点
誠一郎 栗原
20140517 knockoutjs hands-on
20140517 knockoutjs hands-on
Seiji Noro
Brush up your Coding! 2013 winter
Brush up your Coding! 2013 winter
Shogo Sensui
エンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJS
Ayumi Goto
Knockout.js を利用したインタラクティブ web アプリケーション開発
Knockout.js を利用したインタラクティブ web アプリケーション開発
Daizen Ikehara
Angular js はまりどころ
Angular js はまりどころ
Ayumi Goto
Start React with Browserify
Start React with Browserify
Muyuu Fujita
Nuxt なしで Vue App 作る時に乗り越えるべき5つの壁
Nuxt なしで Vue App 作る時に乗り越えるべき5つの壁
Yutaro Miyazaki
はじめてのVue.js
はじめてのVue.js
Kei Yagi
RailsでReact.jsを動かしてみた話
RailsでReact.jsを動かしてみた話
yoshioka_cb
ASP.NET MVC と jQuery で実践する標準志向 Web 開発
ASP.NET MVC と jQuery で実践する標準志向 Web 開発
Akira Inoue
初めてのvue.js(2.x系)
初めてのvue.js(2.x系)
健人 井関
作って分かるKnockoutJS@ALM11月
作って分かるKnockoutJS@ALM11月
Takuya Ueda
React を導入したフロントエンド開発
React を導入したフロントエンド開発
daisuke-a-matsui
What's hot
(20)
DevLOVE Kansai KnockoutJS
DevLOVE Kansai KnockoutJS
プロダクトに 1 から Vue.js を導入した話
プロダクトに 1 から Vue.js を導入した話
Progressive Framework Vue.js 2.0
Progressive Framework Vue.js 2.0
React.js + Flux
React.js + Flux
AngularJSでの非同期処理の話
AngularJSでの非同期処理の話
AngularJSの高速化
AngularJSの高速化
Laravel Blade×vue.js 混在させる場合の注意点
Laravel Blade×vue.js 混在させる場合の注意点
20140517 knockoutjs hands-on
20140517 knockoutjs hands-on
Brush up your Coding! 2013 winter
Brush up your Coding! 2013 winter
エンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJS
Knockout.js を利用したインタラクティブ web アプリケーション開発
Knockout.js を利用したインタラクティブ web アプリケーション開発
Angular js はまりどころ
Angular js はまりどころ
Start React with Browserify
Start React with Browserify
Nuxt なしで Vue App 作る時に乗り越えるべき5つの壁
Nuxt なしで Vue App 作る時に乗り越えるべき5つの壁
はじめてのVue.js
はじめてのVue.js
RailsでReact.jsを動かしてみた話
RailsでReact.jsを動かしてみた話
ASP.NET MVC と jQuery で実践する標準志向 Web 開発
ASP.NET MVC と jQuery で実践する標準志向 Web 開発
初めてのvue.js(2.x系)
初めてのvue.js(2.x系)
作って分かるKnockoutJS@ALM11月
作って分かるKnockoutJS@ALM11月
React を導入したフロントエンド開発
React を導入したフロントエンド開発
Similar to Vue.js入門
ftechmeetup_データバインディングはどう実装されているのか
ftechmeetup_データバインディングはどう実装されているのか
kanatsum
AngularJSで業務システムUI部品化
AngularJSで業務システムUI部品化
Toshio Ehara
[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介
[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介
david9142
Vue.jsの関連ツール・ライブラリ(Vuex, Vue-Router, Nuxt)
Vue.jsの関連ツール・ライブラリ(Vuex, Vue-Router, Nuxt)
Kei Yagi
Xamarin.formsでのmvvm利用のコツ
Xamarin.formsでのmvvm利用のコツ
Masuda Tomoaki
ASP.NET MVCとEntity Frameworkで作ってみた
ASP.NET MVCとEntity Frameworkで作ってみた
Kentaro Inomata
MvcのFatモデルに立ち向かう
MvcのFatモデルに立ち向かう
Shun Hikita
Windows ストア アプリの上手な作り方
Windows ストア アプリの上手な作り方
一希 大田
AWS を活用して小さなチームで 世界で使われるサービスを運用する方法 - JAWS Days 2013
AWS を活用して小さなチームで 世界で使われるサービスを運用する方法 - JAWS Days 2013
Takashi Someda
KnockoutJSを使用したアプリケーションの構築例
KnockoutJSを使用したアプリケーションの構築例
masakazusegawa
Aws summits2014 ガリバーインターナショナル社内システムのaws化
Aws summits2014 ガリバーインターナショナル社内システムのaws化
Boss4434
Using Windows Azure
Using Windows Azure
Shinji Tanaka
さわってみようReact.js、AngularJS(1系、2系)
さわってみようReact.js、AngularJS(1系、2系)
Kazuhiro Yoshimoto
Java/Android開発者のためのWindows Azure入門 (パート2)
Java/Android開発者のためのWindows Azure入門 (パート2)
Naoki (Neo) SATO
Vue入門
Vue入門
Takeo Noda
Mvc conf session_5_isami
Mvc conf session_5_isami
Hiroshi Okunushi
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Akira Inoue
Backbone.js入門
Backbone.js入門
AdvancedTechNight
20200304 vuejs
20200304 vuejs
yamamotomsc
ASP.NET MVC 1.0
ASP.NET MVC 1.0
Shinpei Ohtani
Similar to Vue.js入門
(20)
ftechmeetup_データバインディングはどう実装されているのか
ftechmeetup_データバインディングはどう実装されているのか
AngularJSで業務システムUI部品化
AngularJSで業務システムUI部品化
[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介
[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介
Vue.jsの関連ツール・ライブラリ(Vuex, Vue-Router, Nuxt)
Vue.jsの関連ツール・ライブラリ(Vuex, Vue-Router, Nuxt)
Xamarin.formsでのmvvm利用のコツ
Xamarin.formsでのmvvm利用のコツ
ASP.NET MVCとEntity Frameworkで作ってみた
ASP.NET MVCとEntity Frameworkで作ってみた
MvcのFatモデルに立ち向かう
MvcのFatモデルに立ち向かう
Windows ストア アプリの上手な作り方
Windows ストア アプリの上手な作り方
AWS を活用して小さなチームで 世界で使われるサービスを運用する方法 - JAWS Days 2013
AWS を活用して小さなチームで 世界で使われるサービスを運用する方法 - JAWS Days 2013
KnockoutJSを使用したアプリケーションの構築例
KnockoutJSを使用したアプリケーションの構築例
Aws summits2014 ガリバーインターナショナル社内システムのaws化
Aws summits2014 ガリバーインターナショナル社内システムのaws化
Using Windows Azure
Using Windows Azure
さわってみようReact.js、AngularJS(1系、2系)
さわってみようReact.js、AngularJS(1系、2系)
Java/Android開発者のためのWindows Azure入門 (パート2)
Java/Android開発者のためのWindows Azure入門 (パート2)
Vue入門
Vue入門
Mvc conf session_5_isami
Mvc conf session_5_isami
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Backbone.js入門
Backbone.js入門
20200304 vuejs
20200304 vuejs
ASP.NET MVC 1.0
ASP.NET MVC 1.0
More from Takuya Sato
レガシープロダクトを改善していくための戦い方
レガシープロダクトを改善していくための戦い方
Takuya Sato
設計と実装で 抑えておきたい サービスクラスと例外
設計と実装で 抑えておきたい サービスクラスと例外
Takuya Sato
本番環境で使いたいPHP
本番環境で使いたいPHP
Takuya Sato
徹底攻略!PHP5.4
徹底攻略!PHP5.4
Takuya Sato
Silex入門
Silex入門
Takuya Sato
ここがすごい! なぞとPHP5.3
ここがすごい! なぞとPHP5.3
Takuya Sato
2009年のPHPフレームワーク
2009年のPHPフレームワーク
Takuya Sato
Redmineで始めるチケット駆動開発
Redmineで始めるチケット駆動開発
Takuya Sato
フレームワーク使おうぜ!
フレームワーク使おうぜ!
Takuya Sato
本当は怖いPHP
本当は怖いPHP
Takuya Sato
PHPとMongoDBで学ぶ次世代データストア
PHPとMongoDBで学ぶ次世代データストア
Takuya Sato
PHPでセキュリティを真面目に考える
PHPでセキュリティを真面目に考える
Takuya Sato
More from Takuya Sato
(12)
レガシープロダクトを改善していくための戦い方
レガシープロダクトを改善していくための戦い方
設計と実装で 抑えておきたい サービスクラスと例外
設計と実装で 抑えておきたい サービスクラスと例外
本番環境で使いたいPHP
本番環境で使いたいPHP
徹底攻略!PHP5.4
徹底攻略!PHP5.4
Silex入門
Silex入門
ここがすごい! なぞとPHP5.3
ここがすごい! なぞとPHP5.3
2009年のPHPフレームワーク
2009年のPHPフレームワーク
Redmineで始めるチケット駆動開発
Redmineで始めるチケット駆動開発
フレームワーク使おうぜ!
フレームワーク使おうぜ!
本当は怖いPHP
本当は怖いPHP
PHPとMongoDBで学ぶ次世代データストア
PHPとMongoDBで学ぶ次世代データストア
PHPでセキュリティを真面目に考える
PHPでセキュリティを真面目に考える
Vue.js入門
1.
Vue.js入門(1.0対応) UUUM株式会社 システムユニット 佐藤琢哉
2.
UUUMではエンジニア積極採用中! Web インフラ(AWS) サーバ(PHP) クライアント(HTML/CSS/JS) アプリ(iOS/Android) 詳細は でhttp://www.uuum.jp/recruit/
3.
Vue.jsとは JavaScriptのMVVMフレームワーク 軽量 フルスタックではない
4.
MVVM? Model-View-ViewModel View=UI、つまりHTML Model=データ、JavaScriptのオブジェクト ViewModel=UIとデータを繋ぐ部分、Vue.jsのオブジェ クト
5.
jQueryは何が悪かったのか? プレゼンテーションとロジックが混ざりやすい 手続き型 「データをセットする」という処理を明記しないとい けない どこで何のデータが管理されているのかわからなくなる 表示のロジックを変更したいのか、データに関するロジ ックを変更したいのかがわからない ただし用途を間違えなければ今でも十分使える
6.
MVVMの設計 表示に関することはViewで データに関することはModelで データと表示のつなぎ込みはViewで わかりやすい リアクティブ・プログラミングによる実現
7.
リアクティブ・プログラミング Reactive=反応的な データの変更がそのままViewにすぐ同期される 普通:data = 1;
view.setData(data); リアクティブ:data = 1; // この時点でviewにはもう反映 されている ビジネスロジックが、ModelとViewの対応を知らなくて も良い
8.
Vue.jsは何が優れているか 軽量 余計な機能やMVVMと関係ない機能は搭載されていな い ドキュメントも少ないため、学習コストが低い (かつ)拡張性が高い コンポーネントシステム フィルタ mixin ほどほどに使いやすい(重要) 好みとも言える
9.
1.0での変更点 テンプレート記法の追加 普通のHTML属性に「:」を足すとv-bindに <a :href="someURL"></a> 普通のHTML属性に「@」を足すとv-onに <button @click="onClick"></button>
10.
1.0での変更点 新記法v-foo:barの追加 NG : <div
v-on="click: doThis, keyup: doThat"> OK : <div v-on:click="doThis" v- on:keyup="doThat"> Mustache記法がVue.jsのプロパテイ下で使えなくなった NG : <component is="{{view}}"></component> OK : <component v-bind:is="view"></component> OK : <a href="{{baseURL}}/abc"></a>
11.
1.0での変更点 stopPropagation()やpreventDefault()が簡単に呼べる <a v-on:click.stop="doThis"></a> <form v-on:submit.prevent></form>
12.
1.0での変更点 checkboxを1つのv-modelで扱えるようになった ↑の場合、checkedNamesはArrayであること <input type="checkbox" value="Jack"
v-model="checkedNames"> <input type="checkbox" value="John" v-model="checkedNames"> <input type="checkbox" value="Mike" v-model="checkedNames">
13.
1.0での変更点 v-elseの追加 直前のv-ifやv-showに対するelseを実行できる <div v-if="Math.random() >
0.5"> Sorry </div> <div v-else> Not sorry </div>
14.
1.0での変更点 詳細は http://vuejs.org/2015/10/26/1.0.0-release/ https://github.com/vuejs/vue/releases/tag/1.0.0
15.
使ってみよう!
16.
基本 <div id="view">ここがVue.js管理領域</div> <script src="vue.js"><
/script> <script> new Vue({ el: '#view' }); < /script>
17.
基本 new Vue(); で作成されたオブジェクトがViewModel el
プロパティで、DOMのどの領域をVue.jsの管理領域に するか決める(=View) 管理外の領域に対しては何もしない
18.
データバインディング <div v-text="message"></div> new Vue({ data:
{ message: 'hello!' } });
19.
データバインディング data プロパティがModel そのものになる ただしちょっと癖がある data.message
に何かを指定すると、 v-text="message" の 領域の中身が即座に書き換えられる
20.
イベントの取得 <button @click="submit">決定</button> new Vue({ methods:
{ submit: function() { alert('hello!'); } } });
21.
イベントの取得 JSのイベント名の前に@を付けた属性に、実行メソッド を指定 v-on="click: submit"でも可 引数も指定できる それってHTMLにロジック書いてない?関心の分離 (SoC)はどこに行った? Vue.jsの管理メソッドにしかバインドできない ViewModel内からDOM構造っぽいもの(イベントハン ドラ)を排除できる HTMLを見るだけでどこにイベントがあるのかわかる ようになる
22.
リスト表示 <ul> <li v-for="item in
items">{{ item.value }}</li> </ul> new Vue({ data: { items: [ { value: 1}, { value: 2} ]} });
23.
リスト表示 v-for でループ式を指定すると、それの中身が繰り返され て展開される v-for="one in
list" orderも指定できる リストへのデータの追加は、 $set や$remove で行う必要 がある 普通に追加すると変更がViewに通知されない はまりやすいポイント
24.
Mustache記法 ますたっしゅ? 様々な言語に移植されているメジャーなテンプレートエ ンジン Vue.js 管理下のDOMでこの記法を使うと、Modelの変数 をその位置に表示することができる {{ }}
が他のテンプレートエンジンの記法と被る時は Vue.config.delimiters = ['{%', '%}']; のようにして変更す ることが可能 ただしVue.jsの初期化が完了するまでは{{ message }} のよ うな表示がそのまま画面に表示されてしまうため、可能 な限りv-text等を使うのが良い 1.0になって使える場面が減った
25.
フォーム <input type="text" v-model="name"
/> <button @click="hello"></button> new Vue({ data: { name: null }, // 省略可 methods: { hello: function() { alert('hello ' + this.name); } } });
26.
フォーム v-model で、フォーム要素のvalueの値へのバインディン グができる < select
>もv-modelで HTMLにnumber プロパティがあると数値型になる
27.
フィルタ <div v-text="message |
uppercase"></div> | で繋ぐと、フィルタメソッドが実行されて表示される 組み込みのフィルタは多くないが、自作は簡単なので、 複雑なフィルタも作成できる
28.
inline expressions <div v-text=”last_name
+ ' ' + first_name”></div> v-textやテンプレート等の中で簡単な演算ができる 難しいことをしたい場合はcomputed propertiesで
29.
computed properies <div v-text="full_name"></div> new
Vue({ data: { first_name: 'sato', last_name: 'takuya' }, computed: { full_name: function() { return last_name + ' ' + first_name; } } });
30.
コンポーネントシステム Vue.js管理下のHTML内に独自タグを定義することができ る 独自タグの中身は別の箇所のHTMLをはめ込むことがで きる WebComponentsっぽい!(気がする) React.jsっぽい!(そうか?) 何回も使うようなHTML集合をコンポーネントとして汎 用化することができる
31.
表示制御 <div v-show="isVisible">show!</div> new Vue({ data:
{ isVisible: false } });
32.
表示制御 v-show の中身がtrue と判定される場合のみに表示する false
の場合はdisplay: none にする v-if の場合は要素が削除される CSSのアニメーション制御も可能 CSSのクラスやHTMLのプロパティのON/OFF制御も可能
33.
実践例 管理画面に適用するとすぐ使える 例えば、入力欄Aが特定の値の場合のみ入力欄Bを表示 する 例えば、金額を入力すると即座に消費税込みの金額を 表示する
34.
入力欄Aが特定値の場合入力欄Bを表示 <select v-model="type"> <option value="user">ユーザー</option> <option
value="admin">管理者</option> </select> <div v-show="type == 'admin'"> <h3>管理者限定の設定</h3> <p>管理者ID : <input type="text"></p> </div>
35.
金額を入力すると消費税込の値を表示 <p>金額 <input type="text"
v-model="price" number></p> <p>税込 : <span v-text="priceWithTax"></span></p> new Vue({ computed: { priceWithTax: function() { return Math.floor(price * 1.08); } } });
36.
管理画面で使う ほとんどJavaScriptを書く必要がない Vue.jsの組み込み機能だけで表示非表示の制御ができ る ちょっとした編集値の表示もすぐできる 入力数が可変のフォームを作るのも簡単 v-forとリストの組み合わせ
37.
複雑なことをする場合 Browserify等を使ってモジュール化しよう 通信は搭載されていないので他のライブラリを使おう 公式でvue-resource コンポーネントが用意されている jQueryでもいい テストを書こう プレゼンテーションとロジックが分離されているので 書きやすいはず
38.
Vue.jsを使う上で避けたいこと Vue.js内でDOMの書き換えを直接書く ほとんどの場合で必要ない ドラッグ&ドロップ等で必要になることはあるが、な るべくcomponent化などで最小限にすべき
39.
Vue.jsを使う上で避けたいこと methodsを書きすぎる methods=Controllerに近い テストのしやすさを考える 通信が入る部分などはPromiseを使いうまく分離する methodsが太り過ぎる場合は外部に逃す
40.
Vue.jsを使う上で避けたいこと Vue.js管理外のDOMを操作する 管理されている箇所以外を操作してしまうと、何が何 だかわからなくなる そもそも直接書き換えが入っている時点で駄目 画面内に複数のVue.js領域がある場合、それらは個別のも のとして扱う 連携が必要な場合はコンポーネントで
41.
まとめ Vue.jsは特に管理画面などで強力 Vue.jsを使っても書き方によっては汚くなる 画面表示に関するロジックはMVVMを意識しよう
Download now