Vue.jsで遊んでみよう

 Vue.jsで遊んでみよう

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

C385e96e5ddd25faba59e3e14fc3e019?s=128

ショウノシオリ

June 22, 2017
Tweet

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