Pratique d'apprentissage Vue : créer un compteur simple

<p>Vue est un framework JavaScript léger avec une utilisation élevée et des fonctions puissantes dans le développement front-end, en particulier dans le développement d'applications monopage. La courbe d'apprentissage de Vue est relativement fluide, facile à démarrer et la documentation est très détaillée. Il existe également un grand nombre de didacticiels et de cas sur Internet à titre de référence.

<p>Le premier exemple de Vue consiste à créer un compteur simple, qui est principalement utilisé pour introduire l'utilisation de base de Vue. Jetons-y un coup d’œil ensemble.

<p>Tout d'abord, introduisez le fichier Vue JS dans la page HTML :

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<p> Ensuite, définissez une zone de compteur dans le HTML et ajoutez deux boutons, un pour augmenter la valeur du compteur et un pour diminuer la valeur du compteur :

<div id="app">
  <p>计数器的值是：{{ counter }}</p>
  <button v-on:click="add">增加</button>
  <button v-on:click="minus">减少</button>
</div>

<p>En haut de cette zone, nous définissons une balise <p> pour afficher la valeur du compteur, qui est liée ici via la syntaxe {{}} Les données de Vue est la valeur de la variable counter. Dans les deux boutons, nous avons respectivement lié les méthodes add et minus et spécifié l'événement de clic v-on:click. <p>标签用于显示计数器的值，这里通过{{}}语法来绑定Vue的数据，即counter变量的值。在两个按钮里，我们分别绑定了add和minus方法，并指定了点击事件v-on:click。

<p>最后，在JavaScript中定义Vue实例，并且定义counter变量和对应的方法：

new Vue({
  el: '#app',
  data: {
    counter: 0
  },
  methods: {
    add: function() {
      this.counter++;
    },
    minus: function() {
      this.counter--;
    }
  }
})

<p>在这里，我们定义了一个Vue实例，它的el属性指定了Vue要控制的区域，即前文定义的id="app"的DIV区域。data属性中定义了counter变量和初始值为0。methods

Enfin, définissez l'instance de Vue en JavaScript, et définissez la variable counter et la méthode correspondante : <p>rrreee

Ici, nous définissons une instance de Vue, son el L'attribut précise la zone à contrôler par Vue, c'est-à-dire la zone DIV de id="app" définie précédemment. La variable counter est définie dans l'attribut data et sa valeur initiale est 0. Deux méthodes sont définies dans l'attribut methods, une pour augmenter la valeur du compteur et une pour décrémenter la valeur du compteur. <p>

Maintenant, lorsqu'on ouvre la page HTML, on peut voir qu'un compteur apparaît sur la page, avec une valeur initiale de 0. Lorsque nous cliquons sur le bouton "Augmenter", la valeur du compteur augmentera de 1 ; lorsque nous cliquons sur le bouton "Diminuer", la valeur du compteur diminuera de 1. C'est le premier exemple de Vue. 🎜🎜Vue a encore un long chemin à parcourir dans l'apprentissage, mais grâce à ce simple contre-exemple, nous pouvons avoir une compréhension générale de l'utilisation de base de Vue. Ensuite, nous pouvons continuer à apprendre les composants, instructions, filtres et autres utilisations avancées de Vue pour rendre le développement front-end plus facile et plus efficace. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!