2017/6/22 v-osakaの登壇資料です。 かなり超初心者向けの内容です。
Vue.js で遊んでみよう
View Slide
自己紹介ショウノシオリ @shosho_egg・株式会社 chatbox エンジニア ・フロントやったり、 PHPやったり ・Laravel と Vue.js で管理画面を作ったりしています・Qiita：shosho
アジェンダ▷ 0. Vue.js とは？▷ 1. 準備をしよう○ インストール▷ 2. 「Hello Vue!」を表示する○ 基本的なVueの記法▷ 3. ボタンを押してメッセージを変えよう○ methodsで関数を登録○ @click で関数を呼び出す▷ 4. フォーム値をリアルタイムで出力してみよう○ 双方向バインディング v-model▷ 5. 最初にアラートを出してみよう○ created○ ライフサイクルダイアグラム
0.Vue.js とは？
初心者でも触りやすいJSフレームワーク▷ 「少しずつ始められて、柔軟に使えるJSフレームワーク」といった感じ○ 「見た目」と「データ」を分けて記述 するので、「見た目だけの変更」などに対応しやすい○ モノリシックなフレームワークではなく、部分的に利用可能▷ 最新 ver. は 2.x▷ ドキュメントが充実○ 英語 https://vuejs.org/○ 日本語 https://jp.vuejs.org/
シンプルなので組み合わせて使うとよい◎▷ APIを叩いたりはできないので、他のライブラリなどを利用する○ superagent を利用したり○ データをごっそりAPI経由で送れるので、Laravel のBladeと組み合わせて使ってみたりしてます
1.準備
準備をしよう▷ ドキュメント通りにすればOK○ 日本語ドキュメント https://jp.vuejs.org/v2/guide/installation.html▷ 開発 / 本番モードがあるので注意
2.「Hello Vue!」
$(()=>{var app = new Vue({el : ‘#app’,data : {message: ‘Hello Vue!’}});});▷ 動かし方：new Vue({...}) と書く▷ 適用範囲：el で指定○ el がないと動かない○ 今回は id で指定したが、クラス指定でも動く▷ データの記述場所：data「Hello Vue!」を表示する（JS側）
{{ message }}▷ {{ message }} でデータバインディングができる▷ el の指定を忘れないこと「Hello Vue!」を表示する（HTML側）
結果▷ ブラウザに「Hello Vue!」と出力される
3.クリックイベント
data : {message: ‘Hello Vue!’},methods : {changeMessage(){this.message = ‘How are you?’;}}▷ 関数を登録：methods○ this.message で登録した data にアクセスできる○ changeMessage 関数を呼び出すと this.message を違うメッセージで代入ボタンを押してメッセージを変えよう（JS側）
{{ message }}click Here!!▷ @click でイベントが発動する○ ボタンが押されると methods の changeMessage が実行される▷ @click は v-on:click の略ボタンを押してメッセージを変えよう（HTML側）
結果▷ 変わります
4.双方向バインディング
▷ 双方向バインディング：v-model○ フォームの値を動的に取得することができる▷ データが双方向でバインディング（紐付け）されるため、フォーム値を変更すると、{{ comment }} 内もリアルタイムで変わるフォーム値をリアルタイムで出力してみよう（HTML側）確認：{{ comment }}
▷ JS側で v-model の登録を忘れずに○ data で登録○ 初期値が必要（今回は空の ‘’ で）○ 登録していないと {{ comment }} がテキストとして認識されるフォーム値をリアルタイムで出力してみよう（JS側）data : {message: ‘Hello Vue!’,comment: ‘’},
結果▷ 入力フォームに入れた値が「確認」の右横に表示される○ 入力値を変えると表示されるメッセージも変わる
5.ライフサイクルダイアグラム
▷ ブラウザを最初に読み込んだ時にアラート表示を実行▷ Vue 生成時に呼ぶ：created○ created が呼ばれた時にはまだ data の中身は読み込まれない最初にアラートを出してみよう（JS側）methods : {changeMessage(){this.message = ‘How are you?’;}},created(){alert(‘Vue.jsをはじめよう!’);}
ライフサイクルダイアグラム▷ https://jp.vuejs.org/v2/guide/instance.html#ライフサイクルダイアグラム○ observe data：データがあるのか等のチェックはするが、まだデータは埋め込まれない○ createdの時点にはまだ data が入らない○ 赤字：イベント○ 実践：否が応でも進む方向○ 点線：場合によって待ったりする方向○ mountされる：データがはめ込まれる○ destroy：コンポーネントとかを読み終わったら。
結果▷ created が呼び出された段階ではまだ data が呼び出されていないので {{message }} {{ comment }} のようになっている
他にもよく使うもの▷ v-if▷ v-for▷ componentに分けたり
Vue.js でつくりたいもの▷ 個人的に Vue.js で作っていた「持ち物アプリ」を完成させたい○ SPAっぽいやつ
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
Thanks!Any questions?You can find me at:@username[email protected]
sshono1210
atinfinity
sanfrecce_osaka
ohakutsu
yahiru
marcustung
antyadev
niftycorp
cer
nijieinfra
seike460
eileencodes
destraynor
akmur
chrislema
hatefulcrawdad
jonyablonski
andyhume
iamctodd
shpigford
colly
samlambert