petite-vue sample 4

<script type="module">
import { createApp } from 'https://unpkg.com/petite-vue?module'

function Counter(props) {
  return {
    count: props.initialCount,
    inc() {
      this.count++
    },
    mounted() {
      console.log(`I'm mounted!`)
    }
  }
}

createApp({
  Counter
}).mount()
</script>

<div v-scope="Counter({ initialCount: 1 })" @mounted="mounted">
  <p>{{ count }}</p>
  <button @click="inc">+1</button>
</div>

<div v-scope="Counter({ initialCount: 2 })">
  <p>{{ count }}</p>
  <button @click="inc">+1</button>
</div>

元記事を表示する