It's time to ditch Medium for good! 🌈⚡️

Introducing Devblog by Hashnode. Blog on your domain for FREE. Highly customizable and optimized for developers.

Learn more

What are some important concepts to understand while learning Vue.js?

I am thinking to start learning Vue.js. Just wanted to have a brief idea about what it is all about, its distinct features and important concepts.

Write your answer…

The two core concepts of Vue.js are:

  1. Data driven view.

    In Vue.js the state of the DOM is just a reflection of the data state. You connect the two together by creating "ViewModel" objects. When you change the data, the DOM updates automatically. The actual DOM manipulations are encapsulated inside "directives", which are objects that observes an expression, and react whenever the result of that expression changes.

    <span v-text="message"></span>

    Here v-text is a directive: its job is to update the text inside the <span> whenever the message property in your data changes.

    This might be confusing before you actually start to try it, but the core idea is simple (albeit very important): when you want your view to change, don't think in the imperative mindset of manually updating the DOM with jQuery; instead, think about how to express the relationship between your view and the data declaratively inside the template. Once you declare that relationship, Vue will help you do the rest.

  2. Components.

    UI can get large and complex, and we want to isolate a complex application into small, decoupled units so that they are easier to understand and maintain. In Vue.js, we achieve this with components - which are essentially ViewModels with pre-defined behaviors. Think of your UI as a tree of components. Vue.js provides an API to define, compose and communicate data between components.

Thanks Evan. I am learning Vue.js and really liking it. :)

Reply to this…

Share your programming knowledge and learn from the best developers on Hashnode

Get started

Glad to know that you are considering Vue.js. It is indeed quite compact and easy to learn JavaScript library dedicated to only View layer. Basically it connects view and model via two way data binding. You can focus on the following while getting started:

  • Two-way data binding
  • Event handling
  • Data rendering
  • Filtering and ordering

Good luck!!

Reply to this…