Following my recent article on Vue.js (Why learn Vue.js as a backend developer), I decided to compile a complete list and tutorial of things to learn in Vue.js for backend developers. As a backend developer, I have been trying to figure out the part and specific things to learn in Vue.js instead of trying to wrap my head around everything that Vue.js offers since am not a front-end major.

If you have been in this same shoe as I was, well this article is for you because I carefully select specific things that you need to learn in Vue.js as a backend developer.

WHAT IS VUE.JS

Let’s get started by defining and knowing what Vue.js means and how it’s different from other frameworks.

VUE.JS: Is a progressive JavaScript framework that focuses on building user interfaces.

It works on the view layer only
Incrementally adaptable.
Easily integrated into other projects or libraries.
Capable of powering advanced SPAs

LIST OF WHAT TO LEARN IN VUE.JS FOR BACKEND DEVELOPERS

Reactive interfaces
Declarative rendering
Data binding
Directives
Template logic
Component and nesting
Event Handling
Computed Properties
SSR
Handling Form
Reusability & Composition
Testing
Deployment

REACTIVITY INTERFACES/SYSTEM: One good thing about VUEJS is the Reactivity System, if a datum is changed it triggers and update of the page to reflect the change. With this feature of VUEJS fully functional backend developers can easily create real-time and reactive dashboard among others things that can be done with VUEJS. Read more about it here.

DECLARATIVE RENDERING: This is the process of writing code with the intention of hiding the implementation details and focusing on the outcome. Under the rendering, you should look up things like Conditional Rendering and List Rendering which describe the use of conditional and iterative statements respectively.

DATA BINDING: Is the process that establishes a connection between the application UI and business logic. Vue enforces a one-way data flow between components. This makes the flow of data easier to reason about in non-trivial applications.

Uses of components

They provide organization and encapsulations for large projects
Re-usable code
Can be separated into .Vue files

// Define a new component called button-counter
Vue.component('button-counter', {
  data: function () {
   return {
     count: 0
   }
},
 template: '<button v-on:click="count++">You clicked me {{   count }} times.</button>'
})

EVENT HANDLING: v-on is the attribute added to the DOM elements to listen to the events in Vue.js. Learn how to emit different events and how to manipulate the template with event handlers.

Read More about it here

<input v-model="message" placeholder="edit me">

<p>Message is: {{ message }}</p>

REUSABILITY AND COMPOSITION: You should learn things like mixins for a flexible way to distribute reusable functionalities for a Vue component. Also look at things like Render Functions and JSX, Plugins, and Filters.

Read More about it here

TESTING: Vue-CLI has built-in options for unit testing with Jest and Mocha that works out of the box. A slight look into unit testing with these tools could be worth it.

Read More about it here

DEPLOYMENT: As a backend developer, deployment may be one of your things if your company doesn’t have a separate operational team, so a deep dive into Vue.js deployment procedures will be a good save.

Read More about it here

There are more things to look into and a lot that Vue.js offers out of the box, but in my own opinion I feel these are most of the things that a backend developer should focus more on.

ADDITIONAL TOOLS AND PLUGINS

VUE-ROUTER: Official router deeply integrated with VUEJS core.
VUE-RESOURCES: Handle web requests.
VUE-ASYNC-DATA: Async data loading.
VUE-VALIDATOR: Form validation plugin
VUE-DEVTOOLS: Chrome devTools extension

INSTALLING VUEJS

There are number of ways to implement VUEJS:

Include the script tag in an HTML file
Install using NPM
Use the VUE-CLI tool along with webpack
Install using the Bower Client-side package manager.

USING VUE-CLI TOOL

To install Vue.js using VUE-CLI TOOL is the easiest and my favorite way of installing Vue.js except when running with Laravel. Learn how to run the installation here.

VUEJS EXAMPLE

After installing Vue.js in our machine, we are ready to go, but before then lets to a look at Vue.js example.

Rendering data to the DOM and using Interpolation

<div id = "app">
  {{msg}}
</div>
var app = new Vue({
  el: "#app",
  data: {
  msg: "Hello world",
 }
});

I will be dropping articles and video tutorials on each of the topics listed above and also demonstrate how to connect the dots in creating a full-blown app with VUEJS.

Conclusions

There are lots you could learn with VUEJS, but as a backend developer, i decided to compile a quick list of topic that can may be very useful to learn quickly, this is based on my personal opinion and will be very glad to hear from you.

Thank you for reading my article.

Here at my blog or medium I regularly write about backend development, digital marketing and content management system. To read my future posts simply join my publication or click ‘Follow’ Also feel free to connect with me via Twitter, Facebook, Instagram.

If you are interested in backend development (or you’re internet enthusiast) both (Mobile | Web | Desktop) videos subscribe to my Youtube channel, we will be posting a collection of help full tutorials and guides like this one for artisans.

If you enjoy this post, make sure to let us know and share it with your friends and subscribe to my growing channel.

Sharing is caring.

#vuejs

Vue.js for backend developers