A bird’s eye Vue: how to get started with Vue.js

Photo by
Sam Bark on 
Unsplash

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: Focus on 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'}]}});Copy the code

Now in your main HTML application container:

< ul id = "L" > < li v - for = "item in the items" > {{item. The message}} < / li > < / ul >Copy the code

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 >Copy the code

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