Vue is a fairly new front-end framework that is gaining a lot of popularity among developers and is now one of the top 3 frameworks along with Angular and React. Created in 2013, its simple integration, the lightweight and progressive design have converted a lot of developers to fans of their product. Vue is easy to learn, flexible and can use to build an API from top to bottom or only used on a few components. The fact that is incrementally adaptable means it can be implemented on legacy code to upgrade it one component at a time. This article will serve as a beginner guide to the framework where I will talk about just a few of its features.
The fundamentals
The structure is built on top of Javascript, HTML and CSS, if you are comfortable with those it easy to jump right in and begin using the framework, it's not loaded with a lot of new terminology like some of the other frameworks. With just a bit of boilerplate code, you can access the library and be writing cleaner code with very little research. From Vue's website: “The core feature of Vue is declarative rendering”. Their rendering functions tell the program how (as opposed to what) to run.
At its core, the structure of components pass options arguments into functions that return another object.
Source: https://vuejs.org/tutorial/#step-2
Directives
A directive is an instruction inside the HTML of a DOM element to do something. These can take on many forms, functions, methods, and event handlers or even implement version control. Vue has numerous built-in directives ready for us or they can be custom created by the user if one doesn’t already exist to fit your need. Below are a few examples of some that already exist in the library.
Conditional directives for if, else-if and else:
source: https://vuejs.org/guide/essentials/conditional.html#v-else
Iteration directives for easily looping through collections:
https://vuejs.org/guide/essentials/list.html#v-for
Inline handlers make dynamically adding event handler functions a breeze.
source: https://vuejs.org/guide/essentials/event-
handling.html#key-modifiers
Both of the above directives accomplish the exact same thing with the second using a bit of Vue shorthand.
For a handler that is a bit more complex the directive would be used as a method such as the following:
source: https://vuejs.org/guide/essentials/event-handling.html#key-modifiers
Hooks
A Lifecycle hook is a function that is triggered to be run on a component at some point during the multiple steps a component takes being integrated into an API. Components are created, the stage is set, it gets added(mounted) to its place on the DOM, etc. At any of these points in this cycle, a hook can be added before or after the step is taken. These functions utilize the 'this' keyword to set the context. Here is the full list of lifecycle hooks to use in Vue:
source: https://learnvue.co/tutorials/vue-lifecycle-hooks-guide
Conclusion
The easy-to-navigate documentation and the large community of users make doing research on the framework a piece of cake. Using Vue to create your project will make your code way more concise and easier to read, give you access to their nifty developer tools, and set the organization's expectations for your team. It's easy to see why this framework has so many loyal devotees.
Top comments (0)