零基础学习Vue: 第41课新闻列表小程序案例：
程序员文章站
2022-04-24 09:47:59
...
** 零基础学习Vue: 第41课新闻列表小程序案例：**
效果图如下：
以上效果只需如下一个html文件即可实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新闻</title>
<style>
* {
margin: 0;
padding: 0
}
h1 {
margin: 20px;
}
.newsList ul {
width: 500px;
margin: 20px;
list-style-type: none;
border: 1px solid #000;
}
.newsList ul li {
padding: 10px;
margin: 10px;
border: 1px solid #ababab;
}
</style>
</head>
<body>
<div id="app">
<h1>新闻列表</h3>
<!-- 13. 子组件 -->
<router-view></router-view>
</div>
<!--7. 新闻列表子组件 -->
<template id="newsList">
<div class="newsList">
<ul>
<li v-for="newList in newsList">
<router-link :to="{name:'articlelink',params:{id:newList.aid}}">{{newList.title}}</router-link>
</li>
</ul>
</div>
</template>
<!--9. 新闻内容组件 -->
<template id="article">
<div class="article">
<!--//点击返回上一页-->
<a href="javascript:history.go(-1)"><<返回上一页</a>
<h2>{{title}}</h2>
<div v-html="content"></div>
</div>
</template>
<!-- 2. 引入需要的工具 -->
<!-- 引入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--引入axios 这是一个获取数据的工具 里面有很多关于获取数据的方法-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 引入vue-router路由 -->
<script src='https://unpkg.com/vue-router/dist/vue-router.js'></script>
<script>
//3. 把引入的axios函数注入到Vue的原型上
Vue.prototype.$axios = axios
//4. 设置地址
axios.defaults.baseURL = 'http://www.phonegap100.com/appapi.php'
//5. 设置数据的返回格式，设置后通过地址请求的数据都返回数据中data里的result内的数据
axios.interceptors.response.use(function (response) {
return response.data.result;
});
//6. 创建首页子组件
let newsList = {
template: '#newsList',
data() {
return {
newsList: [] //存放新闻列表的数据
}
},
//请求数据 方法一
// created(){ //使用axios拉取数据 axios的get函数返回的是一个promise对象
// this.$axios.get('http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20')
// .then(res=>{
// this.newsList = res.data.result
// })
// },
//请求数据 方法二
async created() { //使用axios拉取数s据 axios的get函数返回的是一个promise对象
//等await后面请求到数据时在赋值给newsList
this.newsList = await this.$axios.get('?a=getPortalList&catid=20')
}
}
//8. 新闻内容子组件
let article = {
template: "#article",
data() {
return {
title: '', //存放新闻的标题
content: '' //存放新闻的内容
}
},
async created() { //created生命周期函数 在网页打开时获取新闻内容的数据
//等await后面请求到数据时在提取数据中的content和title
let [{ content, title }] = await this.$axios.get('?a=getPortalArticle&aid=' + this.$route.params.id)
//将值对应赋值给变量
this.content = content;
this.title = title
}
}
//10. 设置路由和组件的映射表
let routes = [
{ path: '/', component: newsList },
{ path: '/article/:id', name: 'articlelink', component: article }
]
//11. 实例化路由对象
let router = new VueRouter({
routes
})
//1. 创建根组件
let vm = new Vue({
el: '#app',
router //12. 注册路由组件
})
</script>
</body>
</html>