Slide 1

Slide 1 text

Vue/Nuxt小ネタ n連発 2019/09/19 Yumemi.vue #1 גࣜձࣾΏΊΈ தౡ ⁜

Slide 2

Slide 2 text

自己紹介 • גࣜձࣾΏΊΈ • ϦʔυϑϩϯτΤϯυΤϯδχΞ • ΏΊΈྺ7ϲ݄ • Vue͸͍͍ͧ

Slide 3

Slide 3 text

is Կʁ

Slide 4

Slide 4 text

ゆめみ is … • डୗձࣾʢ2000೥૑ۀʣ • جຊৗற͠ͳ͍ • ϞόΠϧ෼໺ʹڧ͍ • αʔόʔͱΞϓϦͷνʔϜ͕ओྗ • ϑϩϯτΤϯυ͸͜Ε͔Β

Slide 5

Slide 5 text

ゆめみの取引先

Slide 6

Slide 6 text

ゆめみの変な制度 • શһCEO੍౓ • ษڧ͠์୊੍౓ • ༗څऔΓ์୊੍౓ • ໺ࡊࢧڅ੍౓ ͳͲͳͲ

Slide 7

Slide 7 text

ৄ͘͠͸࠙਌ձͰʂ

Slide 8

Slide 8 text

Vue/Nuxt小ネタ n連発

Slide 9

Slide 9 text

動的コンポーネント差し替え • Λ࢖ͬͯ
 ݺͼग़͢ίϯϙʔωϯτΛಈతʹ੾Γସ͑ΒΕΔ • ΧςΰϦͳͲʹΑͬͯίϯϙʔωϯτΛग़͠෼͚Δ
 Έ͍ͨͳέʔεʹϑΟοτ • https://jp.vuejs.org/v2/guide/components-dynamic- async.html

Slide 10

Slide 10 text

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#ΦϒδΣΫτͷϓϩύ ςΟͷड͚౉͠

Slide 11

Slide 11 text

data: { imgObject: { src: "sample.jpg" alt: "αϯϓϧ" } } " αϯϓϧ ࣗ෼ͷ࡞ͬͨίϯϙʔωϯτͰ΋ಉ༷ɻจࣈྻҎ֎΋౉ͤΔ

Slide 12

Slide 12 text

filters • υΩϡϝϯτʹ৐ͬͯΔ͚Ͳ๨Ε͕ͪ
 {{ hoge | myFilter }} 
 Έ͍ͨͳܗͰؔ਺Λద༻Ͱ͖Δ • ϧʔϓ಺ͷ஋ͷՃ޻ʹಛʹศར • https://jp.vuejs.org/v2/guide/filters.html

Slide 13

Slide 13 text

Vue.nextTick() はawaitできる • nextTick() ͸ίʔϧόοΫ಺Ͱૢ࡞͢Δαϯϓϧ͕৐͍ͬͯΔ • Α͘ΈΔͱPromiseΛฦ͢ͷͰawait Ͱ͖Δ Vue.nextTick(() => { someLazyLogic(); }); await Vue.nextTick(); someLazyLogic();

Slide 14

Slide 14 text

nuxt-link と @click • ͸ @click ͩͱΠϕϯτ͕ൃՐ͠ͳ͍ • @click.native म০ࢠΛ͚ͭΔͱൃՐ͢ΔΑ͏ʹͳΔ
 ʢVue-routerͷ ΋ಉ༷ʣ

Slide 15

Slide 15 text

normal native

Slide 16

Slide 16 text

クエリの変化とライフサイクル • ϖʔδίϯϙʔωϯτมԽͤͣ
 ΫΤϦΛมԽͤ͞ΔͱԿͷϥΠϑαΠΫϧ΋ൃՐ͠ͳ͍ • nuxt͸watchQuery: boolean|Array ͱ͍͏ίϯϙʔωϯτΦϓγϣϯ͕ ͋Δ • asyncData, fetch͕ϑοΫ͞ΕΔΑ͏ʹͳΔ • https://ja.nuxtjs.org/api/pages-watchquery/

Slide 17

Slide 17 text

link1 link2 link3
export default{ watchQuery: ["l"], fetch(){ console.log("load hook") }, methods:{ link2(){ this.$router.push(“/?q=link2") }, link3(){ this.$router.push("/?l=link3") } } }

Slide 18

Slide 18 text

ブラウザバックすると画面が真っ白
 @iOS Safari • ΠϯεϖΫλͰݟΔݶΓDOM͸ߏ੒͞Ε͍ͯΔ • Կނ͔ը໘͕ਅͬനʹͳΔ͕ɺεΫϩʔϧ͢Δͱදࣔ͞ΕΔ • ݪҼ͸ෆ໌͕ͩϫʔΫΞϥ΢ϯυͱͯ͠
 scrollTo(0, 1) Ͱ1pxεΫϩʔϧ͢Δͱ͍͍ײ͡ʹ͸ͳΔ • https://github.com/vuejs/vue/issues/5533

Slide 19

Slide 19 text

Ҏ্ʂ

Slide 20

Slide 20 text

Enjoy Yumemi.vue