Vue.js

 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 ground up in an 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 us 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 on the same web page but Vue provides excellent integration with many other frameworks so it is easy to package code in single file components that end with the .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 that 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 interfaces, 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. 

A working-sample application: https://1drv.ms/u/s!Ashlm-Nw-wnWyB2rx30dmeEoNxt_?e=ZHiGjt