vuejs n'affiche pas la valeur dans {{ }}, le texte est affiché tel quel

Question

J'ai développé un programme vuejs et exécuté la commande npxserve Je vais dans ce répertoire et lance npxserve. Je parcoure http://localhost:300/myvuefile.html et j'obtiens uniquement le résultat suivant. {{count}} à l'intérieur du bouton. Mon code :

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

<div id="application">
  <bouton @click="count++">{{ count }}</button>
</div>

<script>
importer { createApp } depuis 'vue'

const app = créerApp({
  données() {
    retour {
      compte : 0
    }
  }
})

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

Je dois obtenir la valeur du décompte et, au clic, le décompte doit être incrémenté. Au lieu de cela, je n'obtiens que {{count}} en sortie. S'il vous plaît, aidez-nous à résoudre ce problème.

Answer 1

Basé sur documentation-

Alors, soit utilisez-le comme ça -

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>