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
82
ある日オレオレフレームワークを作りたくなったぞ/Want to Create Oreore Framework
fruitriin
1
130
fishとfzfはじめて 豊かになりました / fish and fzf is good
fruitriin
1
890
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
150
とある自社開発の苦楽の軌跡/Trajectory of a Certain In-house Development Effort
fruitriin
1
250
動画再生速度を変更するコンポーネントを作ろうとして諦めた話/talk about give up to create video with playback-rate controller
fruitriin
6
940
Soft Skillsから伝えたい新人時代の個人開発技術選定/Selecting Stack for Personal Development as a from Soft Skills
fruitriin
2
360
Other Decks in Technology
See All in Technology
AI駆動で進める依存ライブラリ更新 ─ Vue プロジェクトの品質向上と開発スピード改善の実践録
sayn0
1
340
Zero Trust DNS でより安全なインターネット アクセス
murachiakira
0
110
プレイドのユニークな技術とインターンのリアル
plaidtech
PRO
1
490
ゼロコード計装導入後のカスタム計装でさらに可観測性を高めよう
sansantech
PRO
1
540
.NET 10のBlazorの期待の新機能
htkym
0
150
アノテーション作業書作成のGood Practice
cierpa0905
PRO
0
260
ラスベガスの歩き方 2025年版(re:Invent 事前勉強会)
junjikoide
0
550
re:Inventに行くまでにやっておきたいこと
nagisa53
0
710
RemoteFunctionを使ったコロケーション
mkazutaka
1
140
20251027_findyさん_音声エージェントLT
almondo_event
2
490
猫でもわかるAmazon Q Developer CLI 解体新書
kentapapa
1
140
webpack依存からの脱却!快適フロントエンド開発をViteで実現する #vuefes
bengo4com
4
3.7k
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
1k
Writing Fast Ruby
sferik
630
62k
Navigating Team Friction
lara
190
15k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
What's in a price? How to price your products and services
michaelherold
246
12k
Music & Morning Musume
bryan
46
6.9k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
31
2.9k
Designing for humans not robots
tammielis
254
26k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
34
2.5k
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.9k
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