第十二章 章节练习created的应用
目录
一、引言
二、运行效果图
三、完整代码
一、引言
构建一个新闻的页面，页面在响应式数据准备好之后（即created），就向后台接口请求获取新闻数据列表，然后赋值给Vue实例中的list列表，这个请求逻辑我们就写在created方法中。后台接口是我在本地机子上部署的服务，大家也可以在自己本地机子上搭建一个简单的SpringBoot工程，返回相关的图片和文字数据即可。
二、运行效果图
三、完整代码
<!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>Document</title><style>* {margin: 0;padding: 0;list-style: none;}.news {display: flex;height: 120px;width: 600px;margin: 0 auto;padding: 20px 0;cursor: pointer;}.news .left {flex: 1;display: flex;flex-direction: column;justify-content: space-between;padding-right: 10px;}.news .left .title {font-size: 20px;}.news .left .info {color: #999999;}.news .left .info span {margin-right: 20px;}.news .right {width: 160px;height: 120px;}.news .right img {width: 100%;height: 100%;object-fit: cover;}</style>
</head>
<body><div id="app"><ul><li v-for="(item, index) in list" :key="item.id" class="news"><div class="left"><div class="title">{{ item.title }}</div><div class="info"><span>{{ item.source }}</span><span>{{ item.time }}</span></div></div><div class="right"><img :src="item.img" alt=""></div></li></ul></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>// 接口地址：http://localhost:8080/api/news// 请求方式：getconst app = new Vue({el: '#app',data: {list: []},async created () {// 1.发送请求，获取数据const res = await axios.get('http://localhost:8080/api/news')// 2.将数据更新给data中的listthis.list = res.data.data}})</script>
</body>
</html>