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…

Hashnode is a friendly and inclusive dev community.
Come jump on the bandwagon!

  • 💬 Ask programming questions without being judged

  • 🧠 Stay in the loop and grow your knowledge

  • 🍕 More than 500K developers share programming wisdom here

  • ❤️ Support the growing dev community!

Create my profile

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…

The Author Card

Alfie Campbell's photo

Alfie Campbell

The CSS guy!




Jul 11, 2015