[TOC]
## 豆瓣250对比
[小程序](https://www.kancloud.cn/book/henputongderen/xiaochengxu/edit)
[React](https://www.kancloud.cn/book/henputongderen/react/edit)
## 完整代码
[完整代码](https://gitee.com/dingmeili/note/tree/master/vues/douban250)
## 知识细分
### 1.axios请求
> 安装依赖
```
npm i axios --save
npm i aixos-jsonp-pro --save // 跨域时安装
```
> 在请求页面引入
```
import axios from "axios";
//import axios from "axios-jsonp-pro";跨域时引入
```
>请求代码
```
mounted() {
var url = "http://192.168.22.2/movie/top250";
axios.jsonp(url).then(res => {
this.handleData(res);
});
},
```
### 2. 通过id跳转页面
#### 2.1.定义点击事件向父组件传值
```
@click ="handleClick"
methods: {
handleClick() {
// 子组件自定义事件,向父组件传参
this.$emit("jump", this.movie.id);
}
}
```
#### 2.2 父组件进行跳转
>@jump\="onJump"
```
onJump(id){
this.$router.push('/about/'+id);
},
```
#### 2.3.详情页 接收id 发送请求
> 在router.js中接上id ` path: '/about/:id',`
```
mounted() {
var id = this.$route.params.id;
var url = "https://douban.uieee.com/v2/movie/subject/";
axios.jsonp(url + id).then(res => {
this.imgUrl = res.images.small;
this.title = res.title;
this.summary = res.summary;
});
}
```
### 3.vue设置数据的要点
> 要在data中定义
```
data() {
return {
imgUrl: "",
title: "",
summary: ""
};
},
```
> 设置数据到data里
```
this.imgUrl \= res.images.small;
this.title \= res.title;
this.summary \= res.summary;
```
#### 对比小程序与react
```
小程序
this.setData({})
react
this.setState({})
```
### 4.上拉刷新
[组件链接](https://youzan.github.io/vant/#/zh-CN/list)
#### 使用Vant组件库中List组件实现
- 1.安装组件
> npm i vant -S
- 2.main.js中导入组件
> import Vant from 'vant';
> import 'vant/lib/index.css';
> Vue.use(Vant);
- 3.使用组件
```
<div> //一定要用div将组件包起来，不然会报错
<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
<div class="home">
<movie-item v-for="(item,index) of movies" :key="index" :movie="item"></movie-item>
</div>
</van-list>
</div>
```
- 4.通过组件中绑定的事件触发刷新
> onLoad会在页面加载的时候就触发该事件，加载初始页面也可以在这个函数里实现
```
export default {
data() {
return {
list: [],
loading: false,
finished: false
};
},
methods: {
onLoad() {
// 异步更新数据
然数据加载完再更新
setTimeout(() => {
for (let i = 0; i < 10; i++) {
this.list.push(this.list.length + 1);
}
// 加载状态结束
this.loading = false;
// 数据全部加载完成
if (this.list.length >= 40) {
this.finished = true;
}
}, 500);
}
}
}
```
