Intro to vue.js

What Is Vue.js

Vue is a progressive frontend javascript framework that allows you to add reusable components into any web application without the need for rewriting your entire codebase. Designed to be nimble and easy to learn, Vue provides many of the advantages of ReactJS and Angular 2.0 but with a much gentler learning curve and with fewer restrictions. Like React, Vue is a component based, view layer framework and deals with a virtual DOM. And like Angular, Vue supports two way binding and expresses it's syntax through augmented HTML tags, allowing you to keep your data in sync with the DOM without any extra effort. We'll write a simple app to showcase some of the core Vue features including templating, two way binding and conditional statements. Now it's time for some code: Example 1 - For-loop & One Way Binding

See the Pen Nice Vue by richa (@gricha2380) on CodePen.

The second app will be a bit more complicated. We'll fetch AJAX data, apply conditional logic in our for-loop and update our model with two way data binding. Example 2 - Conditional loop & Two Way Binding

See the Pen Vue two way binding by richa (@gricha2380) on CodePen.

Both these examples are very simple and easy to understand for anyone with vanilla JavaScript experience. To get the hang of Vue you should explore these basic concepts: Vue Instance Every Vue app begins by declaring a new instance with the following decliration. The instance can hold several optional objects to hold data, methods or templates.

new Vue({...})

Directives In Vue, directives are what attach to the standard HTML elements on the page and provide dynamic functionality. All directives begin with the prefix v-. Some common directives include: v-model, v-if, vi-if and v-show.   Components Like many other modern frameworks Vue supports component abstraction. A Vue instance is defined with the following syntax:

Vue.component('component-name', {...})

Component options are defined in the associated object, and instances of it can be rendered on the page using HTML style tags.

<div><component-name></component-name></div>

Another simple example can be found on the official Vue site:

See the Pen bKOzzZ by richa (@gricha2380) on CodePen.

These absolute basics should give you a taste for how Vue works. For those interested, a good place to start dive deeper is the fantastic official docs: https://vuejs.org/