vuejs not showing the value inside {{ }} , the text is displayed as it is-CodePudding

I developed a vuejs program and run the npx serve command. I go to the directory and run npx serve. I browse the http://localhost:300/myvuefile.html , I get the following output only. {{count}} inside the button. My code :

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">
  <button @click="count  ">{{ count }}</button>
</div>

<script>
import { createApp } from 'vue'

const app = createApp({
  data() {
    return {
      count: 0
    }
  }
})

app.mount('#app')
</script>

I have to get the value of the count and onclick the count should increment. Instead I get the output as {{count}} only. Please help to fix this issue.

CodePudding user response：

According to the documentation-

When using the global build of Vue, all top-level APIs are exposed as properties on the global Vue object.

So, either use like this-

const app = Vue.createApp({
  data() {
    return {
      count: 0
    }
  }
})

app.mount('#app')

<div id="app">
  <button @click="count  ">{{ count }}</button>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

Or use like this-

const { createApp } = Vue

const app = createApp({
  data() {
    return {
      count: 0
    }
  }
})

app.mount('#app')

<div id="app">
  <button @click="count  ">{{ count }}</button>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>