Vue learning practice: create a simple counter

<p>Vue is a lightweight JavaScript framework with high usage and powerful functions in front-end development, especially in the development of single-page applications. Vue's learning curve is relatively smooth, easy to get started, and the documentation is very detailed. There are also a large number of tutorials and cases on the Internet for reference.

<p>The first example of Vue is to create a simple counter, which is mainly used to introduce the basic use of Vue. Let’s take a look at it together.

<p>First, introduce the Vue JS file into the HTML page:

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

<p>Then, define a counter area in the HTML and add two buttons, one for increasing the value of the counter, A value used to decrement the counter:

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

<p>At the top of this area, we define a <p> label to display the counter value, here passed { {}} syntax to bind Vue data, that is, the value of the counter variable. In the two buttons, we bound the add and minus methods respectively, and specified the click event v-on:click.

<p>Finally, define the Vue instance in JavaScript, and define counter variables and corresponding methods:

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

<p>Here, we define a Vue instance, its# The ##el attribute specifies the area to be controlled by Vue, that is, the DIV area with id="app" defined above. The counter variable is defined in the data attribute and its initial value is 0. methodsTwo methods are defined in the attribute, one is used to increase the value of the counter, and the other is used to decrease the value of the counter.

Now, when we open the HTML page, we can see that a counter appears on the page, with an initial value of 0. When we click the "Increase" button, the counter value will increase by 1; when we click the "Decrease" button, the counter value will decrease by 1. This is the first example of Vue. <p>

There is still a long way to go in learning Vue, but through this simple counter example, we can have a general understanding of the basic usage of Vue. Next, we can continue to learn Vue’s components, instructions, filters and other advanced usage to make front-end development easier and more efficient. <p>

The above is the detailed content of Vue learning practice: create a simple counter. For more information, please follow other related articles on the PHP Chinese website!