Java Web学习笔记18——Vue案例

通过Vue完成数据表格的渲染展示:

html 复制代码
<!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的生命周期:

生命周期:指一个对象从创建到销毁的整个过程。

生命周期的八个阶段:

每触发一个生命周期事件,会自动执行一个生命周期方法(钩子)。

创新、挂载、更新、销毁。

html 复制代码
<!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页面渲染成功,(发送请求到服务端,加载数据)。

相关推荐
ruleslol2 天前
Response对象
javaweb
Zz_waiting.3 天前
Javaweb - 10.1 Servlet
servlet·tomcat·javaweb
Maỿbe18 天前
实现回显服务器(基于UDP)
java·javaweb·echo·回显服务器
Java永无止境21 天前
Web后端基础:数据库
java·数据库·javaweb·web
Java永无止境1 个月前
Web前端基础:HTML-CSS
java·前端·css·html·javaweb
fanTuanye1 个月前
JavaWeb是什么?总结一下JavaWeb的体系
java·大数据·javaweb·基础·体系
hello1114-2 个月前
Redis学习打卡-Day2-缓存更新策略、主动更新策略、缓存穿透、缓存雪崩、缓存击穿
java·redis·学习·缓存·javaweb
白白糖2 个月前
一、Javaweb是什么?
javaweb
hello1114-2 个月前
JavaWeb学习打卡-Day6-SpringBean管理、SpringBoot自动装配、Maven高级
spring boot·学习·maven·javaweb
幽络源小助理2 个月前
SpringBoot物资管理系统 | JavaWeb项目设计与实现
java·springboot·javaweb