arrow cursor
< javascript tutorials

Bird's Eye Vue - Getting Started

Written by @js_tut (Twitter) on September 14, 2018

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 get an idea of Vue application structure.

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.

Examples of custom HTML element attributes prefixed with v-

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. This means you can embed iterators directly into HTML elements, to create lists of data stored in an array, for example.

vue getting started tutorial - application structure part I

<div id = "application"></div>

This is just your Vue application's scaffold. It is simply the main container of your application. Then there is the application object itself (see further below).

The blue lines indicate how your application data is tied to the HTML elements rendering the view.

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 */
<a :href = "url" :title = "urltitle">{{url}}<a>
/* Error */
<a href = "url" :title = "urltitle">{{url}}</a>

You can store a value in data: {...} object and have it automatically become available in your HTML elements via the v-text, v-pre, v-once and v-cloak (wait until page has finished rendering) attributes.

Vue Application Object

This is where you will initialize your data and write your application methods that get things done:

vue getting started tutorial - application structure part II

var application = new Vue({...})

That's how you instantiate your Vue application!

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, 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.

How To Create an Interactive Flex Layout Designer In JavaScript | Tweet It | CSS Visual Dictionary