DevLOVE関西「JavaScript フレームワークは Angular JS だけじゃない！」

1. はじめてのVue.js
DevLOVE関西「JavaScriptフレームワークは
AngularJSだけじゃない」
2015.01.26

2. 自己紹介
• かみやん (Twitter@kamiyam)
http://nantokaworks.com
• Engineer
• JavaScript、Node.jsでお仕事をしている人
• カメラ/自動車

3. v0.11.4 (※ 15.1.26現在)

4. まず最初にみなさんに
お伝えしなければならないことが
あります。

5. ＿ 人人人人人人人人人人人 ＿
＞ Vue.js は IE8 非対応 ＜
￣Y^Y^Y^Y^Y^Y^Y^Y^Y^Y￣

6. それでも
ついてこられる皆さん()に

7. 一言で表すなら
軽量版 Angular.js

8. Vue.js から入って
Angular.js に行った人

9. Angular.js
app.controller("demoCtrl", [
"$scope", "$timeout", "$modal", "socketer", "authenticationSvc",
"chatRoom", function($scope, $timeout, $modal, socketer,
authenticationSvc, chatRoom) {
$scope.***
$scope.***
}]);
$scopeにいろいろくっつけていくやつ

10. Vue.js
var app = new Vue({
el: "#demo",
data: {
message: "Hello World"
},
methods: {
method: function(){/* 処理 */}
},
ready: function(){}
});

11. Vue.js
var app = new Vue({
el: “#demo", //バインド対象のElements
data: { //ビューモデルが保持するData
message: "Hello World"
},
methods: { //ビュー側で使用する関数など
method: function(){/* 処理 */}
},
ready: function(){ //初期化処理
}
});

12. DEMO
Vue.js これだけやっておけば
とりあえず大丈夫

13. DEMO
・{{}} / v-text / v-html
・v-model
・v-on
・v-repeat
・v-show

14. {{}} / v-text / v-html
var app = new Vue({
data: {
hello: “<h1>Hello World</h1>"
}
});
<p>{{hello}}</p>
<p v-text="hello"></p>
<p v-html="hello"></p>

15. v-model
var app = new Vue({
data: {
message: "Hello World"
}
});
<p>message</p>
<input v-model="message" />

16. v-on
var app = new Vue({
methods: {
hogeMethod: function(e){},
fugaMethod: function(e){},
}
});
<button v-on="click: hogeMethod, keyup : fugaMethod “>
Hey
</button>

17. v-repeat
var app = new Vue({
data: {
users: [
{name: “hoge”, id:1002394},
{name: “fuga”, id:1001784}]
}
});
<ul>
<li v-repeat="user : users">{{user.name}}</li>
</ul>

18. v-show
var app = new Vue({
data: {
isDone: false
}
});
<p v-show=“!isDone">
Task A
<p>

19. Vue.js を使う理由

20. Angular.js <=> Vue.js
（他に比べると）移行しやすい

21. アトリビュート
'ng-**' <=> 'v-**' で読み替える

22. app.controller("chatCtrl", [
"$scope", "$timeout", "$modal", "socketer", "authenticationSvc",
"chatRoom", function($scope, $timeout, $modal, socketer,
authenticationSvc, chatRoom) {
$scope.data = {
room: chatRoom.getInfo(),
lists: []
};
$scope.state = {
isTitleView: false
};
$scope.fn.information = function() {};
}
]);
参考

23. Vue.js
・マイクロサービス / スマートフォン
・MVほにゃららの入門としてよさげ
・機能が少ない（絞られているので）
ググらビリティ高い

24. Vue.js
ソースを見てフィーリングをつかむ
http://todomvc.com/
■ TodoMVC

25. ご清聴ありがとうございました