April 9, 2018
Vue is one of the newest front-end frameworks to gain traction within the development community. It’s a progressive framework, which focuses on the view layer only. A huge benefit is that it can easily integrate within your current build systems or existing projects, allowing sections of a large scale site to be created within Vue without clashing or having to rewrite code. Vue also has a small file size of around 50-60 kb, which is a bonus when including it in a project.
The easiest way to include Vue is via a CDN link:
In the CodePen I have two properties; name and location. These are both bound to the corresponding inputs. If a user amends the inputs, it will change the output instantly. This is known as two-way data-binding, which links the view of the application directly to the Vue instance, which can then be used wherever necessary within the application.
Data within the application can be manipulated using various properties within the Vue instance, which comprise the following:
An example of each of these can be found on my CodePen.
There is still lots to cover within Vue such as components or animations, but I hope this helps provide a basic insight into how to get going with Vue! Here are a few examples of where we have used Vue to create one page apps for clients: