Basic concepts of VueJS. Create your first component

Vue.js is a JavaScript library that helps you build web applications using the the MVVM (Model-View-ViewModel) architectural pattern. On its own Vue.js is not really a framework but with the right tools you can set up a framework adjusted to your needs. It might seem quite similar to AngularJS, but once you start working with it you’ll realize Vue.js is not only much easier to learn, it’s also way more flexible.

Components

Components allow you to break down the complexibility of your application by creating small chunks of isolated code. A component has it’s own template. Good examples of components are <my-carousel>, <my-accordion>, <my-header> etc.

They can be inserted anywhere in your application. This makes it really easy to write reusable code. Later in this article you’ll see how to create a dropdown component.

Components can be nested as well which makes it easy to create a ‘home’ component containing child components. This way you can create pages for your application.

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- Basic example of nested components -->
<home v-show="currentPage === 'home'">
<h1>My homepage</h1>
<!-- Render dropdown and parse an array of data to the component -->
<my-dropdown options="['one', 'two', 'three']"></my-dropdown>
</home>
<about v-show="currentPage === 'about'">
<h1>About</h1>
<my-carousel></my-carousel>
</about>
...

As you can see, the markup is really clean which lets you have a clear overview of the app. In the above example a dropdown component is loaded in the home component and a carousel component is loaded in the about component. home and about act like pages, they are shown based on the currentPage state. Check out Vue.js docs - Components for detailed information.

Your first component

See the Pen Basic Vue2 example by Tim Rijkse (@timrijkse) on CodePen.

Let’s have a look, actually it’s really easy. First create an index.html. In this example CSS, HTML and javascript are all in the same file but you can separate them if you like. Sorry, sometimes I’m a lazy developer. Mine looks something like this:

Protip: If you have a Codepen you can also fork this pen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
<head>
<style>
/* Vue styles */
/* Add your own or copy from below. */
</style>
<!-- Load Vue -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.min.js"></script>
</head>
<body>
<!-- Vue container -->
<div id="app"></div>
<script>
// Here we will write some magic David Copperfield will be proud of.
</script>
</body>
</html>

This is the CSS I used, feel free to add your own styles:

See the Pen Basic Vue2 dropdown component - part 1 by Tim Rijkse (@timrijkse) on CodePen.

Creating an entry point

Cool! A lazy setup it is. Now, first we will initialize a new Vue instance. This is the entry point of your application.

1
2
3
4
5
// Create new Vue instance
var app = new Vue({
// Tell Vue #app is the container element.
el: '#app'
});

Add dropdown markup

That was easy! Vue is all set up and we can start building our app. We will create a new component called my-dropdown. In the HTML add the markup for the dropdown component.

Existing html tags are reserved so they can’t be used as component names. The safest way to name components is by prefixing them. For example: <vue-header> instead of <header>.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!-- App container -->
<div id="app">
<!-- This is where my-dropdown will be rendered. -->
<my-dropdown></my-dropdown>
</div>
<!-- Vue template for my-dropdown component. -->
<template id="dropdown">
<div class="my-dropdown">
<div class="selected">Selected value</div>
<div class="options">
<div class="option">option 1</div>
<div class="option">option 2</div>
<div class="option">option 3</div>
</div>
</div>
</template>

Register the dropdown component

Next we register the dropdown component:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// Register my-dropdown component
var myDropdown = Vue.component('my-dropdown', {
// Define the template, refers to the template id in the HTML.
template: '#dropdown',
// This function is called when the DOM is ready.
mounted: function() {
console.log('My dropdown component is mounted!')
}
});
// Create new Vue instance
var app = new Vue({
// Tell Vue #app is the container element.
el: '#app'
});

If everything went right you should have something like this now:

See the Pen Basic Vue2 dropdown component - part 1 by Tim Rijkse (@timrijkse) on CodePen.

Implement functionality

At this moment the component is not doing much yet. Since I like clicking stuff we will add some functionality to the component. The default behaviour of a dropdown is to toggle the visibility of the options. This can be achieved by adding a methods object. We create a toggle, open and close function. These methods will update a data property called isOpen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var myDropdown = Vue.component('my-dropdown', {
// Define the template, refers to the template id in the HTML.
template: '#dropdown',
// A data object containing all data for this component.
data: function() {
return {
isOpen: false
}
},
// Methods, we will bind these later on.
methods: {
toggle: function() {
this.isOpen = !this.isOpen;
},
show: function() {
this.isOpen = true;
},
hide: function() {
this.isOpen = false;
}
}
});

Sweet! Now the data and methods are defined we can implement them in our template. When a user clicks the component we want the options to show/hide. Let’s see how this looks:

1
2
3
4
5
6
7
8
9
10
11
<div class="my-dropdown">
<!-- On click we call the toggle method -->
<div class="selected" @click="toggle">Selected value</div>
<!-- Only show this div when `isOpen` is true. -->
<div class="options" v-show="isOpen">
<div class="option">option 1</div>
<div class="option">option 2</div>
<div class="option">option 3</div>
</div>
</div>

We are getting there! Clicking the dropdown component now will update the isOpen state:

See the Pen Basic Vue2 dropdown component - part 2 by Tim Rijkse (@timrijkse) on CodePen.

Adding data

The content of the dropdown is still static content, we just repeated the option element 3 times. Let’s add some data in our component:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// A data object containing all data for this component.
data: function() {
return {
// Whether the options are visible or not.
isOpen: false,
// The selected value.
selected: 'Select your favourite beer',
// Options.
options: [
'Heineken',
'Amstel',
'Dommelsch'
]
}
}

And then we use the data in our template:

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="my-dropdown">
<!-- On click we call the toggle method -->
<div class="selected" @click="toggle">{{ selected }}</div>
<!-- Only show this div when `isOpen` is true. -->
<div class="options" v-show="isOpen">
<!-- v-for loops trough `options` -->
<!-- and renders a div containing the `option`s value. -->
<div class="option" v-for="option in options" @click="set(option)">
{{ option }}
</div>
</div>
</div>

Notice the @click binding on div.option. We still need to create this method. It will set the selected state and close the dropdown.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
methods: {
toggle: function() {
this.isOpen = !this.isOpen;
},
show: function() {
this.isOpen = true;
},
hide: function() {
this.isOpen = false;
},
// Set option as selected state and close dropdown.
set: function(option) {
this.selected = option;
this.hide();
}
}

High five! You’ve created your very first Vue component! As you can see it is really easy to get started with the basic concepts of Vue.

I created a Codepen collection containing all examples used in this blog post.

Changed the example?

I’d love to see what you made of it. Drop me a codepen or tweet!.

Share Comments