Vue.Js v-bind Directive Example

Last updated  

0 Shares

In the previous example, we created Vue.js Hello World example using the text interpolation method in Vue.js. Here we will see Vue.js v-bind directive example to bind the HTML element to data.

Directives in Vue.js are extended HTML attributes with the prefix v-. There are many directives provided by Vue.js and one of them is v-bind directive.

Other Vue.js tutorial

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
            <title>Vue.js v-bind directive Example – By Kodehelp.com</title>
            <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <h1>
                <a href="https://kodehelp.com" v-bind:title="message"> Welcome to Kodehelp.com !! </a>
            </h1>
        </div>
        <script type="text/javascript" src="vuejs-bind.js"></script>
    </body>
</html>
var bindApp = new Vue({
el: '#app',
data: {
message: "Hello World!! Welcome to Kodehelp.com. This is the Vue.js v-bind example."
}
});

In the above example, we have created HTML and Javascript file. Below are the step to get the Vue JS Hello World Example up and running

  • Create HMTL boilerplate file.
  • Add Vue.js library in the HTML file.
  • Add id="app" to div element. This id can be any text but remember that we will be using this id in the Javascript file.
  • Create the javascript file vuejs-bind.js and import this javascript file in the html at the bottom before closing bodytag. As we are using the id of div in the javascript file in creating the Vue object, it is mandate that the div element is present before the Vue object.
  • Instantiate a new Vue object bindApp and tell it with el that our app is #appdiv.
  • Finally add the v-bind:title directive to bind the message to the title attribute of html  tag.
  • Open the html file in the browser and you should see the message on hover of hyperlink.

I hope these steps make your Vue.js v-bind directive example up and running.