JavaScriptフレームワーク入門にVue.jsはいかが？

JavaScriptフレームワーク入門にVue.jsはいかが？

• 1.
  JavaScriptフレームワーク入門に Vue.jsはいかが？ 山崎好洋@44x1carbon グランフロントエンド2016
• 2.
  自己紹介  山崎好洋  専門学生 Vue.js,Laravel  ITCreate部 部長 44@44x1carbon
• 3.
  ITCreate部とは  つくりたいものを、作りたいときに、造り たいだけ、創る  学内勉強会 KOFブース出展  0泊3日の合宿
• 4.
  システム開発演習  クラス内で５〜８人のチームを作りシステ ムを開発する  フロントエンド：Vue.jsサーバサイ ド:Laravel
• 5.
  なぜフレームワークを使うの か？  セキュリティ面をあまり気にしなくてもい い  プラグインで楽ができる 開発経験が浅いため綺麗なコードが書けな い  フレームワークの規約に則ることで、共通 のコード規約で開発ができる
• 6.
  JavaScriptフレームワーク  Backbone.js  Ember.js Knockout.js  AngularJS  React.js  Ractive.js  vue.js  Aurelia.js
• 7.
  なぜVue.jsなのか？  公式ドキュメントが日本語対応している  シンプルで学習コストが低い
• 8.
  Vue.jsとは？  MVVMフレームワーク  双方向データバインディング
• 9.
  双方向データバインディング  データの変更があればUIの表示を更新し、 UIの変更があればデータの更新を自動的に 行う機能
• 11.
  双方向データバインディング <span>Message is: {{message }}</span> <br> <input type="text" v-model="message" placeholder="edit me"> HTML var app = new Vue({ el: '#app', data: { message } }); JS
• 13.
  リストレンダリング Vue.js <ul id="example-1"> <li v-for="eventin events"> <a v-bind:href="event.url">{{ event.title }}</a> </li> </ul> HTML
• 14.
  まとめ  JavaScriptフレームワークを使ってみたい けど難しそうと思ってる方は是非Vue.jsを  Vue.jsでJavaScriptフレームワークになれ て、他のフレームワークを触るという使い 方もできるかも
• 15.
  最後に  関西フロントエンドUGで一緒に学生スタッフ やってくれる人探してます！一緒にコミュニ ティ活動やりましょう！