Download code from GitHub
Getting Started with Vue.js
Vue (pronounced view) is a very powerful JavaScript library created for building interactive user interfaces. Despite having the ability to handle large single-page applications, Vue is also great for providing a framework for small, individual use cases. Its small file size means it can be integrated into existing ecosystems without adding too much bloat.
It was built to have a simple API, which makes it easier to get started in comparison with its rivals: React and Angular. Although it borrows some of the logic and methodologies from these libraries, it has identified a need for developers for a simpler library for building applications.
Unlike React or Angular, one of the benefits of Vue is the clean HTML output it produces. Other JavaScript libraries tend to leave the HTML scattered with extra attributes and classes in the code, whereas Vue removes these to produce clean, semantic output.
In the first part of this book, we are going to build an application that uses a JSON string to display data. We will then look at filtering and manipulating data, before moving on to building reusable components to reduce duplication in our code.
In this chapter, we will look at:
- How to get started with Vue by including the JavaScript file
- How to initialize your first Vue instance and look at the data object
- Examining computed functions and properties
- Learning about Vue methods
Creating the workspace
To use Vue, we first need to include the library in our HTML and initialize it. For the examples in the first section of this book, we are going to be building our application in a single HTML page. This means the JavaScript to initialize and control Vue will be placed at the bottom of our page. This will keep all our code contained, and means it will easily run on your computer. Open your favorite text editor and create a new HTML page. Use the following template as a starting point:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue.js App</title>
</head>
<body>
<div id="app">
</div>
<script src="https://unpkg.com/vue"></script>
<script type="text/javascript">
// JS Code here
</script>
</body>
</html>
The main HTML tags and structure should be familiar to you. Let's run over a few of the other aspects.
Application space
This is the container for your application and provides a canvas for Vue to work in. All the Vue code will be placed within this tag. The actual tag can be any HTML element - main, section, and so on. The ID of the element needs to be unique, but again, can be anything you wish. This allows you to have multiple Vue instances on one page or identify which Vue instance relates to which Vue code:
<div id="app">
</div>
During the tutorials, this element with the ID will be referred to as the app space or view. It should be noted that all HTML and tags and code for your application should be placed within this container.
Vue library
For the examples in this book, we are going to be using a hosted version of Vue.js from a CDN (Content Delivery Network) unpkg. This ensures that we have the latest version of Vue in our application, and also means we do not need to create and host other JavaScript files. Unpkg is an independent site that hosts popular libraries. It enables you to quickly and easily add a JavaScript package to your HTML, without having to download and host the file yourself:
<script src="https://unpkg.com/vue"></script>
When deploying your code, it is a good practice to serve up your libraries from local files rather than relying on CDNs. This ensures that your implementation will work with the currently - saved version, should they release an update. It will also increase the speed of your application, as it will not need to request the file from another server.
The script block following the library include is where we are going to be writing all our JavaScript for our Vue application.
Initializing Vue and displaying the first message
Now that we have a template set up, we can initialize Vue and bind it to the HTML app space by using the following code:
const app = new Vue().$mount('#app');
This code creates a new instance of Vue and mounts it on the HTML element with the ID of app. If you save your file and open it up in a browser, you will notice nothing has happened. However, under the hood, this one line of code has linked the div with the app variable, which is an instance of a Vue application.
Vue itself has many objects and properties that we can now use to build our app. The first one you will encounter is the el property. Using an HTML ID, this property tells Vue which element it should bind to and where the app is going to be contained. This is the most common way of mounting your Vue instance and all Vue code should happen within this element:
const app = new Vue({
el: '#app'
});
When the el property isn't specified in the instance, Vue initializes in an unmounted state—this allows any functions or methods you may have specified to run before mounting, to run and complete. You can then independently call the mounting function when ready. Behind the scenes, when using the el property, Vue is mounting the instance using a $.mount function. If you do want to wait, the $mount function can be called separately, for example:
const app = new Vue();
// When ready to mount app:
app.$mount('#app');
However, as we will not need to delay the execution of our mount timing throughout the book, we can use the el element with the Vue instance. Using the el property is also the most common way of mounting the Vue app.
Alongside the el value, Vue has a data object that contains any data we need to access the app or app space. Create a new data object within the Vue instance and assign a value to a property by doing the following:
const app = new Vue({
el: '#app',
data: {
message: 'Hello!'
}
});
Within the app space, we now have access to the message variable. To display data within the app, Vue uses the Mustache templating language to output data or variables. This is achieved by placing the variable name between double curly brackets {{ variable }}. Logic statements, such as if or foreach, get HTML attributes, which will be covered later in the chapter.
Within the app space, add the code to output the string:
<div id="app">
{{ message }}
</div>
Save the file, open it up in your browser, and you should be presented with your Hello! string.
The data object can handle multiple keys and data types. Add some more values to the data object and see what happens - make sure you add a comma after each value. Data values are simple JavaScript and can handle basic math, too - try adding a new price key and setting the value to 18 + 6 to see what happens. Alternatively, try adding a JavaScript array and printing it out:
const app = new Vue({
el: '#app',
data: {
message: 'Hello!',
price: 18 + 6,
details: ['one', 'two', 'three']
}
});
In your app space, you can now output each of those values - {{ price }} and {{ details }} now output data - although the list may not be quite what you had expected. We'll cover using and displaying lists in Chapter 2, Displaying, Looping, Searching, and Filtering Data.
All the data in Vue is reactive and can be updated by either the user or the application. This can be tested by opening up the browser's JavaScript console and updating the content yourself. Try typing app.message = 'Goodbye!'; and pressing Enter - your app's content will update. This is because you are referencing the property directly - the first app refers to the const app variable that your app is initialized to in your JavaScript. The period denotes a property within there, and the message refers to the data key. You could also update app.details or price to anything you want!
Computed values
The data object in Vue is great for storing and retrieving data directly, however, there may be times where you want to manipulate the data before outputting it in your applications. We can do that using the computed object in Vue. Using this technique, we are able to start adhering to the MVVM (Model-View-ViewModel) methodology.
MVVM is a software architectural pattern where you separate out various parts of your application into distinct sections. The Model (or data) is your raw data input - be it from an API, database, or hardcoded data values. In the context of Vue, this is typically the data object we used earlier.
The view is the frontend of your application. This should just be used for outputting the data from the Model, and should not contain any logic or data manipulation, with the exception of some unavoidable if statements. For the Vue applications, this is all the code placed within the <div id="app"></div> tags.
The ViewModel is the bridge between the two. It allows you to manipulate the data from the Model before it is output by the view. Examples of this could range from changing a string to uppercase or prefixing a currency symbol, up to filtering out discounted products from a list or calculating the total value of a field across an array. In Vue, this is where the computed object comes in.
The computed object can have as many properties as required - however, they must be functions. These functions can utilize data already on the Vue instance and return a value, be it a string, number, or array that can then be used in the view.
The first step is to create a computed object within our Vue application. In this example, we are going to use a computed value to convert our string to lowercase, so set the value of message back to a string:
const app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
computed: {
}
});
The next step is to create a function inside the computed object. One of the hardest parts of development is naming things - make sure the name of your function is descriptive. As our application is quite small and our manipulation basic, we'll name it messageToLower:
const app = new Vue({
el: '#app',
data: {
message: 'HelLO Vue!'
},
computed: {
messageToLower() {
return 'hello vue!';
}
}
});
In the preceding example, I've set it to return a hardcoded string, which is a lowercased version of the contents of the message variable. Computed functions can be used exactly as you would use a data key in the view. Update the view to output {{ messageToLower }} instead of {{ message }} and view the result in your browser.
There are a few issues with this code, however. Firstly, if the value of messageToLower was being hardcoded, we could have just added it to another data property. Secondly, if the value of message changes, the lowercase version will now be incorrect.
Within the Vue instance, we are able to access both data values and computed values using the this variable - we'll update the function to use the existing message value:
computed: {
messageToLower() {
return this.message.toLowerCase();
}
}
The messageToLower function now references the existing message variable and, using a native JavaScript function, converts the string to lower case. Try updating the message variable in your application, or in the JavaScript console, to see it update.
Computed functions are not just limited to basic functionality - remember, they are designed to remove all logic and manipulations from the view. A more complex example might be the following:
const app = new Vue({
el: '#app',
data: {
price: 25,
currency: '$',
salesTax: 16
},
computed: {
cost() {
// Work out the price of the item including
salesTax
let itemCost = parseFloat(
Math.round((this.salesTax / 100) *
this.price) + this.price).toFixed(2);
// Add text before displaying the currency and
amount
let output = 'This item costs ' +
this.currency + itemCost;
// Append to the output variable the price
without salesTax
output += ' (' + this.currency + this.price +
' excluding salesTax)';
// Return the output value
return output;
}
}
});
Although this might seem advanced at first glance, the code is taking a fixed price and calculating what it would be with sales tax added. The price, salesTax, and currency symbol are all stored as values on the data object and accessed within the cost() computed function. The view outputs {{ cost }}, which produces the following:
This item costs $29.00 ($25 excluding sales tax)
Computed functions will recalculate and update if any data is updated, by either the user or the application itself. This allows for our function to dynamically update based on the price and salesTax values. Try one of the following commands in the console in your browser:
app.salesTax = 20 app.price = 99.99
The paragraph and prices will update instantly. This is because computed functions are reactive to the data object and the rest of the application.
Methods and reusable functions
Within your Vue application, you may wish to calculate or manipulate data in a consistent or repetitive way or run tasks that require no output to your view.For example, if you wanted to calculate the sales tax on every price or retrieve some data from an API before assigning it to some variables.
Rather than creating computed functions for each time, we need to do this, Vue allows you to create functions or methods. These get declared in your application and can be accessed from anywhere - similar to the data or computed functions.
Add a method object to your Vue application and note the updates to the data object:
const app = new Vue({
el: '#app',
data: {
shirtPrice: 25,
hatPrice: 10,
currency: '$',
salesTax: 16
},
methods: {
}
});
Within the data object, the price key has been replaced with two prices - shirtPrice and hatPrice. We'll create a method to calculate the sales tax for each of these prices.
Similar to creating a function for the computed object, create a method function title called calculateSalesTax. This function needs to accept a single parameter, which will be the price. Inside, we will use the code from the previous example to calculate the sales tax. Remember to replace this.price with just the parameter name: price, as shown here:
methods: {
calculateSalesTax(price) {
// Work out the price of the item including
sales tax
return parseFloat(
Math.round((this.salesTax / 100) * price)
+ price).toFixed(2);
}
}
Pressing save will not do anything to our application - we need to call the function. In your view, update the output to use the function and pass in the shirtPrice variable:
<div id="app">
{{ calculateSalesTax(shirtPrice) }}
</div>
Save your documents and check the result in the browser - is it what you expected? The next task is to prepend the currency. We can do that by adding a second method that returns the parameter passed into the function with the currency at the beginning of the number:
methods: {
calculateSalesTax(price) {
// Work out the price of the item including
sales tax
return parseFloat(
Math.round((this.salesTax / 100) * price) +
price).toFixed(2);
},
addCurrency(price) {
return this.currency + price;
}
}
In our view, we then update our output to utilize both methods. Rather than assigning to a variable, we can pass the first function, calculateSalesTax, as the parameter for the second addCurrency function. This works because of the first method, calculateSalesTax, accepts the shirtPrice parameter and returns the new amount. Instead of saving this as a variable and passing the variable into the addCurrency method, we pass the result directly into this function, which is the calculated amount:
{{ addCurrency(calculateSalesTax(shirtPrice)) }}
However, it would start to get tiresome having to write these two functions every time we needed to output the price. From here, we have two options:
- We can create a third method, titled cost() - which accepts the price parameter and passes the input through the two functions
- Create a computed function, such as shirtCost, which uses this.shirtPrice instead of having a parameter passed in
We could, alternatively, create a method titled shirtCost that does the same as our computed function; however, it's better to practice to use computed in this case.
This is because computed functions are cached, whereas method functions are not. If you imagine our methods being a lot more complicated than they currently are, calling function after function repeatedly (for example, if we wanted to display the price in several locations) could have a performance impact. With computed functions, as long as the data does not change, you can call it as many times as you want, with the result being cached by the application. If the data does change, it only needs to recalculate once, and re-cache that result.
Make a computed function for both the shirtPrice and hatPrice, so that both variables can be used in the view. Don't forget that to call the functions internally you must use the this variable - for example, this.addCurrency(). Use the following HTML code as the template for your view:
<div id="app">
<p>The shirt costs {{ shirtCost }}</p>
<p>The hat costs {{ hatCost }}</p>
</div>
Have a go at creating the computed functions yourself before comparing against the following code. Don't forget that there are many ways to do things in development, so don't worry if your code works but doesn't match the following example:
const app = new Vue({
el: '#app',
data: {
shirtPrice: 25,
hatPrice: 10,
currency: '$',
salesTax: 16
},
computed: {
shirtCost() {
returnthis.addCurrency(this.calculateSalesTax(
this.shirtPrice))
},
hatCost() {
return this.addCurrency(this.calculateSalesTax(
this.hatPrice))
},
},
methods: {
calculateSalesTax(price) {
// Work out the price of the item including
sales tax
return parseFloat(
Math.round((this.salesTax / 100) * price) +
price).toFixed(2);
},
addCurrency(price) {
return this.currency + price;
}
}
});
The result, although basic, should look like the following:
Summary
In this chapter, we learned how to get started with the Vue JavaScript framework. We examined the data, computed, and methods objects within the Vue instance. We covered how to use each one within the framework and utilize each of its advantages.
