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
Fukuda Naoto
August 29, 2018
Technology
1
300
チンパンジーでもわかるVue.js
デジコン合宿
Fukuda Naoto
August 29, 2018
Tweet
Share
More Decks by Fukuda Naoto
See All by Fukuda Naoto
Git&GitHub勉強会
never9612
0
120
Other Decks in Technology
See All in Technology
PdM業務における使い分け
shinshiro
0
670
少人数でも回る! DevinとPlaybookで支える運用改善
ishikawa_pro
4
1.7k
Datasets for Critical Operations by Dataform
kimujun
0
120
完璧を目指さない小さく始める信頼性向上
kakehashi
PRO
0
110
Step Functions First - サーバーレスアーキテクチャの新しいパラダイム
taikis
1
280
Webの技術とガジェットで那須の子ども達にワクワクを! / IoTLT_20250720
you
PRO
0
130
2025-07-25 NOT A HOTEL TECH TALK ━ スマートホーム開発の最前線 ━ SOFTWARE
wakinchan
0
170
地域コミュニティへの「感謝」と「恩返し」 / 20250726jawsug-tochigi
kasacchiful
0
100
激動の時代、新卒エンジニアはAIツールにどう向き合うか。 [LayerX Bet AI Day Countdown LT Day1 ツールの選択]
tak848
0
610
複数のGemini CLIが同時開発する狂気 - Jujutsuが実現するAIエージェント協調の新世界
gunta
13
3.8k
From Live Coding to Vibe Coding with Firebase Studio
firebasethailand
1
310
【CEDEC2025】現場を理解して実現!ゲーム開発を効率化するWebサービスの開発と、利用促進のための継続的な改善
cygames
PRO
0
370
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
329
21k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Facilitating Awesome Meetings
lara
54
6.5k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.4k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
What's in a price? How to price your products and services
michaelherold
246
12k
Designing for humans not robots
tammielis
253
25k
Transcript
チンパンジーでもわかるVue.js
そもそもVue.jsってなんぞや
うるせ~~! 知らね~~!
これまでのWebページ .htmlファイルにHTMLを書く ↓ CSSで見た目を整える ↓ JS(またはJQuery)で動きをつけたりサーバとの通信したり
Vue.jsだと なんかJSとHTMLがうまい感じにつながってくれる (双方向バインディング)
とりあえず手を動かせ index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>
チンパンジーでもわかるVue.js</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" </head> <body> <div id="app"> <p>{{ message }}</p> </div> <script src="script.js"></script> </body> </html>
script.js const app = new Vue({ el: '#app', data: {
message: 'Hello Vue!' } })
テキストボックスで双方向バインディングを 感じろ <div id="app"> <input v-model="message" /> <p>{{ message }}</p>
</div>
クリックしたときのアクション <div id="app"> <input v-model="message" /> <button v-on:click="deleteString"> 削除</button> <p>{{
message }}</p> </div> const app = new Vue({ el: '#app', data: { message: 'Hello Vue!' }, methods: { deleteString: function(){ this.message = ''; } } })
HTMLタグの属性に変数使いたくない? <div id="app"> <input v-model="message" v-bind:maxlength="maxLength"/> <button v-on:click="deleteString"> 削除</button> <progress
v-bind:max="maxLength" v-bind:value="message.length <p>{{ message }}</p> </div
data: { message: 'Hello Vue!', maxLength: 20, }
ここまでのディレクティブまとめ v‑on:イベント v‑bind:属性 v‑model 実はv‑onとv‑bindを組み合わせているだけ
Q.いちいち書くのめんどくさい A.v‑onとv‑bindは短縮記法あるで <button v-on:click="deleteString"> 削除</button> <progress v-bind:max="maxLength" v-bind:value="message.length" <button @click="deleteString">
削除</button> <progress :max="maxLength" :value="message.length"></progress>
要素の表示・非表示を操れ methods: { deleteString: function(){ this.message = ''; }, toggleVisible:
function(){ this.isVisible = !this.isVisible; } } <button @click="toggleVisible">{{ isVisible ? ' 非表示' : ' 表示' <p v-if="isVisible">{{ message }}</p>
超便利!配列を展開する <ol> <li v-for='animal in animals'>{{ animal }}</li> </ol> data:
{ message: 'Hello Vue!', maxLength: 20, animals:[' チンパンジー',' ゴリラ',' サル'] }
ディレクティブまとめ v‑if trueで要素表示、falseで要素非表示 v‑for 配列の要素 in 配列 で配列の文だけHTMLの要素が展開される
まとめ Vue.jsはいいぞ Reactもいいぞ