一，Vue生命周期
<template>
<div >
<h1 @click="changeText">{{ info }}</h1>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data(){
return{
info:"介绍组件生命周期"
}
},
methods:{
changeText(){
this.info="修改组件内容";
}
},
beforeCreate(){ /**组件生命周期 */
console.log("创建组件前.....")
},
created(){
console.log("创建组件后.....")
},
beforeMount(){
console.log("数据渲染前...")
},
mounted(){
console.log("数据渲染后...")
},
beforeUpdate(){
console.log("数据修改前...")
},
updated(){
console.log("数据修改后...")
},
beforeDestroy(){
//组件跳离本页面，本页面会执行销毁
console.log("数据销毁前...")
},
destroyed(){
console.log("数据销毁后...")
}
}
</script>
<style >
</style>
二，Vue路由配置
前端路由：说白了就是通过不同的url，来访问不同的页面 这就是前端路由的概念。（即在地址栏输入对应组件设置的地址路径，即可访问，不用再通过主组件中转。）
1，介绍路由
2.安装vue router@3.5.2
【安装指定版本路由】npm install --save vue-router@3
2版本的vue项目，安装3版本的路由！
然后重启一下vue项目。
3.配置路由 进行地址栏访问页面
在 
main.js配置文件进行中配置。
import Vue from 'vue'
import App from './App.vue'
import './registerServiceWorker'
//1，引入路由管理器
import VueRouter from 'vue-router'
//引入想要配置路由的子组件
import HelloWorld from './components/HelloWorld.vue'
Vue.config.productionTip = false
//2，加载路由
Vue.use(VueRouter)
//3，配置路由
const router=new VueRouter({
mode:"history",//设置项目的访问模式为history模式，结果是地址栏去掉#
routes:[
{
path:"/hello",
component:HelloWorld
}
]
})
//初始化配置
new Vue({
router,
render: h => h(App),
}).$mount('#app')
4.在主组件（app.vue）中配置路由显示
<template>
<div>
<router-view></router-view>
</div>
</template>
HelloWorld.vue组件内容：
<template>
<div >
<h1>路由配置成功</h1>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
}
</script>
<style >
</style>
补：配置多个路由：在main.js配置文件中const router=new VueRouter直接添加导入即可，其它与上面一致。
5.访问：
自身域名+/hello即可访问。
三，vue网络请求
使用vuejs前端项目，访问后端服务使用axios库，Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。
1.安装Axios
使用命令：npm install axios --save
然后启动运行项目：npm run serve
2.使用
2.1get请求
【get请求方式，不友好，有乱码】
<template>
<div>
<button @click="getArr">点击发送get请求，获得数据</button>
</div>
</template>
<script>
//引入网络请求资源对象；
import axios from 'axios';
export default {
name:"AxiosGet",
methods:{
getArr(){
//发送get请求
axios.get("http://iwenwiki.com/api/blueberrypai/getIndexInteresting.php")
.then(function(mess){//请求成功时执行的方法
console.log("成功"+mess);
})
.catch(function(e){//请求错误时执行的方法
console.log("发生了错误"+e)
})
}
}
}
</script>
<style>
</style>
2.2post请求
处理乱码
<!-- post带参提交 -->
<template>
<div>
<form >
用户名：<input type="text" v-model="uname"><br>
密码:<input type="text" v-model="upwd"><br>
验证码:<input type="text" v-model="yzm"><br>
<input type="button" value="登录" @click="ckLogin">
</form>
</div>
</template>
<script>
import axios from 'axios'; //网络请求对象
import qs from "qs" //处理参数的类型转换和中文乱码
export default {
name:"UserLogin",
data(){
return{
uname:"",
upwd:"",
yzm:""
}
},
methods:{
ckLogin(){
//发送post请求
axios.post("http://iwenwiki.com/api/blueberrypai/login.php",qs.stringify({
user_id:this.uname,
password:this.upwd,
verification_code:this.yzm
}))
.then(mess=>{
//mess是响应回的信息
console.log(mess)
if (mess.data.success){
alert("登录成功")
/** 输入如下登录成功
* user_id:"iwen@qq.com",
password:"iwen123",
verification_code:"crfvw"
*/
//登录成功后进行组件跳转
this.$router.push("/us")
}else{
alert("登录失败")
}
})
.catch(err=>{
console.log("登录失败")
console.log(err)
})
//简化版成功与失败执行提示
}
}
}
</script>
<style>
</style>
四，vue跨域处理
跨域的情况有很多：端口不一样，域名不一样，ip和域名不对应等等，都会出现跨域。或者 ：
进行前端与后端数据进行交互
访问百度音乐例子
未进行跨域处理运行会出错：
解决问题
在项目的跟目录下，创建一个 环境配置文件 vue.config.js，
如果有此文件，修改里面的内容如下：（将原文件已有内容删除）
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://tingapi.ting.baidu.com',
ws: true,
pathRewrite: {
'^/api': ''
},
changeOrigin: true
}
}
}
}
修改配置文件后进行项目重启
【修改组件中，get请求或post里的地址代码】
现在'http://tingapi.ting.baidu.com', 就被名字叫/api的代替了。