To get started with Vue.js, building a simple component is a great way to understand how it works. This article provides a beginner-friendly example: create a component called CounterButton that displays a button and tracks clicks. The specific steps are as follows: 1. Introduce Vue 3 in the HTML file and load it through CDN; 2. Use defineComponent to define the component, where the data function returns the count state; 3. Use the @click directive to bind the click event and display the current count with {{ count }}; 4. Create a Vue application and register the component; 5. Mount it to the #app container. Key points include: component encapsulation logic and UI, data responsive update view, template syntax binding events and data. This structure is suitable for interactive scenarios such as the Like button, topic switching, or form verification. It is recommended to keep the template simple and functional isolation. After mastering this mode, you can further learn props, calculation attributes and other functions.

If you're just getting started with Vue.js, building a simple component is a great way to understand how Vue works. A component is basically a reusable piece of UI that can have its own logic and structure. Here's a beginner-friendly example of a basic Vue component that you can try in your local setup or even in an online editor like CodePen.

What You Need Before Starting

Before diving into the code, make sure you have:

• A basic HTML file set up
• Vue 3 loaded via CDN (for quick start)
• A script tag where you'll write your Vue code

You don't need a build tool or a complex setup for this example — just a simple HTML file with Vue included.

Creating Your First Component: CounterButton

One of the most common first examples when learning Vue is a counter. It shows how data changes and how Vue automatically updates the view.

Here's how you can define a simple CounterButton component:

 <div id="app">
  <counter-button></counter-button>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const { createApp, defineComponent } = Vue;

  const CounterButton = defineComponent({
    data() {
      return {
        count: 0
      };
    },
    template: `
      <button @click="count ">
        Clicked {{ count }} times
      </button>
    `
  });

  const app = createApp({});
  app.component(&#39;CounterButton&#39;, CounterButton);
  app.mount(&#39;#app&#39;);
</script>

This will display a button that increases a number every time it's clicked. The key points here are:

• We use defineComponent to create a reusable component
• The data function returns the internal state ( count )
• The template uses Vue's direct syntax ( @click ) and reactive data binding ( {{ count }} )

Breaking Down the Structure

Let's take a closer look at what each part does:

• Data : This is where your component stores its internal state. In this case, we're tracking how many times the button has been clicked.
• Template : This is the HTML that Vue will render. You can bind data directly inside double curly braces {{ }} .
• Methods : While not shown here, methods would go under a methods option and are used for more complex logic.
• Events : The @click direct listens for a click event and runs some code when it happens.

This structure makes it easy to understand how Vue keeps things dynamic and connected.

How to Use This in Real Life

You might not always want a standalone counter, but the idea applies to many interactive elements. For example:

• A "like" button on a post
• A toggle switch for dark/light mode
• A form validation indicator

In all these cases, you track a value and update the UI based on user interaction.

Just remember:

• Keep your templates clean and focused
• Don't overcomplicate the logic inside templates
• Use components to isolate functionality

That's really all there is to a basic Vue component. It doesn't need to be complicated to be useful. Once you get comfortable with this pattern, you can start adding more features like props, computed properties, and even transitions. But for now, this should give you a solid foundation to build from.

Basically that's it.

The above is the detailed content of Simple Vue component example for beginners. For more information, please follow other related articles on the PHP Chinese website!