1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>Vue快速入门和插值表达式</title> 6 <script src="js/vuejs-2.5.16.js"></script> 7 </head> 8 <body> 9 <div id="app" style="text-align: center; "> 10 <tr style="border: 1px,solid,red"> 11 <td>姓名</td> 12 <td>年龄</td> 13 <td>性别</td> 14 </tr> 15 <br /> 16 <tr style="border: 1px,solid,red"> 17 <td>{{user1.username}}</td> 18 <td>{{user1.age}}</td> 19 <td>{{user1.gender}}</td> 20 </tr> 21 22 </div> 23 <script> 24 25 new Vue({ 26 el:'#app',//表示当前vue对象接管了div区域 27 data:{ 28 //message:'hello world'//注意不要写分号结尾 29 user1:{'username':'小明','age':18,'gender':'男'} 30 } 31 }); 32 </script> 33 </body> 34 </html>