Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Vue.jsで遊んでみよう
Search
ショウノシオリ
June 22, 2017
Programming
0
50
Vue.jsで遊んでみよう
2017/6/22 v-osakaの登壇資料です。
かなり超初心者向けの内容です。
ショウノシオリ
June 22, 2017
Tweet
Share
More Decks by ショウノシオリ
See All by ショウノシオリ
Nuxt / Vue 開発でやりがちな 「読みづらい」「わかりづらい」コード
sshono1210
0
150
開発チームのリーダーとしてどうあるべきか?
sshono1210
2
1.1k
Nuxt.js のディレクトリ
sshono1210
0
2.7k
Nuxt.js で SSR 対応する
sshono1210
0
2.1k
array_merge と array_push の違いについて
sshono1210
0
370
全くデザインを勉強したことのないエンジニアが「なるほどデザイン」を読んで少しだけ勉強した話
sshono1210
0
170
Vue.js の methods と computed
sshono1210
0
81
すぐに使える ES2015 の基本構文3つ
sshono1210
0
48
肌で感じたディレクションとマネジメント
sshono1210
0
37
Other Decks in Programming
See All in Programming
Microservices rules (July 2024) : what good looks like
cer
PRO
0
1.6k
MIERUNE BBQにおけるユーザー中心設計()
mierune
PRO
1
110
CSC307 Lecture 05
javiergs
PRO
0
210
継続的な活動で築く地方エンジニアの道
myamashii
2
360
Xcode 16のPreviewModifierと@Previewableを活用した効率的なプレビュー方法の考察
ojun9
2
160
유연한 Composable 설계
l2hyunwoo
0
380
Google's Recipe for Scaling (Web) Security – LocoMocoSec 2024
lweichselbaum
0
170
日付と正規化
megmogmog1965
0
140
リハビリmruby
kishima
1
160
CSC307 Lecture 14
javiergs
PRO
0
220
Terraformテスト入門
msato
0
540
社内 LT 会を発足し、アウトプット文化を醸成させるために考えたこと・やったこと / Starting internal LT meetings and fostering an output culture
mackey0225
3
120
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
26
1.6k
The Language of Interfaces
destraynor
151
23k
GraphQLの誤解/rethinking-graphql
sonatard
59
9.6k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
248
20k
Building an army of robots
kneath
301
42k
Speed Design
sergeychernyshev
9
270
10 Git Anti Patterns You Should be Aware of
lemiorhan
652
58k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
18
1.2k
Code Reviewing Like a Champion
maltzj
517
39k
Clear Off the Table
cherdarchuk
89
320k
Making Projects Easy
brettharned
111
5.7k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
52k
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]