At the core of Vue.js is a system that enables us to declaratively render data to the DOM. The data and the DOM are linked, and everything is reactive in Vue. In this lesson, I will show you how to use v-bind:title directive in Vue
Instructor: 00:00 I have already included the Vue library. Let's create a new Vue instance, new Vue. We need to specify the element. I'm going to use this div as an ID. I need to specify the app.
00:20 This is the data property. This data property will be bound with DOM elements. This is a reactive binding. I'll show you how to use the reactive binding. I'm going to create a new property "Hello Vue." This data is reactively bind with DOM elements, so I can use the string interpolation now.
00:44 Let me write the message. Here, we have "Hello Vue." Let me update that "Hello Vue." You can also add another stuff. I'm going to add a new date. I would like to display the date in string format. This time, I'm going to use the span. I would like to show the declarative rendering.
01:12 This is declarative rendering. I can use the Vue bind attribute. It's a directive Vue bind. It's a directive. Vue bind, we bind title. Let me provide the property which is message. Here I'll say, "Show me date." If I hover on the span, you'll see this "Hello Vue." It is going to give me the date.
01:40 How Vue is declarative rendering? If you open the console, I can also change the message by using the app.message variable. You'll see the "Hello Vue." Let me update the message "Hello learning Vue."
01:56 I'm going to hover on this Show me date. Boom. Now you'll see the "Hello learning Vue." This is declarative rendering or this is reactive binding in Vue