DEV Community

Cover image for Vue.js explained

Vue.js explained

bekbrace profile image Bek Brace ・2 min read

Vue.js is a JavaScript framework for building frontend UIs, in Vue you can start simple, and then step by step you can add the tools and features that you need to build a complex web application.

At its core it provides a way to build components that encapsulate data or state in your JavaScript reactively to a template in HTML.
We call these components declarative views because the same data inputs will always produce the same output in the visual UI.

When we declare data on this data object, it binds to the HTML on the template above when the value of the data changes, the component will automatically rerender; and the framework does a lot of work underneath the hood to make sure that this process delivers the desired performance across a huge component tree.

We can work with this data in the template thanks to views HTML based template syntax; we can interpolate a value for expression using double curly braces and we also have a variety of directives to control the behavior of the HTML based on the data.

We can use v-if directive to only render an element when the value on the right side is truthy and then we might have a fallback element after that that's only rendered when the value is falsey with V else, we can make the app interactive by listening to events using the V-on: click directive, we can listen to an event on an element then run some code to handle that event on the right side.

We can do that directly to the template or define a custom method and the components methods object.

The method has access to our reactive data and and that means that we all have to do is change the value of the data and the component will automatically will rerender.

I am planning to create a tutorial video on my YT channel on Vue and Django working hand-in-hand to create a full fledged web application.

You can check out my channel now and if you like what you see, I would love to have you as a subscriber

Discussion (2)

Editor guide
srikanth597 profile image

It was good framework.
I found sometimes it is lacking proper documentation for composition API.

bekbrace profile image
Bek Brace Author

That's true, Vue's API documentation is poorly written