4- vue lifecycle basis, hook function

There are eight vue lifecycle functions:

Hook function	Trigger behavior	At this stage you can do
beforeCreadted	Mounting element EL $ vue instance data objects and data are undefined, yet initialized.	Plus loading event
created	Vue data object instance data there, $ el yet	End loading, rendering the requested data is mounted in preparation
beforeMount	$ El and data vue instances are initialized, but still virtual dom nodes, specific data.filter has not been replaced.	...
mounted	vue example the mount is completed, data.filter successfully rendering	With the use of routing hook
beforeUpdate	Triggered update data
updated	Triggered update data	When the data update, do some processing (here can also be observed with a watch)
beforeDestroy	When triggered the destruction of the component
destroyed	When the trigger assembly destroyed, vue examples unbound and event listeners and dom (no response), but there is still a DOM node	Prompt destruction of the component

Here we created, updated

# Lifecycle 
new new Vue ({ 
        EL: '# App', 
        Data: { 
            username: '. 1', 
            pwd: '. 1', 
            CPWD: '2', 
            Product: [] 
 
        }, 
        after the data initialization // 
        created: function ( ) { 
            the console.log ( 'Created') 
        }, 
        // after instance and associate tags 
        Mounted: function () { 
            Axios ({ 
                Method: 'GET', 
                URL: 'HTTP: //127.0.0.1/product/all' , 
            .}) the then ( 
               Data => { 
                    // arrow function call to solve the problem 
                    this.product = data.data.product_info;
                }
 
                ).catch(function (error) {
                console.log(error)
            })
        }

　　二, axios

axios Profile

axios HTTP client is a browser-based Promise and nodejs, which itself has the following characteristics:

Create XMLHttpRequest from the browser
Http requests sent from node.js
Support Promise API
Intercept request and response
Conversion request and response data
Cancellation request
Automatically convert JSON data
Client support to prevent CSRF / XSRF

axios Api

The method may be implemented by the data request for parameter passing directly axios.

Send a get request

 // 参数携带在url上
   axios({
      url: '/api/user/win_record?userid=1&sign=sdfsadf',
      method: 'get'
    })
      .then((response) => {
        console.log(response.data)
      })
      .catch((error) => {
        console.log(error)
      })
 
    // 通过params 携带参数
    axios({
      url: '/api/user/win_record',
      method: 'get',
      params: {
        userid: 1,
        sign: '123123'
      }
    })
      .then((response) => {
        console.log(response.data)
      })
      .catch((error) => {
        console.log(error)
      })

　　Sending a request to post

// 入参json类型
    axios({
      method: 'post',
      url: '/api/user/add_stu',
      data: {
        name: 'qq',
        grade: '12',
        phone: '10086'
      }
    })
      .then((response) => {
        console.log(response.data)
      })
      .catch((error) => {
        console.log(error)
      })
 
    //入参 key-value application/x-www-form-urlencoded
    data = {
      username: 'abc1',
      pwd: '12323',
      cpwd: '223123'
    }
  axios({
      url: '/apis/api/user/user_reg',
      method: 'post',
      data: this.qs.stringify(data)
    })
      .then((response) => {
        console.log(response.data)
      })
      .catch((error) => {
        console.log(error)
      })

4- vue lifecycle basis, hook function

axios Profile

Guess you like