效果图：
第一步：做出2个页面html 完成初步模型后 html+css
第二步：vue create cli-03 y n 选择路由的 cmd中点数字进行选择
第三步：在src目录下的views目录中可以自己添加vue，记得在router文件夹下面的index.js中进行更改
第四步：建立components文件下面的小组件 从之前做的页面中提取出来
包括css
即可
安装axios
npm i axios -S
设置目录 src/http/api.js
import axios from "axios"
export const get=(url)=>{
return new Promise((resolve,reject)=>{
axios.get(url).then(res=>{
resolve(res.data)
}).catch(err=>{
reject(err.data)
})
})
}
创建vue.config.js
代理
module.exports = {
devServer: {
proxy: 'http://v.juhe.cn/todayOnhistory'
}
}
<template>
<ul class="list">
<li v-for="(item,index) in list"><a href="">{{index+1}}.{{item.title}}<em>{{item.date.split('年')[0]}}年</em></a></li>
</ul>
</template>
<script>
import {
get
} from '@/http/api.js'
export default {
name: "List",
data() {
return {
key: '574df7282c0e854bfbee752aa9865253',
list: []
}
},
mounted() {
this.getList()
},
methods: {
// 获取异步api
getList() {
get('/queryEvent.php?key=' + this.key + '&date=' + this.getDate()).then(data => {
if (data.error_code === 0) {
this.list=data.result
}
})
},
getDate() {
const date = new Date()
return (date.getMonth() + 1) + '/' + date.getDate()
}
}
}
</script>
<style>
.list {
list-style-type: none;
margin: 40px 0;
padding: 0;
}
.list li {
font-size: 14px;
border-bottom: 1px solid #eee;
}
.list li a {
text-decoration: none;
color: #666;
/* background-color: #666666; */
display: block;
padding: 10px;
}
.list li a:hover {
background-color: #333;
color: #FFFFFF;
}
.list li a em {
float: right;
font-style: normal;
padding-right: 5px;
}
</style>
