Writing an application with Vue:
Introduction: Vue.js is a progressive framework for building user interfaces. It is one of the most popular JavaScript frameworks to make it easy to build user interfaces from the grounds up in incremental manner. The core library is a view only framework and as such can be linked into web pages directly from a content data network. For example, if we want to build a feedback or survey solicitation system, the following article will help get started.
Description: A sample web page to be written in Vue could start with just the template, style and script as shown in reference 1. All of this can be in the same web page but Vue provides excellent integration with many other frameworks so it easy to package code in single file components that end with .vue extension. These can then be combined into the main page with the help of component declaration and use. Each view file allows specifying a template, script and style snippet.
A vue instance consists of a root Vue instance and includes a tree of nested, reusable components when the application is well-organized. The instance created with a dictionary for data and methods which tells the Vue’s reactivity system how to respond when the data changes from the user interface. There is a freeze method available which can prevent the existing properties from being changed but for the most part, a vue instance responds to the user’s directives.
As with all user interface, the vue instance goes through a lifecycle and there are hooks available such as mounted, updated and destroyed so that the stages can be switched. All lifecycle hooks are called with their ‘this’ context pointing to the Vue instance invoking it.
The syntax used to describe the template, style and scripts do not change from what the HTML expects them to be. The data binding happens with the “Mustache” syntax and can include raw HTML with the v-html directive. List rendering occurs with an iteration over an array specified with the v-for directive. Filtering happens with the v-if directive.
State can be maintained to avoid re-rendering. This requires the use of keep-alive directive surrounding the component Together with data, methods and state, the vue instance can be successfully tested in all three forms: unit-testing, component testing and end-to-end testing.
When we build a feedback or survey system, we simply define the template to comprise of the component items we want to show. For example, a five-star feedback rating system will comprise of those five stars as radio controls that can be turned on in sequence on mouse hover and all of them can be specified together in a single floating action button also called a ‘vue-fab’. This vue-fab can then specify methods that can be as simple as logging the rating given by the user or making API calls for sophisticated actions.
Conclusion: The framework provides incrementally adoptable components that can be mixed and matched to create a view and complex controls, logic and workflow can be broken down and packaged into granular and reusable components.
Reference:
The index.html for a rudimentary Vue.js application:
<!DOCTYPE html>
<html>
<head>
<title>Sample application </title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>
The sample application
