生命周期函数
<template>
<div>
<h1>生命周期函数</h1>
<p>{
{
message}}</p>
<button @click="message='b'">a->b</button>
</div>
</template>
<script>
export default {
name: "mycomponent",
data() {
return {
message:"a"
}
},
beforeCreate() {
console.log("组件创建前")
},
created() {
console.log("组件创建后")
//网络请求放在这里提高用户体验，但是消耗网络
},
beforeMount() {
console.log("组件渲染前")
},
mounted() {
console.log("组件渲染后")
//一般用来放网络请求
},
beforeUpdate() {
console.log("组件更新前")
},
updated() {
console.log("组件更新后")
},
beforeUnmount() {
console.log("组件卸载前")
//卸载之前把消耗性能的都处理掉
//定时器
},
unmounted() {
console.log("组件卸载后")
}
}
</script>
Axios网络请求
局部引用
使用npm安装：
npm install axios
npm install -save querystring //post用来处理参数格式的工具
组件中引入：
import axios from 'axios'
import querystring from 'querystring'
// get请求方式
axios({
method: "get",
url: "http://123.207.32.32:8000/home/multidata"
}).then(res => {
this.getValue = res.data.data.banner.list[0]
})
//get快捷
axios.get("http://123.207.32.32:8000/home/multidata").then(res => {
console.log(res.data)
})
// post请求方式
// axios({
// method: "post",
// url: "http://iwenwiki.com/api/blueberrypai/login.php",
// data:querystring.stringify({
// user_id: '[email protected]',
// password: 'iwen123',
// verification_code: 'crfvw'
// })
// }).then(res => {
// console.log(res.data)
// })
//post快捷
axios.post("http://iwenwiki.com/api/blueberrypai/login.php", querystring.stringify({
user_id: '[email protected]',
password: 'iwen123',
verification_code: 'crfvw'
})).then(res => {
console.log(res.data)
})
全局引用
//在src文件夹下的main.js里引入axios
import axios from 'axios'
// 与Vue实例关联（定义$axios为axios）
Vue.prototype.$axios = axios
//其他页面引用方式：不需要导入，直接应用
this.$axios.get("http://123.207.32.32:8000/home/multidata").then(res => {
console.log(res.data)
})
}