Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Nuxtはいいぞ2 / nuxtjs is good 2

Nuxtはいいぞ2 / nuxtjs is good 2

ちげ

May 02, 2020
Tweet

More Decks by ちげ

Other Decks in Programming

Transcript

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

    ࡞ͬ ͯΔ ʓ޷͖ͳήʔ Ϝ͸ .JOFDSBGU ʓण࢘͸פϒϦ ʓು͸͖͢ম͖͕޷͖ !$IJHF@
  2. <body> <h1>λΠ τϧ ʂ </h1> <p>͜Μʹͪ͸ ʂ ͪ͛ͬ ͯݺΜͰͶ ʂ

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

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

    underline; } ul { list-style-type: decimal; } λΠ τϧ ʂ ͜Μʹͪ͸ ʂ ͪ͛ͬ ͯݺΜͰͶ ʂ ̍ ण࢘ ͖͢ম͖ ຣ஡
  5. 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); } } ϗήϗήʙ ϗήϗήʙ ϗήϗήʙ ϑ Ρʙʙ ʂ  ϗήϗήʙ̐
  6. جຊ͸7VFKT ͭͷWVFϑ Ν Π ϧʹ )5.- $44 +4Λॻ͘ 7VFͷಠࣗهड़Ξ Ϧ

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

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

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

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

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

    <div>ΓΜ͝</div> <div>Έ͔Μ</div> <div>͍ͪ͝</div> JOEFYWVF JOEFYIUNM [”ΓΜ͝”,”Έ͔Μ”,”͍ͪ͝”]
  12. <template> <div @click=”openMenu()”> Click! </div> <div v-if=”menu”> MENU </div> </template>

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

    } }, methods: { openMenu() { this.menu = true } } } </script> JOEFYWVF PQFO.FOV ؔ਺͕࣮ߦ ͞Εͨ࣌ʹ USVF ʹ͢Δ
  14. ˡ֎෦$44ͱ͔ը૾ͱ͔ ˡίϯϙʔωϯ τ ࢠ ˡϨΠ Ξ΢ τ Λઃఆ ˡϖʔδΛ࡞Δ ˡ7VFͷϓϥά

    Π ϯ ˡ੩తϑ Ν Π ϧஔ͖৔ ˡ7VFY࢖͏ ͱ ͖ ϑ Υϧμߏ଄ components assets layouts pages plugins static store
  15. %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 ίϯϙʔωϯ τ