使用方法 --- 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 => {})

VUE-生命周期/请求数据

AJAX请求数据

fetch请求数据

axios请求数据

如果使用post请求：

猜你喜欢