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 pervious post and its continuation now will help us get started.
The view state can be maintained to avoid re-rendering. This requires the use of a 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.
Vue brings the best of other web frameworks such as Python Django and Java Spring. There is a router library available that supports nested route/view mapping, modular, component-based router configuration, route params, query, wildcards, View transition effects, Fine-grained navigation control, Links with automatic active CSS classes, HTML5 history, and Customizable Scroll behavior. There is a loader for webpack that allows other webpack loaders such as Sass loader for style and Pug loader for the template. Custom loader chains can be applied to custom blocks in a .vue file. These are automatically invoked with mere compliance to conventions.
When we build a feedback or survey system, we simply define the template to comprise 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 vue file importing the corresponding ‘vue-star-rating’ module.
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:
<template>
<div id="app">
<img src="./assets/logo.png">
</div>
</template>
<script>
import StarRating from 'vue-star-rating'
export default {
components: {
StarRating
},
methods: {
setRating: function(rating){
this.rating= rating;
}
},
data: {
rating: 0
},
template: ' \
<table> \
<tr> \
<td> \
<table><tr><td> \
<p>Feedback basis:</p> \
<star-rating :rating="1" :max-rating="1" :show-rating="false"></star-rating> \
<p>5.0<span class="subscript">/5</span></p> \
</td></tr></table> \
</td> \
<td> \
<p> Rate this package </p> \
<star-rating @rating-selected ="setRating" \
:rounded-corners="true" \
:border-width="4" \
:padding="3" \
:animate="true" \
:star-points="[23,2, 14,17, 0,19, 10,34, 7,50, 23,43, 38,50, 36,34, 46,19, 31,17]"></star-rating> \
</td></tr></table>'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
