Vue.jsで遊んでみよう

2017/6/22 v-osakaの登壇資料です。
かなり超初心者向けの内容です。

Transcript

1. Vue.js で遊んでみよう
2. 自己紹介 ショウノシオリ @shosho_egg ・株式会社 chatbox エンジニア 　・フロントやったり、 PHPやったり 　・Laravel と Vue.js で管理画面を作ったりしています ・Qiita：shosho
3. アジェンダ ▷ 0. Vue.js とは？ ▷ 1. 準備をしよう ◦ インストール ▷ 2. 「Hello Vue!」を表示する ◦ 基本的なVueの記法 ▷ 3. ボタンを押してメッセージを変えよう ◦ methodsで関数を登録 ◦ @click で関数を呼び出す ▷ 4. フォーム値をリアルタイムで出力してみよう ◦ 双方向バインディング v-model ▷ 5. 最初にアラートを出してみよう ◦ created ◦ ライフサイクルダイアグラム
4. 0. Vue.js とは？
5. 初心者でも触りやすいJSフレームワーク ▷ 「少しずつ始められて、柔軟に使えるJSフレームワーク」 といった感じ ◦ 「見た目」と「データ」を分けて記述 するので、「見た目だけの変更」など に対応しやすい ◦ モノリシックなフレームワークではなく、部分的に利用可能 ▷ 最新 ver. は 2.x ▷ ドキュメントが充実 ◦ 英語　https://vuejs.org/ ◦ 日本語　https://jp.vuejs.org/
6. シンプルなので組み合わせて使うとよい◎ ▷ APIを叩いたりはできないので、他のライブラリなどを利 用する ◦ superagent を利用したり ◦ データをごっそりAPI経由で送れるので、Laravel のBladeと組み合わ せて使ってみたりしてます
7. 1. 準備
8. 準備をしよう ▷ ドキュメント通りにすればOK ◦ 日本語ドキュメント　https://jp.vuejs.org/v2/guide/installation.html ▷ 開発 / 本番モードがあるので注意
9. 2. 「Hello Vue!」
10. $(()=>{ var app = new Vue({ el : ‘#app’, data : { message: ‘Hello Vue!’ } }); }); ▷ 動かし方：new Vue({...}) と書く ▷ 適用範囲：el で指定 ◦ el がないと動かない ◦ 今回は id で指定したが、クラス指定でも動く ▷ データの記述場所：data 「Hello Vue!」を表示する（JS側）
11. <div id=”app”> <p>{{ message }}</p> </div> ▷ {{ message }} でデータバインディングができる ▷ el の指定を忘れないこと 「Hello Vue!」を表示する（HTML側）
12. 結果 ▷ ブラウザに「Hello Vue!」と出力される
13. 3. クリックイベント
14. data : { message: ‘Hello Vue!’ }, methods : { changeMessage(){ this.message = ‘How are you?’; } } ▷ 関数を登録：methods ◦ this.message で登録した data にアクセスできる ◦ changeMessage 関数を呼び出すと this.message を違うメッ セージで代入 ボタンを押してメッセージを変えよう（JS側）
15. <div id=”app”> <p>{{ message }}</p> <button @click=”changeMessage”>click Here!!</button> </div> ▷ @click でイベントが発動する ◦ ボタンが押されると methods の changeMessage が実行される ▷ @click は v-on:click の略 ボタンを押してメッセージを変えよう（HTML側）
16. 結果 ▷ 変わります
17. 4. 双方向バインディング
18. ▷ 双方向バインディング：v-model ◦ フォームの値を動的に取得することができる ▷ データが双方向でバインディング（紐付け）されるため、フォーム値を 変更すると、{{ comment }} 内もリアルタイムで変わる フォーム値をリアルタイムで出力してみよう （HTML側） <input type=”text” v-model=”comment”/> <p>確認：{{ comment }}</p>
19. ▷ JS側で v-model の登録を忘れずに ◦ data で登録 ◦ 初期値が必要（今回は空の ‘’ で） ◦ 登録していないと {{ comment }} がテキストとして認識される フォーム値をリアルタイムで出力してみよう （JS側） data : { message: ‘Hello Vue!’, comment: ‘’ },
20. 結果 ▷ 入力フォームに入れた値が「確認」の右横に表示される ◦ 入力値を変えると表示されるメッセージも変わる
21. 5. ライフサイクルダイアグラム
22. ▷ ブラウザを最初に読み込んだ時にアラート表示を実行 ▷ Vue 生成時に呼ぶ：created ◦ created が呼ばれた時にはまだ data の中身は読み込まれない 最初にアラートを出してみよう（JS側） methods : { changeMessage(){ this.message = ‘How are you?’; } }, created(){ alert(‘Vue.jsをはじめよう!’); }
23. ライフサイクルダイアグラム ▷ https://jp.vuejs.org/v2/guide/instance.html#ライフサイクルダイアグ ラム ◦ observe data：データがあるのか等のチェックはするが、まだデー タは埋め込まれない ◦ createdの時点にはまだ data が入らない ◦ 赤字：イベント ◦ 実践：否が応でも進む方向 ◦ 点線：場合によって待ったりする方向 ◦ mountされる：データがはめ込まれる ◦ destroy：コンポーネントとかを読み終わったら。
24. 結果 ▷ created が呼び出された段階ではまだ data が呼び出されていないので {{ message }} {{ comment }} のようになっている
25. 他にもよく使うもの ▷ v-if ▷ v-for ▷ componentに分けたり
26. Vue.js でつくりたいもの ▷ 個人的に Vue.js で作っていた「持ち物アプリ」を完成 させたい ◦ SPAっぽいやつ
27. Qiita記事 ▷ Vue.js をちょっと使ってみる　 http://qiita.com/shosho/items/38273d099a41acd341c2 ▷ Vueにデバッグ関数を追加　 http://qiita.com/shosho/items/7960293de6c6663a5a37 ▷ Vue.js の「ライフサイクルダイアグラム」の見方　 http://qiita.com/shosho/items/8a6692e773eb8175498a ▷ Vue.js のデータバインディングとレンダリング　 http://qiita.com/shosho/items/d2889b2e806d6a756d70 ▷ Vue.js の v-if をつけるとき　 http://qiita.com/shosho/items/7fa3235ff9cc2dc7b6db
28. Thanks! Any questions? You can find me at: @username user@mail.me