はじめてのVue.js
25
はじめての Vue.js DevLOVE 関西「 JavaScript フレームワークは AngularJS だけじゃない 」 2015.01.26
-
Upload
kamiyam- -
Category
Technology
-
view
2.304 -
download
2
Transcript of はじめてのVue.js
はじめてのVue.jsDevLOVE関西「JavaScriptフレームワークは
AngularJSだけじゃない」 2015.01.26
自己紹介• かみやん (Twitter@kamiyam) http://nantokaworks.com
• Engineer
• JavaScript、Node.jsでお仕事をしている人
• カメラ/自動車
v0.11.4 (※ 15.1.26現在)
まず最初にみなさんに お伝えしなければならないことが
あります。
＿ 人人人人人人人人人人人 ＿
＞ Vue.js は IE8 非対応 ＜
‾Y^Y^Y^Y^Y^Y^Y^Y^Y^Y‾
それでも ついてこられる皆さん()に
一言で表すなら 軽量版 Angular.js
Vue.js から入って
Angular.js に行った人
Angular.jsapp.controller("demoCtrl", [
"$scope", "$timeout", "$modal", "socketer", "authenticationSvc", "chatRoom", function($scope, $timeout, $modal, socketer, authenticationSvc, chatRoom) {
$scope.*** $scope.***
}]);
$scopeにいろいろくっつけていくやつ
Vue.jsvar app = new Vue({
el: "#demo", data: {
message: "Hello World" }, methods: {
method: function(){/* 処理 */}
}, ready: function(){}
});
Vue.jsvar app = new Vue({
el: “#demo", //バインド対象のElements
data: { //ビューモデルが保持するData
message: "Hello World" }, methods: { //ビュー側で使用する関数など
method: function(){/* 処理 */}
}, ready: function(){ //初期化処理
} });
DEMO
Vue.js これだけやっておけば とりあえず大丈夫
DEMO・{{}} / v-text / v-html ・v-model ・v-on ・v-repeat ・v-show
{{}} / v-text / v-htmlvar app = new Vue({
data: { hello: “<h1>Hello World</h1>"
} });
<p>{{hello}}</p> <p v-text="hello"></p> <p v-html="hello"></p>
v-modelvar app = new Vue({
data: { message: "Hello World"
} });
<p>message</p> <input v-model="message" />
v-onvar app = new Vue({
methods: { hogeMethod: function(e){}, fugaMethod: function(e){},
} });
<button v-on="click: hogeMethod, keyup : fugaMethod “> Hey
</button>
v-repeatvar app = new Vue({
data: { users: [
{name: “hoge”, id:1002394}, {name: “fuga”, id:1001784}]
} });
<ul> <li v-repeat="user : users">{{user.name}}</li>
</ul>
v-show
var app = new Vue({ data: {
isDone: false }
});
<p v-show=“!isDone"> Task A <p>
Vue.js を使う理由
Angular.js <=> Vue.js （他に比べると）移行しやすい
アトリビュート 'ng-**' <=> 'v-**' で読み替える
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() {}; } ]);
参考
Vue.js
・マイクロサービス / スマートフォン
・MVほにゃららの入門としてよさげ
・機能が少ない（絞られているので） ググらビリティ高い
ご清聴ありがとうございました
