Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Navigation and Editor like features with Vue.js

In this tutorial, we shall learn about how one can make use of Vue.js for the development of several kinds of front-end work for Web-based applications. Typically, we will first go through the basics with regards to Vue.js and then look to build a menu, form and an editor.

Vue.js is basically a library that is meant for the building of web interfaces. While its isn’t typically a complete framework, but one can label it so, considering it is but a set of optional tools that are well capable of working together. Now, many of you may be thinking whether Vue.js is particularly new among the frameworks for JavaScript. However, this isn’t really true. In fact, Vue’s first release dates back to 2014, and since then, the framework has evolved pretty well.

So, what makes Vue.js different from other frameworks? What does it have to offer?

The entire idea behind Vue.js has been to offer the simplest possible API that allows for the creation of real-time and two-way binding of data between the model (JavaScript object) and the view (HTML).

There are also a few things that we shall pick talk about in the later sections. As you go through, you shall also learn that working with Vue.js is pretty easy and also enjoyable. Also, you shall not need to compromise on any functionality.

Vue.js is reactive

One of the simplest tasks is that of displaying data. Say, we have something like –

var objt = {
  message: 'Hi world!'
}

Along with a template –

new Vue({
   el: '#example',
   data: objt
 })

We have basically rendered a template in this case. Now, when the object changes, there is nothing required to be done to change the view. Why? This is simply because Vue has already made the object reactive.

When objt.message is set to something, the HTML automatically updates as well.

Also, consider this example for seamless computation –

var examp = new Vue({
   data: {
     i: 1
   },
   computed: {
     j: function () {
       return this.i + 1
     }
   }
 })
 
 // Both i & j are copied on the created instance
 examp.i // = 1
 examp.j // = 2
 examp.i++
 examp.j // = 3

The computed property j considers I as a dependency and automatically syncs.

Components

Vue.js uses a path pretty similar to React when it comes the structuring of complex interfaces.

var Example = Vue.extend({
   template: '<div>{{ message }}</div>',
   data: function () {
     return {
       message: 'Hi Vue.js!'
     }
   }
 })
 
 // registering it with the tag <examp>
 Vue.component('examp', Example)

What we have done here is that made the example examp into a reusable component. And, to use the component in other templates, we will just need to use –

<examp> </examp>

Support for animations

Vue.js has its very own transition system that is pretty easy to use. In fact, several award winning websites have been built with it, typically being very interactive in nature.

Support for routing

Vue doesn’t come with routing, just like React. But, there is the vue-router package that can help you in this case. It offers support for mapping nested routes to components and also offers fine transition control.

Stability

Despite that fact that Vue.js is a personal project and not one that has an enterprise team working behind it, it is indeed stable.

In fact, bugs are pretty much all closed up at a fast rate, thus making it a reliable framework to work with.

Now that we know what Vue.js has to offer, we shall now learn to build a menu, form and an editor.

Building a navigation menu

The first thing that we are going to build is a simple navigation bar. However, before that there is also something that one needs to know about the components that a Vue.js application requires.

  • Model – This is basically the app data. Here, it is largely a JavaScript objects that consists of variable and also their values.
  • View – This is largely the HTML part, which is also the portion that we look to display.
  • View-Model – This is mainly the Vue instance that is supposed to bind the model and view, thereby enabling communication between them.

Following is the sample html code

Listing 1: HTML code sample

*{
       margin:0.5;
       padding:0.5;
}
body{
       font:16px/1.4 'Open Sans', sans-serif;
       color: #5e5b65;
       text-align:center;
}
a, a:visited {
       outline:none;
       color:#389dc2;
}
a:hover{
       text-decoration:none;
}
section, footer, header, aside, nav{
       display: block;
}
/*The Menu*/
nav{
       display:inline-block;
       margin:62px auto 47px;
       background-color:#5697b5;
       box-shadow:0 2px 2px #ddd;
       border-radius:4px;
}
nav a{
       display:inline-block;
       padding: 20px 32px;
       color:#eee !important;
       font-weight:bold;
       font-size:15px;
       text-decoration:none !important;
       line-height:2;
       text-transform: uppercase;
       background-color:transparent;
       -webkit-transition:background-color 0.35s;
       -moz-transition:background-color 0.35s;
       transition:background-color 0.35s;
}
nav a:first-child{
       border-radius:4px 0 0 4px;
}
nav a:last-child{
       border-radius:0 4px 4px 0;
}
nav.home .home,
nav.projects .projects,
nav.services .services,
nav.contact .contact{
       background-color:#e35986;
}
p{
       font-size:20px;
       font-weight:bold;
       color:#7d9299;
}
p b{
       color:#eeeeee;
       display:inline-block;
       padding:7px 12px;
       background-color:#c4d8e2;
       border-radius:4px;
       text-transform:uppercase;
       font-size:20px; 
}

Now, let’s have a look at the sample java script code

Listing 2: JavaScript sample code

// Creation of a new Vue instance and passing it in options object.
var dem = new Vue({
       
       // This happens to be a DOM element for mounting our view model.
       el: '#main',
        // The model.
       // Defining the properties and giving them initial values.
       data: {
             active: 'home'
       },
       // Methods that we shall use.
       methods: {
             makeActive: function(item){
                    // When a model changes, view shall automatically be updated.
                    this.active = item;
             }
       }
});

Following is the sample css code

Listing 3: CSS sample code

*{
       margin:0.5;
       padding:0.5;
}
body{
       font:16px/1.4 'Open Sans', sans-serif;
       color: #5e5b65;
       text-align:center;
}
a, a:visited {
       outline:none;
       color:#389dc2;
}
a:hover{
       text-decoration:none;
}
section, footer, header, aside, nav{
       display: block;
}
/*The menu*/
nav{
       display:inline-block;
       margin:62px auto 47px;
       background-color:#5597b5;
       box-shadow:0 2px 2px #ddd;
       border-radius:4px;
}
nav a{
       display:inline-block;
       padding: 20px 32px;
       color:#eee !important;
       font-weight:bold;
       font-size:15px;
       text-decoration:none !important;
       line-height:2;
       text-transform: uppercase;
       background-color:transparent;
       -webkit-transition:background-color 0.35s;
       -moz-transition:background-color 0.35s;
       transition:background-color 0.35s;
}
nav a:first-child{
       border-radius:4px 0 0 4px;
}
nav a:last-child{
       border-radius:0 4px 4px 0;
}
nav.home .home,
nav.projects .projects,
nav.services .services,
nav.contact .contact{
       background-color:#e35986;
}
p{
       font-size:20px;
       font-weight:bold;
       color:#7d9299;
}
 
p b{
       color:#eeeeee;
       display:inline-block;
       padding:7px 12px;
       background-color:#c4d8e2;
       border-radius:4px;
       text-transform:uppercase;
       font-size:20px;
}

Following is the output of the menu application

Figure 1. Showing navigation menu

Building an inline editor

In the example prior to this, we largely made use of predefined values. However, if we wish to allow users to set such data, we will require two-way binding and need to link the input field with a model property. As such, when the text is entered, it automatically saves in the text_content model.

Listing 4: HTML sample code for the editor

<!-- v-cloak can hide any un-compiled data bindings till Vue instance is ready -->
<!-- Once the element is clicked, hideTooltp() method is invoked -->
 
<div id="main" v-cloak v-on:click="hideTooltip" >
    <!-- The tooltip. 
         v-on:clock.stop happens to be an event handler meant for clicks, with a modifier that can stop event propagation.
         v-if determines that the tooltip is displayed when the "showtooltip" variable is true -->
    <div class="tooltip" v-on:click.stop v-if="show_tooltip">
        <!-- v-model is meant for binding the content of the text field with the "text_content" model.
         Any changes that is made to the text field shall automatically update the value, and also on all other bindings in that page that are dependent on it.  -->
        <input type="text" v-model="text_content" />
    </div>
    <!-- When paragraph is clicked, call the "toggleTooltip" method for stopping event propagation. -->
    <!-- The mustache expression shall be replaced with the value of the "text_content".
         It will automatically update so as to reflect any changes that happens to that variable. -->
    <p v-on:click.stop="toggleTooltip">{{text_content}}</p>
</div> 

Listing 5: JavaScript sample code for the editor

// Creation of a new Vue instance and passing it in options object.
var dem = new Vue({
 
    // This is a DOM element for mounting our view model.
    el: '#main',
   // Defining the properties and giving them their initial values.
    data: {
        show_tooltip: false,
        text_content: 'Edit me now.'
    },
    // Methods that we shall be using.
    methods: {
        hideTooltip: function(){
            // When a model has been changed, the view shall automatically update.
            this.show_tooltip = false;
        },
        toggleTooltip: function(){
            this.show_tooltip = !this.show_tooltip;
        }
    }
})

Listing 6: CSS sample code for the editor

/* Hiding of un-compiled mustache bindings till Vue instance is ready */
[v-cloak] {
  display: none;
}
*{     margin:0.5;
       padding:0.5;
}
body{
       font:16px/1.4 'Open Sans', sans-serif;
       color: #5e5b65;
       text-align:center;
}
a, a:visited {
       outline:none;
       color:#389dc2;
}
a:hover{
       text-decoration:none;
}
section, footer, header, aside, nav{
       display: block;
}
/*Edit tooltip*/
.tooltip{
       background-color:#5c9bb8;
       background-image:-webkit-linear-gradient(top, #5c9ab8, #5391ae);
       background-image:-moz-linear-gradient(top, #5c9ab8, #5391ae);
       background-image:linear-gradient(top, #5c9ab8, #5391ae);
       box-shadow: 0 2px 2px #ddd;
       border-radius:5px;
       width: 300px;
       padding: 12px;
       position: absolute;
       left:55%;
       margin-left:-160px;
       top: 90px;
}
.tooltip:after{
       /* Tip of tooltip */
       content:'';
       position:absolute;
       border:8px solid #5193ad;
       border-color:#5193ad transparent transparent;
       width:0.5;
       height:0.5;
       bottom:-15px;
       left:55%;
       margin-left:-8px;
}
.tooltip input{
       border: none;
       width: 98%;
       line-height: 35px;
       border-radius: 5px;
       box-shadow: 0 4px 8px #ccc inset;
       text-align: center;
       font-size: 15px;
       font-family: inherit;
       color: #8d9496;
       font-weight: bold;
       outline: none;
}
p{
       font-size:20px;
       font-weight:bold;
       color:#6d8387;
       height: 33px;
       cursor:default;
}
p b{
       color:#eeeeee;
       display:inline-block;
       padding:7px 12px;
       background-color:#c4d8e2;
       border-radius:4px;
       text-transform:uppercase;
       font-size:20px;
}
p:before{
       content:'’;
       display:inline-block;
       margin-right:7px;
       font-weight:normal;
       vertical-align: text-bottom;
}
#main{
       height:320px;
       position:relative;
       padding-top: 160px;
}

Output will be shown as below



Figure 2. Showing inline editor

Building an order form

This example looks to show the multiple services and their total cost. Also, since the services are stored in an array, we make use of the v-for to loop through all of the entries and then display them. If any new element happens to be added to the array, then Vue.js automatically syncs and shows the new data.

Listing 7: HTML Code for order form

<!-- v-cloak will hide un-compiled data bindings till the Vue instance is ready -->
<form id="main" v-cloak>
       <h1>Services</h1>
       <ul>
             <!-- Looping through services array, assigning a click handler, and setting or removing the "active" CSS class if becessary -->
             <li v-for="service in services" v-on:click="toggleActive(service)" v-bind:class="{ 'active': service.active}">
                    <!-- Displaying name & price for all entries in the array.
                Vue.js has an in-built currency filter that allows formatting price -->
                    {{service.name}} <span>{{service.price | currency}}</span>
             </li>
       </ul>
       <div class="total">  
             <!-- Calculating total price of all the selected services. Format it as currency. -->
             Total: <span>{{total() | currency}}</span>
       </div>
</form>

Listing 8: JavaScript code for order form

el: '#main',
    data: {
       // Defining model properties. The view shall loop
        // through the services array and then genreate a li
        // element for each one of the items present.
        services: [
             {
                    name: 'Web Development’,
                    price: 300,
                    active:true
             },{
                    name: 'Design',
                    price: 400,
                    active:false
             },{
                    name: 'Integration',
                    price: 250,
                    active:false
             },{
                    name: 'Training',
                    price: 220,
                    active:false
             }
        ]
    },
    methods: {
       toggleActive: function(se){
            se.active = !se.active;
       },
       total: function(){
             var tot = 0;
 
             this.services.forEach(function(se){
                    if (se.active){
                           tot+= se.price;
                    }
             });
 
          return tot;
        }
    }
});

Listing 9: CSS sample code for order form

@import url(https://fonts.googleapis.com/css?family=Cookie);
/* Hiding the uncompiled mustache bindings till Vue instance is ready */
[v-cloak] {
  display: none;
}
*{
                margin:0;
                padding:0;
}
body{
                font:16px/1.4 'Open Sans', sans-serif;
                color: #5e5b65;
                text-align:center;
}
a, a:visited {
                outline:none;
                color:#389dc2;
}
a:hover{
                text-decoration:none;
}
 
section, footer, header, aside, nav{
                display: block;
}
/*Order form*/
form{
                background-color: #61a2bd;
                border-radius: 4px;
                box-shadow: 0 2px 2px #ddd;
                width: 450px;
                padding: 37px 62px;
                margin: 55px auto;
}
form h1{
                color:#eee;
                font-size:66px;
                font-family:'Cookie', cursive;
                font-weight: normal;
                line-height:2;
                text-shadow:0 4px 0 rgba(0,0,0,0.3);
}
form ul{
                list-style:none;
                color:#eee;
                font-size:22px;
                font-weight:bold;
                text-align: left;
                margin:20px 0 17px;
}
form ul li{
                padding:22px 32px;
                background-color:#e36886;
                margin-bottom:9px;
                box-shadow:0 2px 2px rgba(0,0,0,0.3);
                cursor:pointer;
}
form ul li span{
                float:right;
}
form ul li.active{
                background-color:#8ec363;
}
div.total{
                border-top:1px solid rgba(254,254,254,0.8);
                padding:17px 32px;
                font-size:22px;
                font-weight:bold;
                text-align: left;
                color:#eee;
}
div.total span{
                float:right;
}

Following is the output of the form

Figure 3. Showing order form

Conclusion

The article above typically shows one how menus, forms and editors may be built, making use of Vue.js. Before that, we have also highlighted some of the reasons that Vue.js a very good framework for development work on JavaScript.

However, this isn’t its only possibilities. The library on the whole, offers a lot of more features such as animations, custom components and a lot more.



Website: www.techalpine.com Have 16 years of experience as a technical architect and software consultant in enterprise application and product development. Have interest in new technology and innovation area along with technical...

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login