The Beauty of Vue.js


Notice: A non well formed numeric value encountered in /home/ghadeerr/public_html/ghadeer.io/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

After using ReactJS/Angular/Angular 2, it’s not hard to get locked in to the frameworks way of doing things. Although less true with ReactJS, Angular (especially Angular 2) makes it difficult to use anything non-angular into your app.

When working with legacy/enterprise applications this is even more true. There are times when you are trying to do something simple but are unable to because of the complexity of the application.

Vue to the rescue

Vue allows us to embed JavaScript into virtually any JavaScript application because it really is just JavaScript. Doing so is quite simple, you bind your Vue Component to the DOM and Vue’s takes care of the rest. Vue reminds me of KnockoutJS, which started to pioneer two-way binding, unfortunately the Knockout community has diminished and Knockout itself does not support lifecycle hooks, it’s also quite verbose.

So how do we Vue?

Now that we have our html with vue bindings, let’s look at the the javascript.

There really is nothing fancy going on here but let’s break it down.

1. el : ‘#app’ – This is the DOM element that Vue will bind to.
2. mounted – This function is fired when Vue has successfully bounded to our DOM element.
3. methods This allows us to defined custom functions that we can call from our HTML template.

Again, the most powerful part of Vue is the fact that we can embed it in any application, Angular/Ionic/React.

If you enjoyed this article, enter your email below to get free updates!