vue通过一组特殊的属性来提供实用功能，以v-bind作为前缀。

v-bind:title

作用的绑定实例的数据作为某个元素的标题。

完整demo

image.png
02v-bind-tille指令.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  7. </head>
  8. <body>
  9. <div id="app" v-bind:title="title">
  10.     {{msg}}
  11. </div>
  13. <script src="../lib/vue.js"></script>
  14. <script>
  16.     var vm = new Vue({
  17.         el:'#app',
  18.         data:{
  19.             msg:'烈火刀法，天下第一',
  20.             title:'不管是烈火还是深海，都取不走我的命'
  21.         }
  22.     })
  24. </script>
  25. </body>
  26. </html>

效果

image.png

类似的其它指令也是遵循着同样的范式v-bind:xxxx。比如源码里面可以看到image.png
我们不妨试一下

v-bind:value

绑定某个Vue实例数据到元素的value属性

完整demo

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  7. </head>
  8. <body>
  9. <div id="app" v-bind:title="title">
  10.     <input type="text" v-bind:value="love">
  11. </div>
  13. <script src="../lib/vue.js"></script>
  14. <script>
  16.     var vm = new Vue({
  17.         el:'#app',
  18.         data:{
  19.             love:'宝宝'
  20.         }
  21.     })
  23. </script>
  24. </body>
  25. </html>

效果

image.png