[TOC]
## 小程序vue對比
[小程序](http://www.hmoore.net/book/henputongderen/xiaochengxu/edit)
[vue](http://www.hmoore.net/book/henputongderen/vuexuexi/edit)
## 重點知識點 獲取服務器端的數據
### 1.componentDidMount()
> 組件輸出到 DOM 后會執行 componentDidMount() 鉤子
> 安裝組件時，該方法會觸發
- 主頁
```
componentDidMount() {
1.指定地址
2.通過axios發送請求并獲取數據，設置數據到state
}
import axios from 'axios-jsonp-pro'; //跨域要引入
constructor(props){
super(props);
this.state = {
movie:[] //定義值
}
}
componentDidMount(){
var id = this.props.match.params.id;
var url = "http://api.douban.com/v2/movie/"+id;
axios.jsonp(url).then(res=>{
this.setState({
movie:res
})
})
}
```
### 2.傳遞參數
- 組件
```
依賴
yarn add react-router-dom
npm i react-router-dom --save
```
```
import { Link } from 'react-router-dom' //要安裝依賴
<Link to = {'/Detail/' + this.props.movie.id}>
<div className="movie">
<img src={this.props.movie.imgUrl} alt\=""/>
<p>{this.props.movie.title}</p>
</Link>
```
### 3.設置路由
- Router.js
```
import Detail from './pages/Detail';
<Route path = "/detail/:id" component = {Detail} />
```
### 3.獲取別的頁面傳來的值
- 跳轉頁
```
constructor(props){
super(props);
this.state={
imgUrl:"",
title:"",
summary:""
}
}
componentDidMount(){
//獲取路由中傳過來的id
var id =this.props.match.params.id;
var url ="http://api.douban.com/v2/movie/subject/"+id;
axios.jsonp(url).then(res=>{
var {images,title,summary}=res;
this.setState({
imgUrl:images.small,
title,
summary
})
})
}
```
