今日から始めるVue.js

Transcript

1. 今日から始める Vue.js サポーターズ Colab勉強会 2018/10/30 @mosmos_21
2. 目次 1. はじめに 2. Vue.jsってどんなもの? 3. Vue.jsのキホン 4. Vue.jsで作るTODOアプリ 5. まとめ 2
3. 1. はじめに 自己紹介とか 3
4. 自己紹介 【氏名】 橋本 尚儒（はしもと たかひと） 【Twitter】 もっさん @mosmos_21 【職業】 ソフトウェアエンジニア(自社製品) Java/Spring + javascript/AngularJS 【趣味】 競技プログラミング ビリヤード 4
5. 今日話すこと • Vue.jsの本当に基本的なところ • MVVMのはなし • 基本的な機能だけで作るTODOアプリ 5
6. こんな人が対象 6 • フロントエンドにほとんど触れたことがない人 • Vue.jsが気になってるけど触ったことがない人 • Vue.jsの空気に触れたい人
7. 対象じゃない人 7 • 普段フロント触ってる人 • Vue.jsで簡単なアプリを作ったことある人
8. 2. Vue.jsってどんなもの? MVVMから話します 8
9. Vue.jsとは? • プログレッシブフレームワーク(↔モノリシック)で少し ずつ適用できるフレームワーク • 中核はView層だけが対象になっているので、ほかのフ レームワークに組み込むことも可能 • 設計パターンはMVVMと呼ばれるものを採用している
10. MVVMとは? ビュー(V) ↔ ビューモデル(VM) ↔ モデル(M) の形のアーキテクチャ View Model DOM Listeners Data Bindings Model View DOM Javascript Object Vue.js
11. 3. Vue.jsのキホン 文法をさらっと 11
12. data <div id=“app”> {{ message }} <input type=“text” v-model=“message”> </div> <script> var vm = new Vue({ el: ‘#app’, data: { message: ‘Hello World!’ } }); </script> • まずはHello Worldから! • Vue.jsのインスタンを宣 言してdomの指定要素に バインドする • {{ message }} (Mustacheタグ)を使うこ とで動的に値をdomに入 れることが出来る。
13. computed <script> var vm = new Vue({ el: ‘#app’, data: { arr: [‘hoge’, ‘fuga’, ‘puyo’] } computed: { combinedList: function () { return this.arr.join(‘ ‘); } } }); </script> • 算出プロパティ • 依存するものが更新されると自 動的に更新してくれる • new Date()などの更新は検出 してくれないので注意 <div id=“app”> {{ conbinedList }} </div>
14. methos <div id=“app”> <button v-on:click=“hello”> Click! </button> </div> <script> var vm = new Vue({ el: ‘#app’, methods: { hello: function () { alert(‘Hello World!’); } } }); </script> • methodに関数を定義する • Domにv-on:clickなどで定義す ることで呼び出しすることがで きる。 • 算出プロパティと違って呼び出 すたびに評価される
15. コンポーネント <div id=“app”> <hello-world v-bind:name=“Vue.js”> </hello-world> </div> <script> Vue.component(‘hello-world’, function() { props: [‘name’], template: ` <span> Hello {{ name }} !! </span> ` }); </script> • コンポーネントを定義すること で塊を作ることができる • 親から値を渡して子で使える • 子のイベントから親のイベント を呼び出すこともできる
16. v-for <div id=“app”> <span v-for:”(item, index) in items” v-bind:key=“index”> {{ item }} </span> </div> <script> var vm = new Vue({ el: ‘#app’, data: { items: [ ‘aaa’, ‘bbb’, ‘ccc’] } });</script> • バインドされているインスタン スのdataないの要素をfor文で まわして表示できる • keyの指定は必須
17. v-if <div id=“app”> <span v-for:”(item, index) in items” v-if=“index % 2 == 0” v-bind:key=“index”> {{ item }} </span> </div> <script> var vm = new Vue({ el: ‘#app’, data: { items: [ ‘aaa’, ‘bbb’, ‘ccc’] } });</script> • 条件付きレンダリング • v-if の評価結果が真であれば対 象の要素が描画される
18. 4. Vue.jsで作るTODOアプリ 文法をさらっと 18
19. 実演 19 • TODOアプリ作ります • webpackは使いません • HTMLファイル1つ + javascirpitファイル1つ • CSSはbootstrapを拝借します • データはローカルストレージに保存
20. 20 というわけでスタート!
21. 5. まとめ おさらい 21
22. まとめ 22 • Vue.js はview層に焦点を当てたフレームワークで MVVMのアーキテクチャを採用している • 基礎的な文法を見てVue.js の空気を感じた • TODOアプリの作成を通じてVue.js を簡単に扱うこ とができることを感じた
23. ご清聴ありがとうございました! ご質問がありましたらどうぞ 23