petite-vue sample 7

Global {{ store.count }}

Local {{ localCount }}

<script type="module">
import { createApp, reactive } from 'https://unpkg.com/petite-vue?module'

const store = reactive({
  count: 0,
  inc() {
    this.count++
  }
})

// manipulate it here
store.inc()

createApp({
  // share it with app scopes
  store
}).mount()
</script>

<div v-scope="{ localCount: 0 }">
  <p>Global {{ store.count }}</p>
  <button @click="store.inc">+1</button>

  <p>Local {{ localCount }}</p>
  <button @click="localCount++">+1</button>
</div>

元記事を表示する