Setting up Fiddle for Vue

In order to setup Vue in Fiddle, you just need to open fiddle, log into it and start by setting Vue 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 Vue and add it into the JSFiddle as shown below:-

Vue Framework Getting Started

Vue Framework Getting Started

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

Declarative Programming and Templating

Vue 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 Vue and Bootstrap 4.

In order to make this run, we will be writing some Vue 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.

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

Loops in Templates

Vue has directives that are specific to Vue and start with v- , these directives helps in adding DOM manipulation functionalities to Vue. 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.

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

You can check the completed code out here in JSFiddle. This might have given you the overview of how Vue Directives work. We will be using another Vue 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:-

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

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 JSFiddle 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 Vue.


Also published on Medium.

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Join our mailing list to receive the latest news and updates from our team.

You have Successfully Subscribed!

Pin It on Pinterest

Share This