通过Vue完成数据表格的渲染展示：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue-指令-案例</title><!-- 引用vue.js文件 --><script src="js/vue.js"></script>
</head>
<body><div id="app"><table border="1" cellspacing="0" width="60%"><tr><th>编号</th><th>姓名</th><th>年龄</th><th>性别</th><th>成绩</th><th>等级</th></tr><tr align="center" v-for="(user,index) in users"><td>{{index + 1}}</td><td>{{user.name}}</td><td>{{user.age}}</user></td><td><span v-if="user.gender == 1">男</span><span v-if="user.gender == 2">女</span></td><td>{{user.score}}</td><td><span v-if="user.score >= 85">优秀</span><span v-else-if="user.score >=65">及格</span><span style="color: red;" v-else>不及格</span></td></tr></table></div></body><script>new Vue({el: "#app",data: {users: [{name: "Tom",age: 20,gender: 1,score: 78},{name: "Rose",age: 18,gender: 2,score: 86},{name: "Jerry",age: 26,gender: 1,score: 90},{name: "Tony",age: 30,gender: 1,score: 52}]},methods: {},})
</script>
</html>从数据模型到在Web页面上进行数据展示，通过列表和插值表达式就展示了出来了。
Vue的生命周期：
生命周期：指一个对象从创建到销毁的整个过程。
生命周期的八个阶段：
每触发一个生命周期事件，会自动执行一个生命周期方法（钩子）。
创新、挂载、更新、销毁。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue-指令-v-for</title><script src="js/vue.js"></script>
</head>
<body><div id="app"></div>
</body>
<script>//定义Vue对象new Vue({el: "#app", //vue接管区域data:{},methods: {},mounted () { // 生命周期的方法alert("vue挂载完成,发送请求到服务端")}})
</script>
</html>
mounted：挂载完成，Vue初始化成功，HTML页面渲染成功，（发送请求到服务端，加载数据）。
![[0154].第5节：IDEA中创建Java Web工程](http://pic.xiahunao.cn/nshx/[0154].第5节：IDEA中创建Java Web工程)
