Vue.jsで遊んでみよう

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