Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Vue.jsで遊んでみよう
Search
ショウノシオリ
June 22, 2017
Programming
0
61
Vue.jsで遊んでみよう
2017/6/22 v-osakaの登壇資料です。
かなり超初心者向けの内容です。
ショウノシオリ
June 22, 2017
Tweet
Share
More Decks by ショウノシオリ
See All by ショウノシオリ
Nuxt / Vue 開発でやりがちな 「読みづらい」「わかりづらい」コード
sshono1210
0
170
開発チームのリーダーとしてどうあるべきか?
sshono1210
2
1.1k
Nuxt.js のディレクトリ
sshono1210
0
2.8k
Nuxt.js で SSR 対応する
sshono1210
0
2.2k
array_merge と array_push の違いについて
sshono1210
0
420
全くデザインを勉強したことのないエンジニアが「なるほどデザイン」を読んで少しだけ勉強した話
sshono1210
0
180
Vue.js の methods と computed
sshono1210
0
87
すぐに使える ES2015 の基本構文3つ
sshono1210
0
60
肌で感じたディレクションとマネジメント
sshono1210
0
44
Other Decks in Programming
See All in Programming
Better Code Design in PHP
afilina
PRO
0
140
チームにとって最適なスキルアップ施策とは何か/what-is-the-best-skill-up-approach-for-team
nobuoooo
0
160
Micro Frontends Unmasked Opportunities, Challenges, Alternatives
manfredsteyer
PRO
0
180
React CompilerとFine Grained Reactivityと宣言的UIのこれから / The next chapter of declarative UI
ssssota
7
2.7k
似たもの同士のPerlとPHP
uzulla
1
100
カンファレンスの「アレ」Webでなんとかしませんか? / Conference “thing” Why don't you do something about it on the Web?
dero1to
1
150
cmp.Or に感動した
otakakot
3
330
「天気予報があなたに届けられるまで」 - NIFTY Tech Talk #22
niftycorp
PRO
0
130
大規模サイトリビルドの現場から:成功と失敗のリアルな教訓 / Site Rebuild,Real Lessons Learned from Successes and Failures_JJUG Fall 2024
techtekt
0
190
CSC509 Lecture 12
javiergs
PRO
0
170
5分ぐらいで分かる、トリミング機能の作り方
tsutsuitakumi
0
140
As an Engineers, let's build the CRM system via LINE Official Account 2.0
clonn
1
580
Featured
See All Featured
Embracing the Ebb and Flow
colly
84
4.5k
Imperfection Machines: The Place of Print at Facebook
scottboms
266
13k
Into the Great Unknown - MozCon
thekraken
33
1.5k
Agile that works and the tools we love
rasmusluckow
327
21k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
1.2k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
111
49k
Code Review Best Practice
trishagee
64
17k
How STYLIGHT went responsive
nonsquared
95
5.2k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Site-Speed That Sticks
csswizardry
0
84
Measuring & Analyzing Core Web Vitals
bluesmoon
4
150
Transcript
Vue.js で遊んでみよう
自己紹介 ショウノシオリ @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側)
<div id=”app”> <p>{{ message }}</p> </div> ▷ {{ 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側)
<div id=”app”> <p>{{ message }}</p> <button @click=”changeMessage”>click Here!!</button> </div> ▷
@click でイベントが発動する ◦ ボタンが押されると methods の changeMessage が実行される ▷ @click は v-on:click の略 ボタンを押してメッセージを変えよう(HTML側)
結果 ▷ 変わります
4. 双方向バインディング
▷ 双方向バインディング:v-model ◦ フォームの値を動的に取得することができる ▷ データが双方向でバインディング(紐付け)されるため、フォーム値を 変更すると、{{ comment }} 内もリアルタイムで変わる
フォーム値をリアルタイムで出力してみよう (HTML側) <input type=”text” v-model=”comment”/> <p>確認:{{ comment }}</p>
▷ 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]