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.Nuxt 小ネタ集/ Vue and Nuxt Tips
Search
果物リン
September 19, 2019
Technology
2
520
Vue.Nuxt 小ネタ集/ Vue and Nuxt Tips
VueとNuxtのさらっとした小ネタをおさらい
果物リン
September 19, 2019
Tweet
Share
More Decks by 果物リン
See All by 果物リン
Electron+Vue+Swift=真のデスクトップアプリ / How to create "Really" desktop app using Electron
fruitriin
0
76
ある日オレオレフレームワークを作りたくなったぞ/Want to Create Oreore Framework
fruitriin
1
120
fishとfzfはじめて 豊かになりました / fish and fzf is good
fruitriin
1
860
Chrome Devtools使いこなしたい/I want to master devtool
fruitriin
3
1.5k
Event Stage - 真面目に作ったけど 全くウケなくてクソだったアプリ/I made new service but they say shit
fruitriin
0
170
読み上げチャット+映像配信サービス作ってるけど…/I develop Text-to-Speach chat and broadcast Savice but...
fruitriin
0
140
とある自社開発の苦楽の軌跡/Trajectory of a Certain In-house Development Effort
fruitriin
1
250
動画再生速度を変更するコンポーネントを作ろうとして諦めた話/talk about give up to create video with playback-rate controller
fruitriin
6
930
Soft Skillsから伝えたい新人時代の個人開発技術選定/Selecting Stack for Personal Development as a from Soft Skills
fruitriin
2
360
Other Decks in Technology
See All in Technology
[CV勉強会@関東 CVPR2025 読み会] MegaSaM: Accurate, Fast, and Robust Structure and Motion from Casual Dynamic Videos (Li+, CVPR2025)
abemii
0
200
新卒(ほぼ)専業Kagglerという選択肢
nocchi1
1
2.4k
人を動かすことについて考える
ichimichi
2
330
広島発!スタートアップ開発の裏側
tsankyo
0
250
Backboneとしてのtimm2025
yu4u
4
1.6k
会社にデータエンジニアがいることでできるようになること
10xinc
9
1.6k
浸透しなさいRFC 5322&7208
hinono
0
120
TypeScript入門
recruitengineers
PRO
24
7.6k
AIエージェント就活入門 - MCPが履歴書になる未来
eltociear
0
550
Goでマークダウンの独自記法を実装する
lag129
0
220
LLMエージェント時代に適応した開発フロー
hiragram
1
420
アジャイルテストで高品質のスプリントレビューを
takesection
0
120
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
Designing for humans not robots
tammielis
253
25k
Typedesign – Prime Four
hannesfritz
42
2.8k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Scaling GitHub
holman
462
140k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Cost Of JavaScript in 2023
addyosmani
53
8.8k
A Modern Web Designer's Workflow
chriscoyier
695
190k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Why Our Code Smells
bkeepers
PRO
338
57k
Transcript
Vue/Nuxt小ネタ n連発 2019/09/19 Yumemi.vue #1 גࣜձࣾΏΊΈ தౡ ⁜
自己紹介 • גࣜձࣾΏΊΈ • ϦʔυϑϩϯτΤϯυΤϯδχΞ • ΏΊΈྺ7ϲ݄ • Vue͍͍ͧ
is Կʁ
ゆめみ is … • डୗձࣾʢ2000ۀʣ • جຊৗற͠ͳ͍ • ϞόΠϧʹڧ͍ •
αʔόʔͱΞϓϦͷνʔϜ͕ओྗ • ϑϩϯτΤϯυ͜Ε͔Β
ゆめみの取引先
ゆめみの変な制度 • શһCEO੍ • ษڧ͠์੍ • ༗څऔΓ์੍ • ࡊࢧڅ੍ ͳͲͳͲ
ৄ࠙͘͠ձͰʂ
Vue/Nuxt小ネタ n連発
動的コンポーネント差し替え • <component :is="componentName"> Λͬͯ ݺͼग़͢ίϯϙʔωϯτΛಈతʹΓସ͑ΒΕΔ • ΧςΰϦͳͲʹΑͬͯίϯϙʔωϯτΛग़͚͠Δ Έ͍ͨͳέʔεʹϑΟοτ •
https://jp.vuejs.org/v2/guide/components-dynamic- async.html
v-bind="object" • ී௨props down ͢Δ࣌ v-bind:prop="Hoge" ͱ͢Δ ʢ͘͠γϣʔτϋϯυͰ :prop=“Hoge”ʣ •
ίϯϙʔωϯτʹόΠϯυ͢Δม͕૿͖͑ͯͨͱ͖ v-bind="object" ͱ͢Δͱ·ͱΊͯͤΔ ʢkeyଐੑͱͯ͠શͯ props down ͞ΕΔʣ • https://jp.vuejs.org/v2/guide/components-props.html#ΦϒδΣΫτͷϓϩύ ςΟͷड͚͠
<img v-bind="imgObject"> data: { imgObject: { src: "sample.jpg" alt: "αϯϓϧ"
} } " <img src="sample.jpg" alt="αϯϓϧ"> ࣗͷ࡞ͬͨίϯϙʔωϯτͰಉ༷ɻจࣈྻҎ֎ͤΔ
filters • υΩϡϝϯτʹͬͯΔ͚ͲΕ͕ͪ {{ hoge | myFilter }} Έ͍ͨͳܗͰؔΛద༻Ͱ͖Δ
• ϧʔϓͷͷՃʹಛʹศར • https://jp.vuejs.org/v2/guide/filters.html
Vue.nextTick() はawaitできる • nextTick() ίʔϧόοΫͰૢ࡞͢Δαϯϓϧ͕͍ͬͯΔ • Α͘ΈΔͱPromiseΛฦ͢ͷͰawait Ͱ͖Δ Vue.nextTick(() =>
{ someLazyLogic(); }); await Vue.nextTick(); someLazyLogic();
nuxt-link と @click • <nuxt-link> @click ͩͱΠϕϯτ͕ൃՐ͠ͳ͍ • @click.native म০ࢠΛ͚ͭΔͱൃՐ͢ΔΑ͏ʹͳΔ
ʢVue-routerͷ <router-link> ಉ༷ʣ
<nuxt-link @click="someMethod">normal</nuxt-link> <!-- ޮ͔ͳ͍ --> <nuxt-link @click.native="someMethod">native</nuxt-link> <!-- ޮ͘ -->
クエリの変化とライフサイクル • ϖʔδίϯϙʔωϯτมԽͤͣ ΫΤϦΛมԽͤ͞ΔͱԿͷϥΠϑαΠΫϧൃՐ͠ͳ͍ • nuxtwatchQuery: boolean|Array ͱ͍͏ίϯϙʔωϯτΦϓγϣϯ͕ ͋Δ •
asyncData, fetch͕ϑοΫ͞ΕΔΑ͏ʹͳΔ • https://ja.nuxtjs.org/api/pages-watchquery/
<template> <div> <nuxt-link to="/?q=link1">link1</nuxt-link> <span @click="link2">link2</span> <span @click="link3">link3</span> </div> </template>
<script> export default{ watchQuery: ["l"], fetch(){ console.log("load hook") }, methods:{ link2(){ this.$router.push(“/?q=link2") }, link3(){ this.$router.push("/?l=link3") } } } </script>
ブラウザバックすると画面が真っ白 @iOS Safari • ΠϯεϖΫλͰݟΔݶΓDOMߏ͞Ε͍ͯΔ • Կނ͔ը໘͕ਅͬനʹͳΔ͕ɺεΫϩʔϧ͢Δͱදࣔ͞ΕΔ • ݪҼෆ໌͕ͩϫʔΫΞϥϯυͱͯ͠ scrollTo(0,
1) Ͱ1pxεΫϩʔϧ͢Δͱ͍͍ײ͡ʹͳΔ • https://github.com/vuejs/vue/issues/5533
Ҏ্ʂ
Enjoy Yumemi.vue