零基础学习Vue: 第41课新闻列表小程序案例：

最新推荐文章于 2024-04-18 19:28:27 发布

舜岳

最新推荐文章于 2024-04-18 19:28:27 发布

阅读量555

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_41614928/article/details/89761168

版权

vue 专栏收录该内容

80 篇文章 8 订阅

订阅专栏

** 零基础学习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)">&lt;&lt;返回上一页</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>

复制粘贴以下即可实现如图效果哦！

舜岳

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
零基础学习Vue: 第41课新闻列表小程序案例：

** 零基础学习Vue: 第41课新闻列表小程序案例：**效果图如下：以上效果只需如下一个html文件即可实现：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>新闻</title><style> * {...
复制链接

扫一扫