15 Feb 2018
Intro to vue.js
What Is Vue.js
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.
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.
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.
Like many other modern frameworks Vue supports component abstraction. A Vue instance is defined with the following syntax:
Component options are defined in the associated object, and instances of it can be rendered on the page using HTML style tags.
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/