Directives

Vue uses the concept of directives; these are similar to Angular directives. Just like Angular, Vue provides a set of built-in directives.

The following is an example of how to bind a value to an element attribute using the built-in v-bind directive:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Bind me!</title> 
 
    <!-- development version of Vue.js --> 
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 
</head> 
<body> 
 
<div id="app"> 
    <input type="text" v-bind:placeholder="defaultMessage"> 
</div> 
 
<script type="text/javascript"> 
    let app = new Vue({ 
        el: '#app', 
        data: { 
            defaultMessage: 'Username' 
        } 
    }); 
</script> 
 
</body> 
</html> 

Another built-in directive, called v-if, allows us to conditionally ...

Get Learn TypeScript 3 by Building Web Applications now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.