Member preview

Bird’s Eye Vue

You always wanted to start learning to code in Vue framework, but somehow you just don’t have the time in your busy schedule.

Overwhelmed with all the libraries and frameworks? Perhaps. This Bird’s Eye Vue (getting started) tutorial might help.

I’m not saying it will help you program in Vue or become an expert. But it will help you build a good idea of a Vue application structure. That’s the only purpose of this tutorial. And none other! So let’s begin…

A lot like React, Vue breaks down your JavaScript application into parts: The application object, member methods and properties, and the actual view. This is where your HTML elements are.

Few words about 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 v-html, v-if, v-else and many others. They all have their specific purpose: rendering lists of elements and plenty of other things.

Another attribute: v-show is for toggling elements based on their visibility state specified in Vue application’s property data: { boolean: true; } (On your main Vue application object.

Boolean

<p v-show = “boolean”>Hello!</p>

So whenever App.data.boolean is true that <p> element will be visible. All you do is switch it on or off in your code. The change is automatic.

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, without having to type the same HTML element over and over again.

Here is a classic example of a for-loop iterator

Always prepare the data in your application object first:

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 item in items format. Meaning you create a new variable called item in your {{ … here … }} loop. Property items comes from the application data object itself.

This will render your items array of JSON objects as HTML elements!

It will be the same as hand-writing 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 application view rendering.

This not only shortens your JavaScript application, saving bandwidth (especially on large apps) but also helps you get things done a lot faster.

The application scaffold (id = “app”) 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. And stores properties and methods in the application object (see below).

The blue line indicate how your application data is tied to the HTML elements rendering the view. (continued in the next image.)

The green line link your methods to events.

Notice the red outline in the image above. In Vue, you have to bind href URLs with :href and not href attribute. If you don 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>

You can store a value in data: {…} property which is part of your main Vue application object 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) attributes. If you avoid using v-cloak you might experience some rendering artifacts (Like 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.

Finally, this is your main Vue application object. This is where you actually build the logic of your application, store properties, URLs strings and custom methods. It’s like separating codelogic from the… vue.

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. Specifically… the app object. It ties together your JavaScript code and HTML elements which will render your application view, inclding 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.