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

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

果物リン
September 19, 2019

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

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

果物リン

September 19, 2019
Tweet

More Decks by 果物リン

Other Decks in Technology

Transcript

  1. 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#ΦϒδΣΫτͷϓϩύ ςΟͷड͚౉͠
  2. <img v-bind="imgObject"> data: { imgObject: { src: "sample.jpg" alt: "αϯϓϧ"

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

    • ϧʔϓ಺ͷ஋ͷՃ޻ʹಛʹศར • https://jp.vuejs.org/v2/guide/filters.html
  4. <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>