Pro Yearly is on sale from $80 to $50! »

Vue.Nuxt 小ネタ集/ Vue and Nuxt Tips

69b4dadef85efe143ac825b62d36ed7c?s=47 果物リン
September 19, 2019

Vue.Nuxt 小ネタ集/ Vue and Nuxt Tips

VueとNuxtのさらっとした小ネタをおさらい

69b4dadef85efe143ac825b62d36ed7c?s=128

果物リン

September 19, 2019
Tweet

Transcript

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

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

  3. is Կʁ 

  4. ゆめみ is … • डୗձࣾʢ2000೥૑ۀʣ • جຊৗற͠ͳ͍ • ϞόΠϧ෼໺ʹڧ͍ •

    αʔόʔͱΞϓϦͷνʔϜ͕ओྗ • ϑϩϯτΤϯυ͸͜Ε͔Β
  5. ゆめみの取引先

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

  7. ৄ͘͠͸࠙਌ձͰʂ

  8. Vue/Nuxt小ネタ n連発

  9. 動的コンポーネント差し替え • <component :is="componentName"> Λ࢖ͬͯ
 ݺͼग़͢ίϯϙʔωϯτΛಈతʹ੾Γସ͑ΒΕΔ • ΧςΰϦͳͲʹΑͬͯίϯϙʔωϯτΛग़͠෼͚Δ
 Έ͍ͨͳέʔεʹϑΟοτ •

    https://jp.vuejs.org/v2/guide/components-dynamic- async.html
  10. 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#ΦϒδΣΫτͷϓϩύ ςΟͷड͚౉͠
  11. <img v-bind="imgObject"> data: { imgObject: { src: "sample.jpg" alt: "αϯϓϧ"

    } } " <img src="sample.jpg" alt="αϯϓϧ"> ࣗ෼ͷ࡞ͬͨίϯϙʔωϯτͰ΋ಉ༷ɻจࣈྻҎ֎΋౉ͤΔ
  12. filters • υΩϡϝϯτʹ৐ͬͯΔ͚Ͳ๨Ε͕ͪ
 {{ hoge | myFilter }} 
 Έ͍ͨͳܗͰؔ਺Λద༻Ͱ͖Δ

    • ϧʔϓ಺ͷ஋ͷՃ޻ʹಛʹศར • https://jp.vuejs.org/v2/guide/filters.html
  13. Vue.nextTick() はawaitできる • nextTick() ͸ίʔϧόοΫ಺Ͱૢ࡞͢Δαϯϓϧ͕৐͍ͬͯΔ • Α͘ΈΔͱPromiseΛฦ͢ͷͰawait Ͱ͖Δ Vue.nextTick(() =>

    { someLazyLogic(); }); await Vue.nextTick(); someLazyLogic();
  14. nuxt-link と @click • <nuxt-link>͸ @click ͩͱΠϕϯτ͕ൃՐ͠ͳ͍ • @click.native म০ࢠΛ͚ͭΔͱൃՐ͢ΔΑ͏ʹͳΔ


    ʢVue-routerͷ <router-link> ΋ಉ༷ʣ
  15. <nuxt-link @click="someMethod">normal</nuxt-link> <!-- ޮ͔ͳ͍ --> <nuxt-link @click.native="someMethod">native</nuxt-link> <!-- ޮ͘ -->

  16. クエリの変化とライフサイクル • ϖʔδίϯϙʔωϯτมԽͤͣ
 ΫΤϦΛมԽͤ͞ΔͱԿͷϥΠϑαΠΫϧ΋ൃՐ͠ͳ͍ • nuxt͸watchQuery: boolean|Array ͱ͍͏ίϯϙʔωϯτΦϓγϣϯ͕ ͋Δ •

    asyncData, fetch͕ϑοΫ͞ΕΔΑ͏ʹͳΔ • https://ja.nuxtjs.org/api/pages-watchquery/
  17. <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>
  18. ブラウザバックすると画面が真っ白
 @iOS Safari • ΠϯεϖΫλͰݟΔݶΓDOM͸ߏ੒͞Ε͍ͯΔ • Կނ͔ը໘͕ਅͬനʹͳΔ͕ɺεΫϩʔϧ͢Δͱදࣔ͞ΕΔ • ݪҼ͸ෆ໌͕ͩϫʔΫΞϥ΢ϯυͱͯ͠
 scrollTo(0,

    1) Ͱ1pxεΫϩʔϧ͢Δͱ͍͍ײ͡ʹ͸ͳΔ • https://github.com/vuejs/vue/issues/5533
  19. Ҏ্ʂ

  20. Enjoy Yumemi.vue