I am a full-stack developer at Syncrasy Tech (IT solutions company). I love writing React codes. But why I am telling you this as we are here to discuss the Vue.js best practices for web development. I am telling you this so that you can understand my background and why I’m discussing here the Vue.js.
I love working on React codes, but I hate reading them. This is the reason where I fail to code. Even with the best code review practices, I can’t figure out the nesting of React components that simply helps to create more complex UI structures in web apps.
The solution to this problem is Vue that is now not so new in the block of web app development. I have heard a lot about Vue async components, server-side rendering, tools, and libraries. Perhaps you find this myriad of terms to be confusing. Believe me, you’re not alone in that, many developers of all levels feel the same way when they don’t know the Vue best practices.
A few days later, I finally decided to get my codes into it. What I am sharing here are the numerous best practices that I have learned through my experience with Vue. I’m ready to share what I’d find.
Let’s Start
Try to learn everything at once on Vue can be overwhelming. Let’s start with the numbers. Today Vue has 147K Github’s stars leaving behind the JS giants like Angular (50.6k stars) and React (135k stars).
I have split Vue’s best practices into four categories:
Vue Functionalities
Vue’s functionalities have a lot of stuff to discuss under the hood automatically. Vue.js is a simple view-oriented platform that is its first main advantage. All information in coding is valid only if it interacts correctly with the named and nested named views.
Creating a single view is pretty simple in Vue, you only have to load the interface and add JavaScript to start the development of your web app.
let vm = new Vue({
el: "#my-webapp",
data: {
firstName: "MyFamous",
lastName: "Magazine",
}
})Then, a bit of markup to get the final view:
<div id="my-webapp">
<h1>Hello, {{firstName}} {{lastName}}!</h1>
</div>What does the above code reveal?
The above coding example shows how Vue automatically renders elements without using codes. Simple syntax is used to send the data to view directly. Adding instance properties can be used for Vue elements rendering.
Vue systems such as JQuery keep the information in DOM and for all the additional changes developers need to perform rendering and modification of the related parts. Let’s move onto the other parts of Vue functionalities.
Components
For web apps, Vue developers can use components just like other libraries by using Vue.compoment. A component can include a name, configuration or identifier.
Vue.component('component-name', {
/* options */
})The single-file components work very well for small to medium-sized web development projects. It is pretty easy to use Vue components in a single file and because of the benefits of JavaScript logic, CSS styling, and HTML code template. Also, see an example:
<template>
<p>{{ hi }}</p>
</template>
<script>
export default {
data() {
return {
hi: 'Hi Folks!'
}
}
}
</script>
<style scoped>
p {
color: yellow;
}
</style>Vue single file components use WebPack to provide the ability to use and apply modern web features to your web app. Coders can specify a template built using Pug using preprocessors:
TypeScript
SCSS
Sass
Less
PostCSS
Pug
Vue v-bind function allows components to accept data from the parent components (Props) that can be seen in the array of strings:
props:{
title: String,
likes: Number,
isPublished: Boolean,
commentIds: Array,
author: Object,
callback: Function,
contactsPromise: Promise // or any other constructor
}This will not only document your components but will also warn you when you pass a wrong code type in the browser’s JavaScript console.
In short, Vue offers great flexibility to web app developers that suits different development strategies and also facilitates the interaction with different Vue libraries.
Events and Handlers to Handle Errors in Vue
Vue JS is a progressive JS framework that focuses on the view layer and a system of supporting libraries. For all stages of web app development that use Vue, events are created on the directives v-on and colons that are used to identify the event type such as v-on click.
A simple example of v-on can be this:
<div id="example-1">
<button v-on:click="counter += 1">Add 1</button>
<p>The button above has been clicked {{ counter }} times.</p>
</div>Some examples of HTML DOM Events in Vue:
on change
on click
on hover
on load
on mouse-out
on mouse-over
on load
Event Handlers in Vue JS
Handlers are assigned to deal with the errors occur in the Events. It allows a developer to write the code when a specified event is triggered.
Conditional Rendering and Loops in Vue
Conditional rendering in Vue means to remove or add some elements from the DOM if a specified value is true. This is the best way for conditional data binding that allows developers to connect information when a particular condition is true. You can use v-if directive for conditional rendering.
See an example:
<template>
<div>
<!-- v-if="javascript expression" -->
<h1 v-if="isActive">Hello Vuejs</h1>
<button @click="isActive= !isActive">Click</button>
</div>
</template>
<script>
export default{
data:function(){
return{
isActive:false
}
}
}
</script>You can use v-else to extend the v-if directive:
<h1 v-if="isActive">Hello Vuejs</h1>
<h1 v-else>Hey Vuejs</h1>You can extend it further by using v-else-if block:
<h1 v-if="isActive">Hello Vuejs</h1>
<h1 v-else-if="isActive && a.length===0">You're vuejs</h1>
<h1 v-else>Hey Vuejs</h1>If the value that a programmer wants to evaluate is true, then run the v-if template. For further extensions, v-else or v-if-else directive is triggered.
Vue JS contains a simple API protocol that allows making space for the v-for directive that renders a list of items into the DOM.
Example:
<template>
<ul>
<!-- list rendering starts -->
<li v-for="user in users">{{user.name}}</li>
</ul>
</template>
<script>
export default{
data:function(){
return{
users:[
{id:1,name:"samuel"},
{id:2,name:"queen"},
{id:3,name:"rinha"},
]
}
}
}
</script>In the above coding, a loop runs through the code in the form of the array using v-for directive. The array refers to objects that allow users to see properties present inside the array.
Output:
samuel
queen
rinha
Two-way data binding to speed up the development process
One of the main features of Vue is its reactive two-way binding that keeps your data, arrays, and variables in sync with DOM without requiring you to do anything else. Vue uses v-model directive for two-way binding. The v-model directive binds the input element to the name property using v-model directives that update the input field and also updates the name property field linked to it.
How does it work?
<template>
<input v-model="name" placeholder="name"/>
<p>{{name}}</p>
</template>
<script>
export default{
data:function(){
return{
name:""
}
}
}
</script>
<template>
<input v-model="name" placeholder="name"/>
<p>{{name}}</p>
</template>
<script>
export default{
data:function(){
return{
name:""
}
}
}
</script>The v-model directive comes with the option of .lazy modifier that updates the data property after change event occurs.
You can also use .trim function to remove the white space from your code.
The option of .number modifier is there if you want to accept numbers to the input field.
Finally, these are key strengths of Vue.js that you can use to code your web apps correctly. So, if you are starting out a new web development project, then Vue.js is your choice. It leads the game with its elegant features, style guidelines, easy coding, and also save your efforts.
