使用方法 --- 4個before，4個ed，創造，裝載，更新，銷毀
初始化階段
beforeCreate(){} // 准備懷孕
created(){} // 懷上了 *******************************************
beforeMount(){} // 准備生
mounted(){} // 生下來了 *************************************************
運行時階段
beforeUpdate(){} // 每天都在長大
updated(){} ************************
銷毀階段
beforeDestroy(){} // 馬上 game over
destroyed(){} // game over gg ************
綜上所述，會在 created 或者 mounted 中請求數據
如果必須使用dom操作，那么可以在 mounted 和 updated 中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <button @click="des">銷毀</button> <button @click="add">修改狀態</button>{{ count }} </div> </body> <script src="vue.js"></script> <script> new Vue({ el: '#app', data: { count: 0 }, methods: { add () { this.count += 1 }, des () { this.$destroy() // 觸發銷毀 } }, beforeCreate () { console.log('創建實例之前', this.$el) // undefined console.log('創建實例之前', this.$data) // undefined console.log('創建實例之前', this.count) // undefined }, created () { console.log('創建實例成功', this.$el) // undefined console.log('創建實例成功', this.$data) // {count: 0} console.log('創建實例成功', this.count) // 0 }, beforeMount () { console.log('裝載之前', this.$el) // <div id="app"></div> console.log('裝載之前', this.$data) // {count: 0} console.log('裝載之前', this.count) // 0 }, mounted () { console.log('裝載之后', this.$el) // <div id="app"></div> console.log('裝載之后', this.$data) // {count: 0} console.log('裝載之后', this.count) // 0 }, beforeUpdate () { console.log('更新之前', this.$el) // <div id="app"></div> console.log('更新之前', this.$data) // {count: 0} console.log('更新之前', this.count) // 1 }, updated () { console.log('更新之后', this.$el) // <div id="app"></div> console.log('更新之后', this.$data) // {count: 0} console.log('更新之后', this.count) // 1 }, beforeDestroy () { console.log('銷毀之前', this.$el) // <div id="app"></div> console.log('銷毀之前', this.$data) // {count: 0} console.log('銷毀之前', this.count) // 1 }, destroyed () { console.log('銷毀之后', this.$el) // <div id="app"></div> console.log('銷毀之后', this.$data) // {count: 0} console.log('銷毀之后', this.count) // 1 } }) </script> </html>
AJAX請求數據
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> ul li{ list-style: none; } </style> </head> <body> <div id="app"> <ul> <li v-for="item of list" :key="item.userid"> {{item.username}}--{{item.age}}--{{item.sex}} </li> </ul> </div> </body> <script src="../jquery.min.js"></script> <script src="../vue.js"></script> <script> new Vue({ el:"#app", data:{ list:[] }, created(){ $.ajax({ url:"http://localhost:3000/users", success:(data)=>{ console.log(data.data) this.list=data.data } }) } }) </script> </html>
fetch請求數據
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <ul> <li v-for="item of list" :key="item.userid">{{ item.username }}</li> </ul> </div> </body> <script src="vue.js"></script> <script> new Vue({ el: '#app', data: { list: [] }, created () { fetch('http://localhost:3000/users').then(res => res.json()).then(data => { console.log(data) this.list = data.data }) } }) </script> </html>
axios請求數據
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <ul> <li v-for="item of list" :key="item.userid">{{ item.username }}</li> </ul> </div> </body> <script src="vue.js"></script> <script src="axios.js"></script> <script> new Vue({ el: '#app', data: { list: [] }, created () { // $.get axios.get('http://localhost:3000/users').then(res => { console.log(res.data.data) this.list = res.data.data }) } }) </script> </html>
如果使用post請求：
fetch(url).then(
// 得到的是 promise 對象，前端需要的json數據，需要將其轉換為json數據
// res => res.json()
function (res) { return res.json() }
).then(
// 得到的就是json對象，可以供前端直接使用
data => console.log(data)
)
```
**默認的是get的請求方式,如果為post請求呢**
```
fetch('http://****/login', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: JSON.stringify({username: '', password: ''})
}).then(function(response) {
console.log(response);
});
axios.get(url).then(res => {})
axios.post(url, {username: ''}).then(res => {})
axios({
url: '',
method: 'post',
data: {
username: ''
}
}).then(res => {})