What Is Vue.js
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/