[TOC]
## 豆瓣250對比
[小程序](http://www.hmoore.net/book/henputongderen/xiaochengxu/edit)
[React](http://www.hmoore.net/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);
}
}
}
```
