We will see how to do data binding in Vue.js
You can not use {{ }} with HTML attributes
For example, following syntax is not going to work
|
1 |
<a href="{{url}}" > Clcik Here </a> |
Insted you can use
|
1 |
<a v-bind:href="url" > Clcik Here </a> |
This is another syntax to achive same result
|
1 |
<a :href="url" > Clcik Here </a> |
This is the compled code for above example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <title>Hello World !</title> </head> <body> <div id='root'> <div>{{msg}} </div> <a v-bind:href="url"> Click Here </a> </div> </body> <script> new Vue({ el: "#root", data: { msg: "Hello World", url: "http://wwww.google.com" } }) </script> </html> |