Nuxtはいいぞ2 / nuxtjs is good 2

Nuxtはいいぞ2 / nuxtjs is good 2

994abc15f0cfc4010e8125dba1bcfae7?s=128

ちげ

May 02, 2020
Tweet

Transcript

  1. None
  2. ͪ͛ ʓө૾੍࡞ ʓ8FC αΠ τ੍࡞ ʓσβΠ ϯ͕ಘҙ ʓ࠷ۙ 'JHNBͰ 6*

    ࡞ͬ ͯΔ ʓ޷͖ͳήʔ Ϝ͸ .JOFDSBGU ʓण࢘͸פϒϦ ʓು͸͖͢ম͖͕޷͖ !$IJHF@
  3. ちげ @Chige12_ フォローする DIJHF Τΰα

  4. None
  5. None
  6. None
  7. ͥΜͿ

  8. None
  9. <body> <h1>λΠ τϧ ʂ </h1> <p>͜Μʹͪ͸ ʂ ͪ͛ͬ ͯݺΜͰͶ ʂ

    </p> <ul> <li>ण࢘</li> <li>͖͢ম͖</li> <li>ຣ஡</li> </ul> </body> λΠ τϧ ʂ ͜Μʹͪ͸ ʂ ͪ͛ͬ ͯݺΜͰͶ ʂ ɾ ण࢘ ɾ ͖͢ম͖ ɾ ຣ஡
  10. <body> <h1>λΠ τϧ ʂ </h1> <p>͜Μʹͪ͸ ʂ ͪ͛ͬ ͯݺΜͰͶ ʂ

    </p> <ul> <li>ण࢘</li> <li>͖͢ম͖</li> <li>ຣ஡</li> </ul> </body> λΠ τϧ ʂ ͜Μʹͪ͸ ʂ ͪ͛ͬ ͯݺΜͰͶ ʂ ɾ ण࢘ ɾ ͖͢ম͖ ɾ ຣ஡
  11. h1 { background: gray; color: white; } p { text-decoration:

    underline; } ul { list-style-type: decimal; } λΠ τϧ ʂ ͜Μʹͪ͸ ʂ ͪ͛ͬ ͯݺΜͰͶ ʂ ̍ ण࢘ ͖͢ম͖ ຣ஡
  12. var roop = 5 var hoge = "ϗήϗήʙ" var foo

    = "ϑΡʙʙ ʂ " for(var i=0; i < roop; i++){ if(i==3){ console.log(foo); }else{ console.log(hoge+i); } } ϗήϗήʙ ϗήϗήʙ ϗήϗήʙ ϑ Ρʙʙ ʂ  ϗήϗήʙ̐
  13. ϓϩήʔ τ Ͱֶ΂Δ αΠ τ੍࡞ͷୈҰา͸ ͜Ε͕ϕε τͩͱࢥ͏ɻ

  14. Ͱ΋͓ߴ͍ΜͰ͠ ΐ ʁ

  15. ͍͍͑ɺ ແྉͰ͢ QSPHDPN

  16. ࠷ॳͷελʔ τ͸͍͕ͭ͜Ұ൪Θ͔Γ ΍͍͢ αΠ τ࡞Γ ΍ͬͯΈΑ ͏͔ͳ ͬͯਓ͸ ͍ͭͰ΋๻ʹฉ͍ͯͶ

  17. None
  18. ࠷ۙͷ8FCࣄ৘

  19. None
  20. None
  21. ࠷ۙͷ8FCࣄ৘

  22. None
  23. None
  24. None
  25. None
  26. جຊ͸7VFKT ͭͷWVFϑ Ν Π ϧʹ )5.- $44 +4Λॻ͘ 7VFͷಠࣗهड़Ξ Ϧ

    <template> <!-- HTML --> </template> <script> // Javas Cript </script> <style> /* CSS */ </style> JOEFYWVF
  27. <template> <div v-for=”list in lists”> {{ list }} </div> </template>

    <script> export default { data(){ return{ lists : [”ΓΜ͝”,”Έ͔Μ”,”͍ͪ͝”] }}} </script> JOEFYWVF
  28. <template> <div v-for=”list in lists”> {{ list }} </div> </template>

    <script> export default { data(){ return{ lists : [”ΓΜ͝”,”Έ͔Μ”,”͍ͪ͝”] }}} </script> JOEFYWVF ഑ྻΛ͍ΕΔ
  29. <template> <div v-for=”list in lists”> {{ list }} </div> </template>

    <script> export default { data(){ return{ lists : [”ΓΜ͝”,”Έ͔Μ”,”͍ͪ͝”] }}} </script> JOEFYWVF ഑ྻͷத਎ ల։
  30. <template> <div v-for=”list in lists”> {{ list }} </div> </template>

    <script> export default { data(){ return{ lists : [”ΓΜ͝”,”Έ͔Μ”,”͍ͪ͝”] }}} </script> JOEFYWVF MJTUΛςΩε τͰදࣔ
  31. <template> <div v-for=”list in lists”> {{ list }} </div> </template>

    <div>ΓΜ͝</div> <div>Έ͔Μ</div> <div>͍ͪ͝</div> JOEFYWVF JOEFYIUNM [”ΓΜ͝”,”Έ͔Μ”,”͍ͪ͝”]
  32. ΓΜ͝ Έ͔Μ ͍ͪ͝ JOEFYIUNM

  33. <template> <div @click=”openMenu()”> Click! </div> <div v-if=”menu”> MENU </div> </template>

    <script> export default { data() { return { menu: false } }, methods: { JOEFYWVF
  34. <script> export default { data() { return { menu: false

    } }, methods: { openMenu() { this.menu = true } } } </script> JOEFYWVF PQFO.FOV ؔ਺͕࣮ߦ ͞Εͨ࣌ʹ USVF ʹ͢Δ
  35. DMJDL JOEFYIUNM

  36. .&/6 JOEFYIUNM DMJDL

  37. ˡ֎෦$44ͱ͔ը૾ͱ͔ ˡίϯϙʔωϯ τ ࢠ ˡϨΠ Ξ΢ τ Λઃఆ ˡϖʔδΛ࡞Δ ˡ7VFͷϓϥά

    Π ϯ ˡ੩తϑ Ν Π ϧஔ͖৔ ˡ7VFY࢖͏ ͱ ͖ ϑ Υϧμߏ଄ components assets layouts pages plugins static store
  38. JOEFYWVF BCPVUWVF DPOUBDUWVF IUUQTIPHFDPNJOEFY IUUQTIPHFDPNBCPVU IUUQTIPHFDPNDPOUBDU ˢQBHFTϑ Υϧμʹ7VFϑ Ν Π

    ϧΛ࡞Δ ͱ pages ͦͷ໊લͰϖʔδ͕Ͱ͖ Δ
  39. )FBEFSWVF ˡϝχϡʔͷཁૉ͚ͩॻ͘ component Ͳͷϖʔδ͔ΒͰ΋ݺͼग़ͤΔίϯϙʔωϯ τԽ <template> <Header></Header> </template> <script> JOEFYWVF

    <template> <Header></Header> </template> <script> BCPVUWVF
  40. EFGBVMUWVF ˡ֤ϖʔδʹڞ௨ͷ ɹσβΠ ϯ͕͋Δ࣌ʹར༻ ˡ͜ ͜ʹ֤ϖʔδ͕ೖΔ layouts Ͳͷϖʔδʹ΋࡞Δ.FOVͱ͔͸͜ ͜Ͱॻ͍͓ͯ͘ <template>

    <nuxt/> </template> <script> EFGBVMUWVF
  41. %PDVNFOU)5.-pMF -BZPVU 1BHF w BTZOD%BUB w NJEEMFXBSF w GFUDI w

    TDSPMM5P5PQ w IFBE w USBOTJUJPO w MBZPVU w WBMJEBUF 0QUJPOBM1BHF$IJME ίϯϙʔωϯ τ 0QUJPOBM 1BHF$IJME ίϯϙʔωϯ τ
  42. <img src=”~/assets/image.png”> import Menu from '~/components/Menu.vue'

  43. None
  44. <template lang=”pug”> .hoge pugͱ͔࢖͑·͢ </template> <style lang=”sass” scoped> .hoge {

    font-size: 30px; } </style>
  45. None
  46. 5IBOLZPVGPSMJTUFOJOH