GETTING STARTED WITH VUE JS

//GETTING STARTED WITH VUE JS

GETTING STARTED WITH VUE JS

GETTING STARTED WITH VUE JS

“Vue Js” is a modern yet simplistic view framework/library for developing single page applications (SPA’s)“Vue Js” saves developer with a lot of boiler plate code and configuration which they might have to know about when starting a new application in many of other familiar SPA frameworks like Angular Js or Ember Js etc.

The up and running thing with “Vue Js” is minimal as one might be able to simply add its base script file and simply make a new Vue instance by calling constructor new Vue () and that’s basically all you need to get started.

A typical setup might look something like this:

Getting started with vue js - mParsec

The heartening fact for me as Angular Js developer was that “Vue Js” takes a lot of syntactical syntax and concepts from Angular Js and most of the directives and services mimic those available in Angular Js we have a v-for loop in “Vue Js” which is more like ng-repeat in Angular Js, for conditionals “Vue Js” has v-if as compared to ng-if in Angular Js and it even has directives and components with almost same structure as in Angular Js. Other than Angular Js“Vue Js” also adapts concepts from React Js. The event handlers or data objects are handled in much same manner as in React Js. Another plus point to using “Vue Js” was the availability of a lot of tutorials and blogs on Vue so a new comer might be able to quickly get well equipped with important concepts.

Vue comes with data binding syntax much like in other frameworks and uses familiar {{}} handlebar based templates, here’s an example for binding a field dynamically.

Getting started with vue js - mParsec

Getting started with vue js - mParsec

Like Angular this is one way of doing a two-way data binding in Vue. We could even get the actual model object in our template using $data property

Getting started with vue js - mParsec

Of course, we can print out the Json object

Getting started with vue js - mParsec

Another Angular alike feature in Vue is the way it handles various events like clicking an element, key board inputs, mouse movements to name a few.

Getting started with vue js - mParsec

Getting started with vue js - mParsec

As in JavaScript or JQuery we can define our own event handlers using the on:eventname

Getting started with vue js - mParsec

Basically one might be able to use many such DOM events using v-on:* syntax, however there is a shorthand notation which uses the @ syntax

Getting started with vue js - mParsec

As mentioned earlier, the conditionals truly mimic the Angular counterparts as can be seen from example below

Getting started with vue js - mParsec

Getting started with vue js - mParsec

The user can use the v-show directive in place of v-if and the difference between the two will be in the way the DOMelements are handled. v-if will not allow the underlying list element to be rendered in first place while v-show will have it rendered but have it hidden from view through visibility property.

Loops can be as easy as declaring a loop variable and accessing the objects within the collection as illustrated by following example:

Getting started with vue js - mParsec

and we can simply access a particular index using the (value, index) structure in v-for loop

Getting started with vue js - mParsec

The “Vue Js” website provides a comparison with different web frameworks like Angular, React, Ember and many more. This information can be accessed through below Url.

https://vuejs.org/v2/guide/comparison.html

And finally, we’ll see an example for components in Vue. Components provide us the means to extend html and make our own custom elements. They promote reusability in our applications. Let’s look at an example of component.

Getting started with vue js - mParsec

Getting started with vue js - mParsec

We could build entire “Vue Js” app on jsfiddle.net and just use the CDN for “Vue Js” or we could install “Vue Js” by NPM (Node Package Manager), or alternatively we could use the vue-cli which provides us a command line based tool to work with “Vue Js”.

Links are provided for reference:

https://www.npmjs.com/package/vue

https://www.npmjs.com/package/vue-cli

We could start by creating a folder preferably under root of D: drive on windows (you can choose where you’d want to save such projects on either operating system WindowsMac or Linux; this is just for demonstration purposes)

Open up a power shell or command prompt and fire up below commands:

Getting started with vue js - mParsec

Once in this directory run below commands:

Getting started with vue js - mParsec

This will ask for your project name and related settings, once finished run:

Getting started with vue js - mParsec

To install and use features for vue-cli run below command:

Getting started with vue js - mParsec

Note: -g flag is to have this installed globally so one may be able to run this command from your system.  Once the install is finished run below command:

Getting started with vue js - mParsec

A typical setup could look like the one in below snapshot:

Getting started with vue js - mParsec

Next, we’ll cd (change directory) into the generated project folder and run npm install as well to install all necessary dependencies, and finally run npm run dev to start the dev server or npm run build to make a deployable project build of your app.

Please note that there are a lot of great features in “Vue Js” which are out of scope of this article. For more insight into those features check out the official documentation.

https://vuejs.org/v2/guide

This is the second article in series of blogs on new frameworks and tools. Please feel free to leave your suggestions and comments on what skills to cover up next.

By |2018-12-11T06:03:09+00:00April 10th, 2017|Technology|Comments Off on GETTING STARTED WITH VUE JS

About the Author: