VueJS looks good to me, yeah even better than ReactJS and AngularJS and friends. It just looks light and nimble and there’s a huge community behind this framework. My first post on this blog actually covers ReactJS – it was more than an attempt. VueJS documentation just looks cleaner to me, and I like that. I’m a bit late on the bandwagon here with VueJS, I’ve been spending quality time with PHP – I love PHP.
Here’s the documentation guide – VueJS Documentation
Let’s get started – we call the file per usual like so:
<!-- development version, includes helpful console warnings --> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
And boom, were good to go just like that – easy. And I like that. We can now unpack VueJS power.
I want to change the context a bit from the docs, I’ll add some physics.
Here’s the markup.
<div id="quantum">
{{ atom }}
</div>
… and here’s the VueJS scripts
var app = new Vue({
el: '#quantum',
data: {
atom: 'Hello Electrons'
}
})
This would output “Hello Electrons” once rendered. But when we examine the “app” variable – we can see a bit of the MVC model packed in it. All in just a couple of lines, and from here we can extrapolate all sorts of things.
The new Vue() object here is assigned to the variable “app”. This app takes an object with set attributes and properties just like any other library/framework, but this one has the target element “el”. “el” here is bound to the element id #quantum. In regular javascript or jquery speak, this is the equivalent of –
// regular plain vanilla javascript
var app = document.getElementById('quantum');
// jquery
var app = $("#quantum");
There you go, easy does it. However with the VueJS approach, we use the “data” property to handle the model part. Now, this contains the data set you are working with. In this example, we are using an object with property “atom” which contains the value ‘Hello Electrons’.
Instead of processing data elsewhere, everything is contained with the new Vue() method calling the object. This is not only better organization, but just easier on the eyes compared to vanilla javascript and jquery.
This example highlights the power of VueJS in its simplest form. Digesting an understanding of just these basics, we can expand our module into all sorts of different ways and possibilities. So stay tune, we will definitely tackle more in the next post.