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
490
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
21
ある日オレオレフレームワークを作りたくなったぞ/Want to Create Oreore Framework
fruitriin
1
76
fishとfzfはじめて 豊かになりました / fish and fzf is good
fruitriin
1
710
Chrome Devtools使いこなしたい/I want to master devtool
fruitriin
3
1.4k
Event Stage - 真面目に作ったけど 全くウケなくてクソだったアプリ/I made new service but they say shit
fruitriin
0
150
読み上げチャット+映像配信サービス作ってるけど…/I develop Text-to-Speach chat and broadcast Savice but...
fruitriin
0
99
とある自社開発の苦楽の軌跡/Trajectory of a Certain In-house Development Effort
fruitriin
1
220
動画再生速度を変更するコンポーネントを作ろうとして諦めた話/talk about give up to create video with playback-rate controller
fruitriin
6
870
Soft Skillsから伝えたい新人時代の個人開発技術選定/Selecting Stack for Personal Development as a from Soft Skills
fruitriin
2
350
Other Decks in Technology
See All in Technology
コンテンツを支える 若手ゲームクリエイターの アートディレクションの事例紹介 / cagamefi-game
cyberagentdevelopers
PRO
1
130
[AWS JAPAN 生成AIハッカソン] Dialog の紹介
yoshimi0227
0
150
オニオンアーキテクチャで実現した 本質課題を解決する インフラ移行の実例
hryushm
14
3k
使えそうで使われないCloudHSM
maikamibayashi
0
170
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
9
120k
なんで、私がAWS Heroに!? 〜社外の広い世界に一歩踏み出そう〜
minorun365
PRO
6
1.1k
GitHub Universe: Evaluating RAG apps in GitHub Actions
pamelafox
0
170
Emacs x Nostr
hakkadaikon
1
150
Apple/Google/Amazonの決済システムの違いを踏まえた定期購読課金システムの構築 / abema-billing-system
cyberagentdevelopers
PRO
1
220
プロダクトエンジニアが活躍する環境を作りたくて 事業責任者になった話 ~プロダクトエンジニアの行き着く先~
gimupop
1
480
日経電子版におけるリアルタイムレコメンドシステム開発の事例紹介/nikkei-realtime-recommender-system
yng87
1
500
VPC間の接続方法を整理してみた #自治体クラウド勉強会
non97
1
820
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.8k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
Into the Great Unknown - MozCon
thekraken
31
1.5k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
27
4.2k
Agile that works and the tools we love
rasmusluckow
327
21k
Building Your Own Lightsaber
phodgson
102
6k
GraphQLの誤解/rethinking-graphql
sonatard
66
9.9k
The Art of Programming - Codeland 2020
erikaheidi
51
13k
The Cult of Friendly URLs
andyhume
78
6k
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