交互（vue中如何发送ajax）
前端和后端
任何一个程序都会有前端和后端
前端：客户端-------》浏览器
后端：服务器端------》硬件服务器 性能比较稳定的电脑
前端和后端交互的流程？
前端------》ajax------》后端（接受请求）------》数据库----》后端（返回数据）----》前端（展示数据）
在vue中数据请求的方式有很多种 vue-resource axios fetch等（vue-resource是vue官方出得插件 axios第三方的 Fetch 是es6的）
vue-resource虽然是官方出的但是在2.0版本的时候已经停止更新了。
vue的核心包里面没有http请求。如果我们想完成数据请求的话，必须必须必须引用一些外部的文件。比如vue-resource 通过vue-resource可以帮助我们来进行数据请求。
下载：npm install --save vue-resource
vue-resource的get请求语法：
this.$http.get(
"url":请求的地址，
{params:{key:val,key:val}} 发送的数据
).then((res)=>{})
前端程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue-resource的get请求</title>
</head>
<body>
<div id="app">
<button @click="fun()">点我发送get请求</button>
</div>
</body>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script src="./node_modules/vue-resource/dist/vue-resource.min.js"></script>
<script>
const vm=new Vue({
el:'#app',
data:{},
methods: {
fun(){
this.$http.get(
"http://localhost:3000/vue/get",
{params:{name:"前端发送数据后台接受数据"}}
)
.then((ok)=>{
console.log(ok);
})
}
},
})
</script>
</html>
后端简单程序
const express=require("express");
const app=express();
// 跨域
app.use('/',(req,res,next)=>{
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', 'Content-Type,Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE,OPTIONS');
next()
})
app.get('/vue/get',(req,res)=>{
// 后台接受数据req.query.name
console.log(req.query.name);
res.send({msg:"get数据请求成功"})
})
app.listen(3000)
vue-resource的post请求语法：
this.$http.post(
"url" 数据请求地址,
{key:val,key:val} 你要发送的数据,
{emulateJSON:true} 模拟json方式来进行数据的传递
}.then((ok)=>{}}
前端程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue-resource的post请求</title>
</head>
<body>
<div id="app">
<button @click="fun()">点我发送post请求</button>
</div>
</body>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script src="./node_modules/vue-resource/dist/vue-resource.min.js"></script>
<script>
const vm=new Vue({
el:'#app',
data:{},
methods: {
fun(){
this.$http.post(
"http://localhost:3000/vue/post",
{data:"post前端发送数据后台接受数据"},
{emulateJSON:true}
)
.then((ok)=>{
console.log(ok);
})
}
},
})
</script>
</html>
后端简单程序
const express=require("express");
const app=express();
// 应用body-parse模块 接受前端数据
const bodyParser=require("body-parser")
// 解析模块
const uE=bodyParser.urlencoded({extended:false})
// 跨域
app.use('/',(req,res,next)=>{
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', 'Content-Type,Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE,OPTIONS');
next()
})
app.post('/vue/post',uE,(req,res)=>{
// 接受数据req.body.data
console.log(req.body.data);
res.send({msg:"post的响应数据"})
})
app.listen(3000)
axios（重要）
Axios 是一个第三方的数据请求插件，不仅可以在vue中使用 还能在其他的地方也都可以使用比如说react
下载：npm install --save axios
语法：
get请求：
axios({
url:"请求地址",
method:"get" , 请求方式
params:{key:val,key:val}发送的数据
}).then((ok)=>{
console.log(ok)
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<button @click="fun()">点击get请求</button>
</div>
</body>
<script src="./node_modules/vue/dist/vue.js"></script>
<script src="./node_modules/axios/dist/axios.js"></script>
<script>
const vm=new Vue({
el:'#app',
data:{},
methods: {
fun(){
axios({
url:'http://localhost:3000/vue/get',
method:'get',
params:{name:"我是axios方式发送的get数据"}
}).then((ok)=>{
console.log(ok);
})
}
},
})
</script>
</html>
后台服务器程序同vue-resource的请求一样
post请求
Axios({
url:地址,
method:”post”,
data:{key:val,key:val}
}).then((ok)=>{
console.log(ok)
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<button @click="fun()">点击post请求</button>
</div>
</body>
<script src="./node_modules/vue/dist/vue.js"></script>
<script src="./node_modules/axios/dist/axios.js"></script>
<script>
const vm=new Vue({
el:'#app',
data:{},
methods: {
fun(){
const usp=new URLSearchParams();
usp.append('data',"我是axios方式发送的post数据")
axios({
url:'http://localhost:3000/vue/post',
method:'post',
// data:{data:"我是axios方式发送的post数据"} //后台接受为undefined 用URLSearchParams处理post中的参数 使用append的方式进行插入 append("要发送数据的key","要发送数据的val")
data:usp
}).then((ok)=>{
console.log(ok);
})
}
},
})
</script>
</html>
后台服务器程序同vue-resource的请求一样
练习 .使用axios完成真实api接口请求
过滤器
什么是过滤器
在不改变数据的情况下 输出我们想要的数据。
问题：请说一下vue中的内置过滤器
在使用vue的时候是2.0以后的版本，在2.0版本的时候就没有内置过滤器了。如果想使用过滤器，需要自己定义过滤器。在早期1x版本的时候是有的，但是1x很少使用。
vue中如何自定义过滤器
1.全局过滤器
全局过滤器就是定义好之后，在页面中所有的实例都可以使用。
语法：创建位置在vue实例之前
Vue.filter("定义过滤器的名字",(val)=>{
return 过滤的逻辑
})
val:需要过滤的数据
使用过滤器：| 管道符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>全局过滤器</title>
</head>
<body>
<div id="app">
<!-- 2.调用过滤器 | -->
<h1>{{str | demo}}</h1>
</div>
<div id="app1">
<!-- 2.调用过滤器 | -->
<h1>{{text | demo}}</h1>
</div>
</body>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script>
// 1.创建过滤器
Vue.filter('demo',(val)=>{
return val.substr(2,4)
})
const vm=new Vue({
el:'#app',
data:{
str:"hgndgakuib"
}
})
const vm1=new Vue({
el:'#app1',
data:{
text:"客服我本办法不方便发表回复不会比"
}
})
</script>
</html>
2.局部过滤器
局部过滤器就是定义好之后，只能在当前实例中使用
语法：定义在vue实例中与el data methods wacth等这些属性同级
filters:{
定义过滤器的名字(val){
return 过滤逻辑
}
}
注意：过滤器在没有冲突的情况下可以串联使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>局部过滤器</title>
</head>
<body>
<div id="app">
<!-- 2.调用过滤器 | -->
<h1>{{str | demo | add}}</h1>
</div>
</body>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script>
const vm=new Vue({
el:'#app',
data:{
str:"hgndgakuib"
},
// 1. 创建局部过滤器
filters:{
demo(val){
return val.substr(3,6)
},
add(val){
return val.toUpperCase()
}
}
})
</script>
</html>
实例的生命周期
生命周期：实例在创建到销毁经过的一系列过程叫做实例的生命周期
在生命周期中被自动执行的执行的函数=>钩子函数/生命周期钩子
生命周期钩子函数的用途
在生命周期的特定阶段会被自动调用，为我们开发者提供了一个自己执行的逻辑的机会
步骤
1.实例创建
beforeCreat(实例创建开始) el data还没挂载
created(实例创建结束)数据和视图已经绑定了 data的数据改变了，那么视图有会随之发生改变
2.模板创建
beforeMount
mounted
3.更新过程
beforeUpdate开始更新
updated
4.销毁过程
beforeDestroy开始销毁
destroyed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>实例的生命周期</title>
</head>
<body>
<!--
1.vue页面第一次加载的时候会触发几个钩子
4个钩子 beforeCreat created beforeMount mounted
2.vue生命周期的作用
在生命周期的特定阶段会被自动调用，为开发者提供一个自己执行的逻辑机会
3.vue的生命周期一共几个阶段
4个阶段
1.实例创建 beforeCreat created
2.模板创建 beforeMount mounted
3.更新过程 beforeUpdate updated
4.销毁阶段 beforeDestroy destroyed
4.DOM渲染在那个生命周期中完成
mounted
5.请您描述vue的生命周期 ---》8个钩子对应的意思
6.设置数据请求的时候是在哪个钩子
created:由于在当前钩子里面dom并没有渲染 所以在当前钩子里面进行数据请求的时候 不要进行dom操作
mounted:dom已经被渲染完毕了 如果要进行dom操作的时候
-->
<div id="app">{{text}}
<button @click="text='实例修改了'">点击更新</button>
<button @click="del()">点我进行销毁操作</button>
</div>
</body>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script>
const vm=new Vue({
el:'#app',
data:{
text:"这是一个实例",
},
methods:{
del(){
// 执行的是vue的销毁操作
this.$destroy()
}
},
beforeCreate(){
// $el 过去页面中关联的DOM元素
console.log("实例开始初始化，开始配置数据观测 属性 方法，后挂载还没开始 $el里面还没东西");
},
created(){
console.log("实例创建完成 已经配置好了数据观测 属性 方法，$el没有东西");
},
beforeMount(){
// render()渲染方法吧内容进行页面的渲染
console.log("在挂载之前被调用，相关的render被首次调用");
},
mounted(){
console.log("$el已经有内容");
},
beforeUpdate(){
console.log("准备数据更新");
},
updated(){
console.log("页面的内容已经更新完成");
},
beforeDestroy(){
console.log("实例销毁之前调用，实例还可以正常使用");
},
destroyed(){
console.log("实例销毁之后被调用，vue实例会把所有内容解除绑定");
}
})
</script>
</html>