Vue Js Part:2 Declarative Programming

Declarative Programming is a programming paradigm for creating the structure and elements of computer programming that does not describe the control flow of the program or code but emphasizes its outcome or solution.

Declarative Programming is very easy to read because there is a lot of lower-level code and its details are hidden. Here we do not have to know much lower-level details of the system or code.

Vue.js core allows us to provide declaratively render data to the DOM using direct template syntax. See the following example:

Output:

Explanation:

The object created with the Vue constructor function in VueJS is called Vue Instance. To work with VueJS we need to create a Vue Instance with a new Vue, which will be the root instance of the Vue. And it remains as a Nested Tree. For example, a todo application will look a lot like this.


Root Instance
└─ TodoList
├─ TodoItem
│ ├─ DeleteTodoButton
│ └─ EditTodoButton
└─ TodoListFooter
├─ ClearTodosButton
└─ TodoListStatistics