Pana vue 1 binding instructions

Tutorial part 2: data binding, events, routing for the web framework Vue.js

The first part of the Vue tutorial dealt with control structures and components for structuring tasks and code. This is where the second part starts: It explains components in detail and explains data binding in more detail. It also deals with input processing and validation of user inputs, custom events and the routing system. With this knowledge, Vue can be used in large and complex projects: Without your own components, there is no structure in the project, custom events are important for communication, and knowledge of data binding and the reactivity model helps to avoid annoying errors.

To bind data to DOM objects, Vue uses the template syntax, which is based on HTML. It connects DOM objects declaratively with data of the Vue instance. When rendering, Vue converts templates into functions. This allows the framework to decide which components it has to re-render and which DOM manipulations have to result. Developers can also implement these rendering functions directly if they know the concepts of the virtual DOM.

Bind application data to DOM elements

Vue also works with directives for data binding - special attributes that begin with - and usually expect a JavaScript statement as an argument. The job of a directive is to apply changes to the DOM when the value of the JavaScript statement changes. In this way, side effects can be mapped in the DOM.