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>
