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
79
ある日オレオレフレームワークを作りたくなったぞ/Want to Create Oreore Framework
fruitriin
1
130
fishとfzfはじめて 豊かになりました / fish and fzf is good
fruitriin
1
880
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
後進育成のしくじり〜任せるスキルとリーダーシップの両立〜
matsu0228
6
2.2k
神回のメカニズムと再現方法/Mechanisms and Playbook for Kamikai scrumat2025
moriyuya
4
520
それでも私はContextに値を詰めたい | Go Conference 2025 / go conference 2025 fill context
budougumi0617
4
1.2k
extension 現場で使えるXcodeショートカット一覧
ktombow
0
210
AI時代だからこそ考える、僕らが本当につくりたいスクラムチーム / A Scrum Team we really want to create in this AI era
takaking22
6
3.3k
「技術負債にならない・間違えない」 権限管理の設計と実装
naro143
36
11k
PLaMo2シリーズのvLLM実装 / PFN LLM セミナー
pfn
PRO
2
970
「Verify with Wallet API」を アプリに導入するために
hinakko
1
230
SwiftUIのGeometryReaderとScrollViewを基礎から応用まで学び直す:設計と活用事例
fumiyasac0921
0
140
生成AIとM5Stack / M5 Japan Tour 2025 Autumn 東京
you
PRO
0
210
E2Eテスト設計_自動化のリアル___Playwrightでの実践とMCPの試み__AIによるテスト観点作成_.pdf
findy_eventslides
0
110
Where will it converge?
ibknadedeji
0
180
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.5k
Done Done
chrislema
185
16k
Become a Pro
speakerdeck
PRO
29
5.5k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
The Pragmatic Product Professional
lauravandoore
36
6.9k
For a Future-Friendly Web
brad_frost
180
9.9k
Automating Front-end Workflow
addyosmani
1371
200k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.2k
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