2017/6/22 v-osakaの登壇資料です。 超初心者におすすめ。

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