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
500
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
40
ある日オレオレフレームワークを作りたくなったぞ/Want to Create Oreore Framework
fruitriin
1
86
fishとfzfはじめて 豊かになりました / fish and fzf is good
fruitriin
1
780
Chrome Devtools使いこなしたい/I want to master devtool
fruitriin
3
1.5k
Event Stage - 真面目に作ったけど 全くウケなくてクソだったアプリ/I made new service but they say shit
fruitriin
0
160
読み上げチャット+映像配信サービス作ってるけど…/I develop Text-to-Speach chat and broadcast Savice but...
fruitriin
0
120
とある自社開発の苦楽の軌跡/Trajectory of a Certain In-house Development Effort
fruitriin
1
230
動画再生速度を変更するコンポーネントを作ろうとして諦めた話/talk about give up to create video with playback-rate controller
fruitriin
6
900
Soft Skillsから伝えたい新人時代の個人開発技術選定/Selecting Stack for Personal Development as a from Soft Skills
fruitriin
2
350
Other Decks in Technology
See All in Technology
JEDAI Meetup! Databricks AI/BI概要
databricksjapan
0
310
データベースの負荷を紐解く/untangle-the-database-load
emiki
1
440
入門 PEAK Threat Hunting @SECCON
odorusatoshi
0
110
手を動かしてレベルアップしよう!
maruto
0
170
AWS Well-Architected Frameworkで学ぶAmazon ECSのセキュリティ対策
umekou
2
130
「正しく」失敗できる チームの作り方 〜リアルな事例から紐解く失敗を恐れない組織とは〜 / A team that can fail correctly
i35_267
4
780
設計を積み重ねてシステムを刷新する
sansantech
PRO
0
150
Raycast Favorites × Script Command で実現するお手軽情報チェック
smasato
1
140
エンジニアが加速させるプロダクトディスカバリー 〜最速で価値ある機能を見つける方法〜 / product discovery accelerated by engineers
rince
4
550
Active Directory攻防
cryptopeg
PRO
8
5.3k
Cracking the Coding Interview 6th Edition
gdplabs
14
28k
1行のコードから社会課題の解決へ: EMの探究、事業・技術・組織を紡ぐ実践知 / EM Conf 2025
9ma3r
8
3.3k
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
250
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
Building a Scalable Design System with Sketch
lauravandoore
461
33k
Code Reviewing Like a Champion
maltzj
521
39k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Writing Fast Ruby
sferik
628
61k
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