vue js 实现新闻列表
实现新闻列表的步骤
创建Vue项目
使用Vue CLI或Vite创建一个新的Vue项目。确保已安装Node.js和npm/yarn。
npm init vue@latest news-list
cd news-list
npm install准备新闻数据
在src目录下创建一个data文件夹，添加news.js文件存储新闻数据。
// src/data/news.js
export default [
{
id: 1,
title: 'Vue 3.0 正式发布',
content: 'Vue 3.0带来了Composition API等新特性...',
date: '2023-01-15',
author: 'Evan You'
},
{
id: 2,
title: 'Vue Router 4.0 新特性',
content: 'Vue Router 4.0支持Vue 3并提供更好的TypeScript集成...',
date: '2023-02-20',
author: 'Eduardo San Martin'
}
]创建新闻列表组件
在components目录下创建NewsList.vue组件。
<!-- src/components/NewsList.vue -->
<template>
<div class="news-list">
<h2>新闻列表</h2>
<ul>
<li v-for="newsItem in news" :key="newsItem.id">
<h3>{{ newsItem.title }}</h3>
<p>{{ newsItem.content }}</p>
<span>{{ newsItem.date }} - {{ newsItem.author }}</span>
</li>
</ul>
</div>
</template>
<script>
import newsData from '@/data/news'
export default {
data() {
return {
news: newsData
}
}
}
</script>
<style scoped>
.news-list {
max-width: 800px;
margin: 0 auto;
}
ul {
list-style: none;
padding: 0;
}
li {
margin-bottom: 20px;
padding: 15px;
border: 1px solid #ddd;
border-radius: 5px;
}
</style>在App.vue中使用组件
修改App.vue文件，引入并使用新闻列表组件。
<!-- src/App.vue -->
<template>
<div id="app">
<NewsList />
</div>
</template>
<script>
import NewsList from './components/NewsList.vue'
export default {
components: {
NewsList
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
color: #2c3e50;
padding: 20px;
}
</style>添加路由功能（可选）
如需实现新闻详情页，可以添加Vue Router。
安装Vue Router：
npm install vue-router@4创建路由配置：
// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import NewsList from '@/components/NewsList.vue'
import NewsDetail from '@/components/NewsDetail.vue'
const routes = [
{
path: '/',
name: 'NewsList',
component: NewsList
},
{
path: '/news/:id',
name: 'NewsDetail',
component: NewsDetail,
props: true
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router创建新闻详情组件：
<!-- src/components/NewsDetail.vue -->
<template>
<div class="news-detail">
<h2>{{ newsItem.title }}</h2>
<p>{{ newsItem.content }}</p>
<p><small>{{ newsItem.date }} - {{ newsItem.author }}</small></p>
<router-link to="/">返回列表</router-link>
</div>
</template>
<script>
import newsData from '@/data/news'
export default {
props: ['id'],
computed: {
newsItem() {
return newsData.find(item => item.id === parseInt(this.id))
}
}
}
</script>修改NewsList组件添加链接：
<template>
<!-- ...其他代码... -->
<li v-for="newsItem in news" :key="newsItem.id">
<router-link :to="'/news/' + newsItem.id">
<h3>{{ newsItem.title }}</h3>
</router-link>
<!-- ...其他代码... -->
</li>
<!-- ...其他代码... -->
</template>运行项目
启动开发服务器查看效果：
npm run dev高级功能扩展
添加API数据获取
使用axios获取远程API数据：
安装axios：
npm install axios修改NewsList组件：
import axios from 'axios'
export default {
data() {
return {
news: [],
loading: true,
error: null
}
},
async created() {
try {
const response = await axios.get('https://api.example.com/news')
this.news = response.data
} catch (err) {
this.error = err.message
} finally {
this.loading = false
}
}
}添加分页功能
在组件中添加分页逻辑：
data() {
return {
currentPage: 1,
itemsPerPage: 5,
// ...其他数据
}
},
computed: {
paginatedNews() {
const start = (this.currentPage - 1) * this.itemsPerPage
return this.news.slice(start, start + this.itemsPerPage)
},
totalPages() {
return Math.ceil(this.news.length / this.itemsPerPage)
}
}模板中添加分页控件：
<div class="pagination">
<button
@click="currentPage--"
:disabled="currentPage === 1"
>上一页</button>
<span>第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</span>
<button
@click="currentPage++"
:disabled="currentPage === totalPages"
>下一页</button>
</div>添加搜索功能
实现新闻标题搜索：
data() {
return {
searchQuery: '',
// ...其他数据
}
},
computed: {
filteredNews() {
if (!this.searchQuery) return this.paginatedNews
return this.news.filter(item =>
item.title.toLowerCase().includes(this.searchQuery.toLowerCase())
)
}
}模板中添加搜索框：
<input
v-model="searchQuery"
placeholder="搜索新闻标题..."
class="search-input"
>
