Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

はじめてのVue.js

4,518 views

Published on

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

Published in: Technology
  • Be the first to comment

はじめてのVue.js

  1. 1. はじめてのVue.js DevLOVE関西「JavaScriptフレームワークは AngularJSだけじゃない」 2015.01.26
  2. 2. 自己紹介 • かみやん (Twitter@kamiyam)
 http://nantokaworks.com • Engineer • JavaScript、Node.jsでお仕事をしている人 • カメラ/自動車
  3. 3. v0.11.4 (※ 15.1.26現在)
  4. 4. まず最初にみなさんに お伝えしなければならないことが あります。
  5. 5. _ 人人人人人人人人人人人 _ > Vue.js は IE8 非対応 <  ̄Y^Y^Y^Y^Y^Y^Y^Y^Y^Y ̄
  6. 6. それでも ついてこられる皆さん()に
  7. 7. 一言で表すなら 軽量版 Angular.js
  8. 8. Vue.js から入って Angular.js に行った人
  9. 9. Angular.js app.controller("demoCtrl", [ "$scope", "$timeout", "$modal", "socketer", "authenticationSvc", "chatRoom", function($scope, $timeout, $modal, socketer, authenticationSvc, chatRoom) { $scope.*** $scope.*** }]); $scopeにいろいろくっつけていくやつ
  10. 10. Vue.js var app = new Vue({ el: "#demo", data: { message: "Hello World" }, methods: { method: function(){/* 処理 */} }, ready: function(){} });
  11. 11. Vue.js var app = new Vue({ el: “#demo", //バインド対象のElements data: { //ビューモデルが保持するData message: "Hello World" }, methods: { //ビュー側で使用する関数など method: function(){/* 処理 */} }, ready: function(){ //初期化処理 } });
  12. 12. DEMO Vue.js これだけやっておけば とりあえず大丈夫
  13. 13. DEMO ・{{}} / v-text / v-html ・v-model ・v-on ・v-repeat ・v-show
  14. 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. 15. v-model var app = new Vue({ data: { message: "Hello World" } }); <p>message</p> <input v-model="message" />
  16. 16. v-on var app = new Vue({ methods: { hogeMethod: function(e){}, fugaMethod: function(e){}, } }); <button v-on="click: hogeMethod, keyup : fugaMethod “> Hey </button>
  17. 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. 18. v-show var app = new Vue({ data: { isDone: false } }); <p v-show=“!isDone"> Task A <p>
  19. 19. Vue.js を使う理由
  20. 20. Angular.js <=> Vue.js (他に比べると)移行しやすい
  21. 21. アトリビュート 'ng-**' <=> 'v-**' で読み替える
  22. 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. 23. Vue.js ・マイクロサービス / スマートフォン ・MVほにゃららの入門としてよさげ ・機能が少ない(絞られているので)
 ググらビリティ高い
  24. 24. Vue.js ソースを見てフィーリングをつかむ http://todomvc.com/ ■ TodoMVC
  25. 25. ご清聴ありがとうございました

×