I built an SPA in an hour and this is what I learned (Part 2)

As promised, here’s the second part 😃

In part one of this tutorial I introduced Vue and we learned how to setup and create a simple app in vue. If you haven’t read that, here is the link.

Step 2

Collect and organise data

For my webapp, I had to collect names, roles, social media profile links etc. Here is the JSON I created with my data.

Put the json file in src/assets folder

Step 3

Import Json to component

Hello.vue is a Vue component file inside src/components. Components are one of the most powerful features of Vue. They help you extend basic HTML elements to encapsulate reusable code. At a high level, components are custom elements that Vue’s compiler attaches behaviour to.

If you’re familiar with React or Angular2, the idea of components and passing state won’t be new to you. In case you’re not, let’s go through some of the main concepts.

Websites large and small are usually composed of different pieces, and abstracting them into smaller pieces makes them easy to structure, reason about, reuse, and makes our code more legible. Instead of digging through all of the markup in long, multi-faceted page, we could comprise it of components.

OK, now fall back to our webapp.

In Hello.vue file I changed the lines between script tags as shown above.

First, import json data. Then inside default{} set name for your component and inside data(){}, put the imported json.

And that’s the end of step 3.

Step 4

Write the <template />

Vue.js uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying Vue instance’s data. All Vue.js templates are valid HTML that can be parsed by spec-compliant browsers and HTML parsers.

Under the hood, Vue compiles the templates into Virtual DOM render functions. Combined with the reactivity system, Vue is able to intelligently figure out the minimal amount of components to re-render and apply the minimal amount of DOM manipulations when the app state changes.

If you are familiar with Virtual DOM concepts and prefer the raw power of JavaScript, you can also directly write render functions instead of templates, with optional JSX support.

Directives

Directives are special attributes with the v- prefix. Example:

<p v-if=”seen”>Now you see me</p>

Here, the v-if directive would remove/insert the <p> element based on the truthiness of the value of the expression seen.

Data Binding

1. Text — The most basic form of data binding is text interpolation using the “Mustache” syntax (double curly braces — {{ msg }}).
2. Raw HTML — The double mustaches interprets the data as plain text, not HTML. In order to output real HTML, you will need to use the v-html directive.
3. Attributes — Mustaches cannot be used inside HTML attributes, instead use a v-binddirective:<div v-bind:id="dynamicId"></div>
4. JavaScript Expressions — So far we’ve only been binding to simple property keys in our templates. But Vue.js actually supports the full power of JavaScript expressions inside all data binding. That is {{ 1+2 }} will render as 3.

In our component, the template looks like this:

Chill! I’ll explain. First, create a div to hold all our contents. Then we have these 2 parts to write.

Part 1

We have 5 objects in our Json array. So first we open a ul tag and inside it write a general li tag to render all 5 objects.

<li v-for="mem in members">

The v-for directive will loop through all elements in our array and create a li for each one of them. Now using the mem object we can access the contents of the Json object.

Part 2

At this point we have access to every object through mem object. So now lets write code to render each data accordingly.

First one is the profile image:

<img class="round-profile-image" :src="mem.image"/>

The :src is shorthand for vue directive.

Second, is names, roles and stuff:

<span class="name">            
    {{ mem.name + ' ' + mem.surname }}          
</span><BR /> 
         
<span class="secondary-text">            
    {{ mem.role + ' & ' + mem.title }} <BR />            
    {{ mem.city + ', ' + mem.country }}          
</span><BR />   
       
<span class="bio">            
    {{'\"' + mem.bio + '\"'}}          
</span>

Third one is hyperlinks to social media profiles:

<ul>            
    <li>              
        <a :href="mem.links.facebook.profile" target="_blank">                   
            <img class="round-icon panin_animation_on_hover" :src="mem.links.facebook.icon"/>              
        </a>            
    </li>
    <!-- Repeat same for all other profiles -->
</ul>

In all the above code snippets we used vue directives to access data from our vue instance.

OK, that concludes step 4.

Step 5

Add styles and build

Put some styles as you like.

Now the whole file looks like this:

That’s it, mission accomplished.

Now run the dev server and test the app. In the project folder type the following.

$ npm run dev

To build for production:

$ npm run build

Go ahead and build awesome things with Vue.Js

Happy Coding 💻