Important Update
What is Vue.js and how is Vue.js framework distinguished from other popular JavaScript frameworks and libraries? To begin, Vue.js tools have different applications that strictly speaking are not ReactJS alternatives. Vue.j supports developer templates whereas ReactJS does not. Vue.js vs ReactJS performance metrics are similar for speed, but faster development leans toward Vue.js.
In this Bytescout Vue.js for developers tour, we will explore essential Vue.js components, and more specifically Vue.js UI components, and we will go deeper than the average Vue.js tutorials for beginners and cover Vue.js templates. After we define the objective differences between these libraries and frameworks, we will focus on Vue with code snippets to illustrate the essentials, so let’s get started.
Vue.js projects typically add attributes to an HTML layout. This functionality resembles data binding in AngularJS. But a remarkable advantage of Vue.Js is a much faster and simpler procedure for creating apps which is based on Vue.js templates.
The capability to change button names with a single click is supported by Vue.js templates for example. Here we see that libraries have distinctive feature sets by design. ReactJS, on the other hand, does not support the use of templates, so in order to do the same simple task of renaming a button, we would have to use JavaScript to manipulate elements in the DOM.
So, here is a functionality that is highly streamlined by Vue.js, and this emphasizes the need for developers to become familiar with the available feature sets of as many libraries and frameworks as possible to optimize their coding. Vue and React share several design features in common:
When comparing React with Vue, we inevitably compare JSX with Templates. All React components build their UI functions in JSX which is an XML-type declarative syntax that works with JavaScript. Advantages of this system include:
Vue also supports render functions as well as JSX, but Vue extends this with built-in support for templates. Effectively, any HTML template is equally a valid Vue.js template. As a paradigm of development, this contains a set of unique advantages:
The necessity to learn a Domain-Specific Language in order to write templates with Vue.js is an easy learning curve for experienced frontend developers. And JSX would amount to a similar requirement for ReactJS developers, so on that score, they are still even. JSX is just a light syntax on top of ordinary JavaScript, which again is easy for coders already familiar with JavaScript.
Likewise, templates are just a simple new syntax over plain HTML with an easy learning curve for those who already know HTML. The great progressive leap forward with the Domain Specific Language is the ability to get a lot more actual development done with less code. Similar React tasks can require a lot more code when using JSX or render functions. Future readability and adaptivity is reduced by a larger bulk of coding, but an important question is, how long can such highly specialized and trendy library functions retain vitality and fend off deprecation?
If Vue and React are so similar, why use VueJS? Ultimately, Both Vue and ReactJS APIs support a virtual browser which is much easier than working with the actual DOM API. The virtual browser is developer-friendly compared to developing models directly with Chrome browser for example.
The virtual browser functions as a liaison agent to interface the developer with the live browser, which enables developers to define a user interface by modeling the UI with declared objects and their initial states. When object state changes, Vue.js and ReactJS both contain support to update the MVC. Since React is really just a collection of JS functions, it is quite easy for JS developers to pick up and use it right out of the box, basically in minutes! So what are the drawbacks to React?
A noteworthy advantage of Vue is its highly appraised CLI project generator. Vue CLI makes the task of starting a new project extremely easy with a choice of build system including Browserify and Webpack. And although React is currently innovating along similar lines with its create-react-app, there are several limitations to mention:
In other words, there are no problems per se when using React, but rather limitations. The overarching distinction between Vue and React is that Vue.js is a complex JavaScript framework that is intended, as the name suggests, to build rich front-end user interfaces. React is a less comprehensive JavaScript library for building user interfaces.
Generally, a framework is far more robust and feature-packed than a library of functions, and the generalization holds in this case. Vue.js is a sophisticated framework of templates and components deserving of a deep feature exploration, so let’s dive into our Vue.js tutorial and visualize the power.
Architects describe Vue as a progressive framework for building rich user interfaces. Distinct from other frontend frameworks, Vue was designed to be incrementally adoptable. The core library of functions operates solely on the view layer and can be rapidly adopted incrementally and integrated with other libraries in new and existing projects.
Vue was also designed with developing robust full-featured Single-Page Applications in mind, hence the emphasis on compatibility with other frontend tools and libraries – called companion libraries. And now that we have established the functional differences between Vue and React, it’s time to illustrate these principles with an introduction to coding in Vue.
We begin our developer tutorial with a discussion of a core system in Vue which enables you to declaratively render data within the DOM using template syntax. Here is the classic “Hello World!” with a slight variation as an intro to Vue.js syntax:
<!–– connect Vue.js functions with this script -->
<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
<div id="my_app">
{{ user_message }}
</div>
var app = new Vue({
el: '#my_app',
data: {
user_message: 'My World Vue!'
}
})
In addition to rendering a simple string template, Vue has effectively linked the data for user_message and the DOM so that the MVC is interactive. If you run the above example, you can actually open the JavaScript console of your browser and see my_app.user_message set to the string value, ‘My World Vue!’ This simple code illustrates a very important and powerful capability of Vue.js to bind data to DOM elements for easy manipulation. If you are just starting out with Vue.js and would like to follow the code samples in this tutorial and tinker with them, JS fiddle makes it easy to get rolling quickly. Note the HTML and JavaScript division on the page.
Next, let’s look at a simple method to bind element attributes. In this code snippet we are binding a hover title to a text element in the DOM:
<script src="https://unpkg.com/vue"></script>
<div id="my_app">
<span v-bind:title="user_message">
Hover on this text to see dynamic binding...
</span>
</div>
var my_app = new Vue({
el: '#my_app',
data: {
user_message: 'Page load date and time: ' + new Date().toLocaleString()
}
})
In Vue.js, directives are prefixed with v- to specify attributes built into Vue. In the above code, the v-bind attribute is a directive. In this case, the reactive behavior rendered DOM is to dynamically assign the value in data to the hover title. If the value changes the MVC model then Vue will auto-update the hover text.
Working with user input in Vue.js is easy and enables users to interact with an app’s dynamic content. To capture a user’s button click, use the v-on directive, and attach event listeners which then invoke methods corresponding to Vue.js instances. Let’s get started by combining a button click with a string manipulation to see how calculations on user input work together. In the following code snippet, clicking the button will run the method to reverse the text string order:
<script src="https://unpkg.com/vue"></script>
<div id="my_app">
<p>{{ user_message }}</p>
<button v-on:click="reverse_user_Message">Reverse String Order</button>
</div>
var app5 = new Vue({
el: '#my_app',
data: {
user_message: 'Birds Eye Vue'
},
methods: {
reverse_user_Message: function () {
this.user_message = this.user_message.split('').reverse().join('')
}
}
})
Above we see how the button click event triggers the calculation of reversing the string using built-in JavaScript functions for string operations, followed by the automatic update of the text element. Calculated values and attributes are an important part of the functionality of Vue.
Now let’s see how to use DOM elements bound to data with Vue functions to calculate and display a value from user input values. In this example, the user will input a Fahrenheit temperature value to one input box, and we will use Vue to calculate the Celsius conversion and add the calculated value to another input box. We use v-bind to bind a computed value to an input field in this way:
<script src="https://unpkg.com/vue"></script>
<div id="convert">
<input v-model="fahr" id="fahr" type="text" class="form-control" name="fahr">
<input id="cels" type="text" class="form-control" name="cels" :value="calculate_celsius">
</div>
var convert = new Vue({
el: '#convert',
data: function(){
return {
fahr: '',
cels: ''
};
},
computed: {
calculate_celsius: function() {
return ((this.fahr - 32) * (5 / 9))
}
}
})
<strong><em></em></strong>
Notice that the above method updates the state of elements and attributes without directly accessing the DOM. This is what really distinguished Vue, as all DOM work is managed by Vue components. Developers are thus free to focus on the logic rather than DOM mechanics.
If you are following this code example, you may have noticed that this binding and calculation resemble an AngularJS method. Looking at Vue.js vs AngularJS we see that Angular and Vue share some remarkable similarities for building frontend user interfaces. For an excellent introduction to coding with AngularJS see our Bytescout AngularJS Developer Tutorial. There is also a great resource in the architect’s Vue.js documentation.
Developers around the globe in the Vue.js user community contribute thousands of new components every month. Individual components are found in the popular awesome-vue project under components and libraries. The bit can also be added to a Git repository to discover components within it. These can be easily shared and installed with npm and Yarn. Below are several popular collections of Vue.js components with catchy titles:
Vue Material is a Vue component library which comprehensively implements Google’s material design spec, it supports components for all Web Browsers with dynamic themes and a clear API.
Bootstrap-Vue component lib supports responsive mobile UIs, and comes with automated WAI-ARIA markup.
Quasar supports many Vue.js components with a rich selection of functionality for building responsive web apps and mobile apps by just including HTML tags in page and layout templates.
Let’s have a look at Quasar, which is one of the popular component libraries for Vue.js. Here is a cool example of a user interface on a single page application built with Quasar and Vue functions. This shows the reactivity which can be built into page elements with Quasar component library powered by Vue and JavaScript. Just to mention one of the hundreds of UI components available in Quasar, let’s look at the button offerings.
Quasar buttons have spinner effects which show some feedback to the user on click in case of delay or file load progress. Quasar buttons have the distinctive q-btn tab, and we first load a button like this:
<q-btn loading="" color="primary" click="clickMethod" label="This Button Label "></q-btn>
<template>
<!-- Example Round shaped (with spinner) in loading state -->
<q-btn :loading="loading" round="" icon="map" color="primary" click="handler">
<q-spinner-oval slot="loading"></q-spinner-oval>
</q-btn>
</template>
<script>
export default {
data () {
return {
loading: false
}
},
methods: {
handler () {
this.loading = true
// here is a simulated time delay to see the spinner:
setTimeout(() => {
this.loading = false
}, 9000)
}
}
}
</script>
The Quasar organization site contains a great intro to its popular library. This is a complete exposition of the methods, layouts, styles, and other features that are available for accelerating user interface design with Quasar and Vue. ES6 is recommended by the designers of Quasar, along with good command of Vue native components. There is a Udemy course on Quasar and plenty of documentation, also listed on the above tutorial page.
We’ve touched on Vue.js best practices for developers as well as several key Vue.js developer tools as an intro to the fast-paced DevOps coding environment of popular JavaScript web app frameworks and libraries. The learning curve getting started can seem overwhelming, but you will be happy to see immediate progress in your coding because there are immediate visual benefits using Vue.js to architect your user interfaces, and this is a great skill to add to your portfolio.
About the Author
ByteScout Team of Writers
ByteScout has a team of professional writers proficient in different technical topics. We select the best writers to cover interesting and trending topics for our readers. We love developers and we hope our articles help you learn about programming and programmers.
This is the second part of a series of articles on formatting and manipulating the Excel file using ByteScout Spreadsheet SDK. Many organizations rely on...
On April 24th, ByteScout Team released 9 web apps for developers and end-users that will help you solve daily tasks and speed up the working process....