我爱Java系列---【1.Vue的快速入门案例】

 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>
愿你走出半生，归来仍是少年！