A bird’s eye Vue: how to get started with Vue.js
Here’s a list of my best web development tutorials.
Complete CSS flex tutorial on Hashnode.
Ultimate CSS grid tutorial on Hashnode.
Higher-order functions .map, .filter & .reduce on Hashnode.
Follow me @ Twitter, Instagram & fb to never miss premium articles.
You’ve always wanted to start learning to code in the Vue framework, but somehow you just haven’t have the time in your busy schedule.
Maybe you feel overwhelmed by all the libraries and frameworks? This bird’s eye Vue (getting started) tutorial might help.
A lot like React, Vue breaks down your JavaScript application into several parts:
- the application object
- member methods and properties
- and the actual view (this is where your HTML elements are).
Vue’s v-based HTML attributes
Vue adds a lot of custom attributes to the elements you don’t usually see in standard HTML, by prefixing them with v-.
For example, there’s v-html, v-if, v-else and many others. They all have their specific purpose: rendering elements. Let’s take a quick look.
Boolean switches
Another attribute v-show is for toggling elements based on their visibility state.
This is specified in a Vue application’s property data as {boolean: true;}.
Then, in your HTML, you can use it to determine which elements to show.
<p v-show = “boolean”>Hello!</p>
Whenever App.data.boolean is true, the <p> element will be visible.
Your application logic can now ‘switch’ the <p> element ‘on’ or ‘off’ in your code. The change is automatically rendered.
Looping
The v-for directive is for creating loops to list HTML elements.
This means you can embed iterators directly into HTML elements to render lists of data stored in an array in the state of your Vue application. You don’t have to type the same HTML element over and over again.
Here is a classic example of a for-loop iterator.
First, prepare the data in your application object:
let E = new Vue({
el : ‘#L’, // link to the id = "L" element
data : {
items : [
{ message : ‘One’ },
{ message : ‘Two’ },
{ message : ‘Three’ } ]}
});Now in your main HTML application container:
<ul id = ”L">
<li v-for = ”item in items”>{{ item.message }}</li>
</ul>The v-for directive is in a ‘for item in items’ format.
This means you create a new variable called item in your {{ … here … }} loop. The property items comes from the application data object itself.
This will render your items array of JSON objects as HTML elements!
It would be the same as hand-writing the following HTML:
<ul id = ”L">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>I won’t go into the details behind every single v-based attribute and what it does in this tutorial. But as you can see they can be quite useful.
So how do you actually build Vue applications with this?
Building Applications
By combining your application state data with these native v-based attributes, you create associations between your logic and the application view’s rendering.
This shortens your JavaScript application, saving bandwidth (especially on large apps). It also helps you get things done a lot faster.
In the screenshot below, the application scaffold is where all of your tags and templates will be rendered to.
This works a lot like React. Vue treats your main application <div> as the container for the entire app. It stores properties and methods in the application object (see below).
In the screenshot, the blue line indicates how your application data is tied to the HTML elements rendering the view.
The green line links your methods to events.
Notice the red outline in the image above. In Vue, you have to bind <href> URLs with the :href and not the href attribute. If you don’t that, the link will not work.
// Correct (notice the leading : before href attribute)
<a :href = "url" :title = "urltitle">{{url}}<a>// Error (URl will not launch)
<a href = "url" :title = "urltitle">{{url}}</a>
Application Data
When building applications in Vue (or even other similar frameworks or libraries) you usually think of one primary storage place for your data. In React it could be the state property. In Vue it is simply stored in the data object.
According to Vue documentation itself, the data storage — often referred to as the source of truth — is stored in the the raw data property on the main application object itself:
const sourceOfTruth = {}
const application = new Vue({ data: sourceOfTruth });The cool thing about this is that you can store a value in the data: { ... } property and have it automatically become available in your HTML elements via the v-text, v-pre, v-once (render only once) and v-cloak (wait until page has finished rendering and Vue is mounted) and many other attributes.
In other words, properties (primitive values, objects and methods) become omnipresent throughout the application and can be used in all the extra features the Vue framework brings to the table… to be used together with attributes that start with a v- prefix.
And just a side note. If you avoid using v-cloak you might experience some rendering artifacts. For example, the CSS style jumping around just within the first second of loading your app.
Vue Application object
This is where you will initialize your data and write your application methods that get things done.
As you can see, you have a series of properties and methods — just like you would in a regular JavaScript class.
Below is a screenshot showing your main Vue application object. This is where you actually build the logic of your application, and store properties, URLs strings and custom methods. It’s like separating the code logic from the view.
When you’re just getting started, it’s a good idea to get a grasp on the bird’s eye view of things before jumping straight into the code.
Since you don’t just write the code into the <script> tags with Vue, there are specific places where different elements of your app (methods, properties, etc) are intended to reside.
Vue provides an abstract way of thinking about your application, by tossing everything into one place — the App object.
It ties together your JavaScript code and HTML elements which will render your application view, including data or properties stored in your main Vue application object.
As they are manipulated, the “view” (visual parts) of your application will be updated automatically.
Your application latches on to the <div id = “app”></div> container, just like React. You can view this code in browser to see what it does, or copy the source code as a starting point for building your own Vue applications.
