本来是spring boot和前端vue一起学的（我这颗励志当全栈工程师的心啊(ˇ∀ˇ)），发现精力跟不上，于是就只研究vue。后台数据用REST方式从聚合数据获取，当然前提是有他们的账号。
npm i vue-cli -g //安装vue脚手架
vue init webpack-simple#1.0 newsapp // webpack-simple工程目录比较简单，说实话，默认的webpack脚手架工程看不懂。。。以后再研究吧，vue版本选1.0，2.0还没学
cd newsapp & npm i
npm i vue-resource --save // 需要用到vue-resource
工程目录：
Paste_Image.png
index.html , 使用bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<title>newsapp</title>
</head>
<body>
<app></app>
<script src="dist/build.js"></script>
</body>
</html>
main.js 没啥变化
import Vue from 'vue'
import App from './App.vue'
Vue.config.debug = true
new Vue({
el: 'body',
components: { App }
})
插播一下聚合数据的请求格式：
Paste_Image.png
返回格式类似于这样：
{
"reason":"成功的返回",
"result":{ "stat":"1",
"data":[
{
"title":"高晓松为王宝强打气 明天离婚案王宝强现身马蓉不出庭",
"date":"2016-10-17 15:01",
"author_name":"人民网", "thumbnail_pic_s":"http:\/\/02.imgmini.eastday.com\/mobile\/20161017\/20161017150141_b0a5bc32a3e75044e5604d090a702dac_1_mwpm_03200403.jpeg", "thumbnail_pic_s02":"http:\/\/02.imgmini.eastday.com\/mobile\/20161017\/20161017150141_b0a5bc32a3e75044e5604d090a702dac_1_mwpl_05500201.jpeg", "thumbnail_pic_s03":"http:\/\/02.imgmini.eastday.com\/mobile\/20161017\/20161017150141_b0a5bc32a3e75044e5604d090a702dac_1_mwpl_05500201.jpeg", "url":"http:\/\/mini.eastday.com\/mobile\/161017150141494.html?qid=juheshuju", "uniquekey":"161017150141494", "type":"头条", "realtype":"娱乐" }, { "title":"这年头当鸭居然这么不容易!", "date":"2016-10-17 16:15", "author_name":"任真天", "thumbnail_pic_s":"http:\/\/08.imgmini.eastday.com\/mobile\/20161017\/20161017161510_6932252a05947fa6dc80ffec4ee8e282_1_mwpm_03200403.jpeg", "thumbnail_pic_s02":"http:\/\/08.imgmini.eastday.com\/mobile\/20161017\/20161017161510_6932252a05947fa6dc80ffec4ee8e282_1_mwpl_05500201.jpeg",
//可以看到只要data数组就行了
App.vue
<template>
<div class="alert alert-warning" role="alert" v-if="error!=''">{{error}}</div>
<top-header></top-header>
<main-list :news-list="news"></main-list>
</template>
<script>
import TopHeader from './components/TopHeader.vue'
import MainList from './components/MainList.vue'
import Vue from 'vue'
var vueResource = require('vue-resource')
Vue.use(vueResource)
export default {
data () {
return {
news : [],
error:''
}
},
components :{
TopHeader,MainList
},
created :
function(){
this.getData('top');
},
events:{
'onGetData':function(dataType){
this.getData(dataType);
}
},
methods :{
getData : function(dataType){
this.$http.get('http://v.juhe.cn/toutiao/index?key=你的key&type='+dataType).then((response) => {
this.$set('news', response.body.result.data);
}, (response) => {
this.error = response.error_code
});
}
}
}
</script>
<style>
body {
font-family: Helvetica, sans-serif;
}
</style>
TopHeader.vue
<template>
<div><ul class="nav nav-tabs nav-justified" role="tablist">
<li role="presentation" ><a href="#" @click="getData('top')">头条</a></li>
<li role="presentation" ><a href="#" @click="getData('shehui')">社会</a></li>
<li role="presentation" ><a href="#" @click="getData('guonei')">国内</a></li>
<li role="presentation"><a href="#" @click="getData('guoji')">国际</a></li>
<li role="presentation"><a href="#" @click="getData('yule')">娱乐</a></li>
<li role="presentation"><a href="#" @click="getData('tiyu')">体育</a></li>
<li role="presentation"><a href="#" @click="getData('junshi')">军事</a></li>
<li role="presentation"><a href="#" @click="getData('keji')">科技</a></li>
<li role="presentation"><a href="#" @click="getData('caijing')">财经</a></li>
<li role="presentation"><a href="#" @click="getData('shishang')">时尚</a></li>
</ul></div>
</template>
<script>
export default{
methods :{
getData: function(dType){
this.$dispatch('onGetData',dType);
}
}
}
</script>
MainList.vue
<template>
<div class="row" id="main">
<div class="col-sm-6 col-md-4" v-for="n in newsList">
<div class="thumbnail" >
<a :href="n.url">
<img :src="n.thumbnail_pic_s" :alt="n.author_name" >
<div class="caption">
<p class="text-center">{{n.title}}</p>
</div>
</a>
</div>
</div>
</div>
</div>
</template>
<script>
export default{
props: ['newsList']
}
</script>
<style>
#main {
margin-top: 10px
}
</style>
- 为了体现组件化思想，我把顶部导航条单独出来一个组件，这样也有一个麻烦就是每次点击都要dispatch事件，然后在父组件App.vue里监听这个事件onGetData. 事件处理很简单就是使用vue-resource调用聚合的API获取数据，最后利用props传入子组件Mainlist.vue
效果：
1431816-0624a5871f445fb7.png
重要提示：vue -resource本地调试会有跨域问题，使用chrome 浏览器的话可以下个扩展插件
1431816-821482aa727dc66a.png
