一,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的代替了。