<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/qq.css">
</head>
<body>
<div id='app'>
<router-link to='/news' class='nav'>消息</router-link>
<router-link to='/contact' class='nav'>联系人</router-link>
<router-link to='/zone' class='nav'>空间</router-link>
<router-view></router-view>
</div>
<script src='js/vue.js'></script>
<script src='js/vue-router.js'></script>
<script src='js/axios.js'></script>
<script>
var News={
template:`
<div>
<ul>
<li v-for="value in qqNews">
<img :src='value.pic'>
<div>
<p class='title'>
<span>{{value.title}}</span>
<span>{{new Date()|date}}</span>
</p>
<p class='text'>{{value.txt}}</p>
</div>
</li>
</ul>
</div>
`,
data:function(){
return{
qqNews:null
}
},
mounted:function(){
var self=this;
axios({
methos:'get',
url:'qq.json'
}).then(function(resp){
console.log(resp)
self.qqNews=resp.data;
}).catch(function(err){
console.log(err)
})
}
}
var Contact={
template:`
<div>
<h1>这是联系人页面</h1>
</div>
`
}
var Zone={
template:`
<div>
<h1>这是空间页面</h1>
</div>
`
}
const routes=[
{path:'/',component:News},
{path:'/news',component:News},
{path:'/contact',component:Contact},
{path:'/zone',component:Zone}
]
const router=new VueRouter({
routes:routes
})
//过滤器：
Vue.filter('date',function(data){
return data.getHours()+":"+data.getMinutes();
})
new Vue({
el:'#app',
router:router
})
</script>
</body>
</html>
json
[
{
"pic":"img/1.jpg",
"title":"宋小宝",
"txt":"损塞"
},
{
"pic":"img/2.jpg",
"title":"小沈阳",
"txt":"阳仔"
},
{
"pic":"img/3.jpg",
"title":"王小利",
"txt":"我说大脚啊"
},
{
"pic":"img/4.jpg",
"title":"刘小光",
"txt":"玉田他娘"
},
{
"pic":"img/5.jpg",
"title":"赵本山",
"txt":"晓燕"
}
]
网友评论