Vue.js is a JavaScript framework for building interactive UIs. In Vue, you can start simple and progressively add the tools that you need to use like CLI, Router, State management to build complex web applications. At its core, it provides a way to build components that can encapsulate data or state in JavaScript and connect the state reactively to a templates in the HTML. The components are called declarative views because the same data inputs will always product the same output in the visual UI.
When we declare data in the data objects it links and binds to the HTML. In the template above, when the value changes it automatically re-renders. In other words, it is reactive and the framework does a ton of work under the hood to make sure this process is performant in a huge component tree. We can work with the data in the template. Thanks to the Vue HTML text based syntax, we can interpolate a value or expression using double braces.
We have a varieties of directives to control the HTML based on the data. We can use v-if to only render an element when the value on the right side is truthy and we might have a fall back element after, that only renders when the value is falsy with v-else.
We can make the app interactive by listening for events. Using the v-on click directive we can listen to an event on an element and then run some code to handle that event on the right side. We can do this directly in a template or define a custom method in the components methods object. The method has access to our reactive that means all we have to do is change the value of the data and the component will automatically re-render. That’s all it takes to build am interactive, reactive, declarative UI component with Vue.
Vue has a plugin system that allows you to easily drop in features like Router, State management, Firebase support and more.
On the next tutorial, we will dive more into Vue and build more complex web applications.
