Component

overview

Vue.js has a feature called components. A component is a named, reusable Vue.js instance. Once created, it can be reused for other functions. This concept is also adopted by other JavaScript frameworks and is one of the very important concepts.

Component creation

Now let’s create the component.

<html>
<head>
    <title>Hello World</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
</head>
<body>
    <div id="components_helloworld">
        <hello-world></hello-world>
        <hello-world></hello-world>
        <hello-world></hello-world>
    </div>
<script>
Vue.component('hello-world', {
    data: function () {
        return {
            message: "Hello World"
        }
    },
    template: '<h1>{{message}}</h1>'
})
new Vue({ el: '#components_helloworld' })
</script>
</body>
</html>

The display results are as follows.

The code above creates a component that displays the text “Hello World” and reuses it three times. The definition part of the component looks like this:

Vue.component('hello-world', {
data: function() {
  return {
    message: "Hello World"
  };
},
template: '<h1>{{ message }}</h1>'
});

I am using Vue.component to register a component with the name hello-world . template defines the HTML to include in the component. This time, the component contains HTML that displays the message defined in the data object.

Also note that the component’s data option must be a function. This is so that each instance has an independent copy of the data object.

The above is how to implement a minimal configuration of Hello World using Vue.js. By all means, please move your hands and try it yourself. You can download it here.

https://github.com/wiblok/Vue.js

That’s it, Vue.js introduction | Try outputting text with the minimum configuration! was.

Component

overview #

Component creation #

overview

Component creation