Getting Started with Vue using Fiddle

Setting up Fiddle for Vue

In order to setup in Fiddle, you just need to open fiddle, log into it and start by setting as the JavaScript Framework. Once it’s done you can go ahead and start the code tutorial below. In this post, we will deal with the following topics and the samples will be done using JSFiddle:-

  1. Declarative Programming and Templating
  2. Conditional in the Templates
  3. Loops in the Templates

The Setting up on the workspace is simple enough. Just go ahead and search for and add it into the JSFiddle as shown below:-

Vue Framework Getting Started
Vue Framework Getting Started

Framework Getting Started

Now once this is setup let’s look at each of the topics separately.

Declarative Programming and Templating

uses declarative language in order to specify the different parameters on the screen. If you are familiar with templating language you will be happy and will be comfortable with this setup. So as we can see two curly braces for templating will help us achieve this out. So let’s start with a simple sample. We will build a sample Card using and Bootstrap 4.

<div id="app">
<div class="card">
<div class="card-block">
<!-- You can see the templating used below -->
<h4 class="card-title">{{cardTitle}}</h4>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">{{cardText}}</p>
<a href="#" class="card-link">{{cardLink}}</a>
<a href="#" class="card-link">{{cardAnotherLink}}</a>
</div>
</div>
</div>

In order to make this run, we will be writing some code. This will identify the element and put in the data required into the DOM using the templates above. The JavaScript code goes as mentioned.

var app = new Vue({
el: '#app',
data: {
cardTitle: 'John Doe',
cardText: 'Hello I am a regular visitor of The Web Juice',
cardLink: 'Profile',
cardAnotherLink: 'Share'
}
});

This combination will give rise to the card Layout that is being mentioned .

Loops in Templates

has directives that are specific to and start with v- , these directives helps in adding DOM manipulation functionalities to . Since now we have a card in place lets get some data repeated in the DOM. We will use v-for in order to get our card data repeated. The HTML for the same goes below where we have used the v-for directive to repeat the card data.

<div id="app">
<div class="card" v-for="card in cards">
<div class="card-block">
<!-- You can see the templating used below -->
<h4 class="card-title">{{card.cardTitle}}</h4>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">{{card.cardText}}</p>
<a href="http://thewebjuice.com/getting-started-vue-using-fiddle/" class="card-link">{{card.cardLink}}</a>
<a href="http://thewebjuice.com/getting-started-vue-using-fiddle/" class="card-link">{{card.cardAnotherLink}}</a>
</div>
</div>
</div>

Now let’s add a few lines of JavaScript in Order to make changes to the Script that we have written, this will give you enough understanding of how the directive works.

var contacts = [{
cardTitle: 'John Doe',
cardText: 'Hello I am a regular visitor of The Web Juice',
cardLink: 'Profile',
cardAnotherLink: 'Share'
}, {
cardTitle: 'Rebecca Doe',
cardText: 'Rather I will say I am not into this anymore.',
cardLink: 'Profile',
cardAnotherLink: 'Share'
}, {
cardTitle: 'Loreal Doe',
cardText: 'Lets chat about the site',
cardLink: 'Profile',
cardAnotherLink: 'Share'
}];
var app = new Vue({
el: '#app',
data: {
cards: contacts
}
});

You can check the completed code out here in . This might have given you the overview of how Directives work. We will be using another directive for conditional templates like v-if .

Conditional Templating

Now, let’s add some parameters to the list of contacts. For example, let’s add a variable of ex-employees. The HTML will change as follows:-

<div id="app">
<div class="card" v-for="card in cards" v-if="card.ex">
<div class="card-block">
<!-- You can see the templating used below -->
<h4 class="card-title">{{card.cardTitle}}</h4>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">{{card.cardText}}</p>
<a href="http://thewebjuice.com/getting-started-vue-using-fiddle/" class="card-link">{{card.cardLink}}</a>
<a href="http://thewebjuice.com/getting-started-vue-using-fiddle/" class="card-link">{{card.cardAnotherLink}}</a>
</div>
</div>
</div>

Now we will add a data point to the existing list and then let’s see how it reacts.

var contacts = [{
cardTitle: 'John Doe',
cardText: 'Hello I am a regular visitor of The Web Juice',
cardLink: 'Profile',
cardAnotherLink: 'Share',
ex:true,
}, {
cardTitle: 'Rebecca Doe',
cardText: 'Rather I will say I am not into this anymore.',
cardLink: 'Profile',
cardAnotherLink: 'Share',
ex:true
}, {
cardTitle: 'Loreal Doe',
cardText: 'Lets chat about the site',
cardLink: 'Profile',
cardAnotherLink: 'Share',
ex:false
}];
var app = new Vue({
el: '#app',
data: {
cards: contacts
}
});

This will lead us to understand how the conditional statements work. Let’s check out the sample fiddle app in order to see the whole things work in action. This has all the three things working in action together. You can find this in or play with the code below.

Conclusion

The above tutorial must have made it clear how to use the Declarative templates in order to display data in the DOM. Along with this a good insight of the Conditional as well as the looping structure was also given. We will proceed with taking User Inputs in the next section. Leave your comments below to let us know more about ur view on .

Originally published at .

Interested in friends and am a Web Developer. Design Websites and Web Solutions in major Platforms, SEO Consultant