The first thing I liked about Vue.js is that you can get started straight away by simply including a script tag into your page. You don’t need to spend hours getting a development environment set up or cloning down a starting package and working through all the files to try and understand what everything does.
The best thing about Vue is the reactivity. You create a new instance of Vue with a parent html element and now you can easily update the content. With JQuery you have to select the element and then update it. With Vue, its linked so you update the value in Vue and it instantly updates the value in the browser.
After using JQuery for many years it seems like magic. It just works. It feels like you should have to do a lot more steps to do than you actually have to. Its a great experience.
All the basic functionality you will need is built in. There are loops, such as v-for, and conditional statements, v-if, and a way to get the value from an input using v-model.
If you need to perform a function when a button is clicked, you simply give the button a v-on:click=”method-name” property and it is tied to the method you create. No need to add an event listener to a particular button with a particular ID. You can even reuse the method multiple times by adding the property to what ever element needs it.
To help you create reusable code, you can break things down into components. From reading other frameworks code this seems like common functionality and it is for good reason. You can even nest components within components.
One thing that I really like about Vue is the slot functionality. This allows you to insert the content on the page into your component, meaning you can easily pass content to it from a CMS by rendering it out on the page and then letting Vue re render it as needed.
As well as a generic slot, you can also create named slots. This allows you to be more specific by saying this content goes in this section of the component and this other content goes in this section.
This makes it easy to output and update dynamic content.
As a side note, I’ve found the new arrow functions to be very useful as they keep the context of this rather than having a new context inside the function.
I’m just getting started with Vue js but I can see why people are so excited about it. It has a certain way of using it but if you agree with that methodology then it really excels.
The thing I find hardest is having to go back to JQuery sometimes and having to do a lot more work to do something that is so simple in Vue js.
If you want to learn more then I suggest reading through the documentation to get the basics and then I would say take a look at the Learning Vue js series on Laracasts as it has some great examples of how you can use it.
Tagged with development