Header Ads

Learn Vue.js Step By Step: Components


In our previous lesson we've learned about computed properties and watchers. In this lesson we will be talking about components. Components will give you the ability to make your own custom HTML element that can be use anywhere in your application.

Let's say we want a dropdown element:
<!DOCTYPE html>
<html>
<head>
<title>Learn Vue.js Step By Step: Components</title>
</head>
<body>
    <div id="app">
        <dropdown></dropdown>
    </div>

    <script src="https://unpkg.com/vue"></script>
    <script>
        var template = `<ul>
                            <li>Menu 1</li>
                            <li>Menu 2</li>
                        </ul>`;

        Vue.component('dropdown', {
            template: template
        });

        new Vue({
            el: '#app'
        })
    </script>
</body>
</html>
What we're doing here is we used the Vue's component method and we gave it a name of dropdown and a template then use it as an HTML element.

There's still a lot to learn about components. This is just a sort of introduction. We'll be talking more about components in our next lessons. As always if you have any questions please don't hesitate to write it down in the comment below. Thanks!

Previous: Computed Properties and Watchers


No comments