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
290
チンパンジーでもわかる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
2025-07-06 QGIS初級ハンズオン「はじめてのQGIS」
kou_kita
0
170
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
2
7.8k
改めてAWS WAFを振り返る~業務で使うためのポイント~
masakiokuda
2
270
DatabricksにOLTPデータベース『Lakebase』がやってきた!
inoutk
0
120
SEQUENCE object comparison - db tech showcase 2025 LT2
nori_shinoda
0
150
生成AI開発案件におけるClineの業務活用事例とTips
shinya337
0
260
LLM時代の検索
shibuiwilliam
2
340
ビズリーチが挑む メトリクスを活用した技術的負債の解消 / dev-productivity-con2025
visional_engineering_and_design
3
7.9k
fukabori.fm 出張版: 売上高617億円と高稼働率を陰で支えた社内ツール開発のあれこれ話 / 20250704 Yoshimasa Iwase & Tomoo Morikawa
shift_evolve
PRO
2
8k
成長し続けるアプリのためのテストと設計の関係、そして意思決定の記録。
sansantech
PRO
0
120
How Do I Contact HP Printer Support? [Full 2025 Guide for U.S. Businesses]
harrry1211
0
120
Reach American Airlines®️ Instantly: 19 Calling Methods for Fast Support in the USA
flyamerican
1
170
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Designing for Performance
lara
610
69k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Side Projects
sachag
455
42k
Done Done
chrislema
184
16k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
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もいいぞ