vue从入门到放弃——（6）交互与实例的生命周期
前端和后端的概念
任何一个应用程序都有前端和后端
前端：客户端，就是浏览器（pc端 手机端）
后端：服务器（性能很好的电脑）是提供计算服务的设备。
服务器的构成包括处理器、硬盘、内存、系统总线等，和通用的计算机架构类似，但是由于需要提供高可靠的服务，因此在处理能力、稳定性、可靠性、安全性、可扩展性、可管理性等方面要求较高。
前后端交互原理
[外链图片转存失败(img-RrwDsZFq-1562074235053)(…/AppData/Roaming/Typora/typora-user-images/1561614402046.png)]
交互的应用场景（什么时候用到前后端交互）
1.从后端获取一些数据，将其进行展示或计算
2.将用户在页面中提交的数据发送给后端
Vue.js resource交互
Vue自身不带处理HTTP请求 如果想使用HTTP请求必须要引入 vue-resource.js 库它可以通过XMLHttpRequest发起请求并处理响应。也就是说，$能做的事情，插件一样也能做到，而且的更为简洁。交互借助于.ajax能做的事情，vue-resource插件一样也能做到，而且vue-resource的API更为简洁。
Vue.js 交互借助于 $http 完成
下载：npm install --save vue-resource
Vue请求数据交互
vue请求数据有Vue-resource、Axios、fetch三种方式。Vue-resource是Vue官方提供的插件，axios与fetch是第三方插件
Vue-resource可以和jauery融合吗？
是可以的，但是不推荐这么使用，因为这样违背了
vue不对dom进行操作的原则
Vue-resource特点
vue-resource是官方推荐我们使用的请求方式
但是在vue2.0版本之后官方已经停止对当前http
库进行维护，官方转头推荐我们使用axios等
第三方http库来进行数据的请求
get 类型
语法：this.$http.get(‘url’,
{params: {key1:val1,key2:val2…}}).
then(function(res){处理请求成功的情况},
function(res){处理请求失败的情况})
post类型
语法：this.$http.post(‘url’,
{key1:val1,key2:val2…},
{emulateJSON:true}).
then(function(res){处理请求成功的情况},
function(res){处理请求失败的情况})
eg：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="box">
<button @click="funa()">点我发送get</button>
<button @click="funb()">点我发送post</button>
</div>
</body>
</html>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script src="./node_modules/vue-resource/dist/vue-resource.min.js"></script>
<script>
new Vue({
el: ".box",
data: {},
methods: {
funa() {
// get传参的第一种方式
this.$http.get(
"http://localhost:8888/get",
{ params: { "uname": "我是get传参的第一种方式" } }//传值在params里面传，地址和值在get（）里面写，函数在外面写
).then(function (data) {//成功的回调
console.log(data);
}, function (err) {//失败的回调
console.log(err);
})
//get的第二种方式，直接在url后面添加数据
this.$http.get(
"http://localhost:8888/get?uname=我是get传参的第二种方式",
).then(function (data) {//成功的回调
console.log(data);
}, function (err) {//失败的回调
console.log(err);
})
},
funb(){
this.$http.post(
"http://localhost:8888/post",
{"uname":"我是post"},
{emulateJSON:true}//模拟json格式，传递参数
).then(function (data) {//成功的回调
console.log(data)
}, function (err) {//失败的回调
console.log(err)
})
}
}
})
</script>
Axios的使用
Axios是第三方插件，不仅能在Vue里使用，还能再其他第三方库中使用例如react
npm install --save axios
get类型
语法：axios.get(’/路径?k=v&k=v}
.then((ok)=>{})
.catch((err)=>{})
post类型
语法：axios.post(’/user’, {k:v,k:v })
.then(function (ok) { })
.catch(function (error) { });
注意事项：
Axios的post请求的发送方式是Request Payload，但是后台只认识Form data这种方式，所以在进行post请求的时候需要转换发送方式==（URLSearchparams）==
eg：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="box">
<button @click="funa()">点我执行axios.get</button>
<button @click="funb()">点我执行axios.post</button>
</div>
</body>
</html>
<script src="./node_modules/axios/dist/axios.min.js"></script>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script>
new Vue({
el: ".box",
data: {},
methods: {
funa() {
axios.get("http://localhost:8888/get?uname=我是axios.get").then((data) => {
console.log(data);
}).catch((err) => {
console.log(err);
})
},
funb() {
var param = new URLSearchParams();
param.append("uname","我是axios.post")
axios.post("http://localhost:8888/post",param).then((data) => {
console.log(data);
}).catch((err) => {
console.log(err);
})
},
}
})
</script>
Axios–综合交互
axios(utl:‘请求地址’,method:‘请求方式’,data/params:{k:v}).then((ok)=>{})
使用get发送数据的时候 使用params：{key:val}发送数据
使用post发送数据需要使用 var param=new URLSearchParams();修改传参方法
使用param.append(“uname”,“xixi”)添加数据并且使用data发送数据
eg：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="box">
<button @click="funa()">点我发送axios的get请求</button>
<button @click="funb()">点我发送axios的post请求</button>
</div>
</body>
</html>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script src="./node_modules/axios/dist/axios.min.js"></script>
<script>
new Vue({
el:".box",
data:{},
methods:{
funa(){
axios({
url:"http://localhost:8888/get",
method:"get",
params:{"uname":"我是get"}
}).then((data)=>{
console.log(data)
}).catch((err)=>{
console.log(err);
})
},
// 因为Axios里post的发送方式是Request Payload，但是后台只认识Form data所以我们需要用URLSearchParams来改变
//post的发送方式，在这里传参和get有一点小小的不同
funb(){
var param = new URLSearchParams();
param.append("uname","我是post")
axios({
url:"http://localhost:8888/post",
method:"post",
data:param,
}).then((data)=>{
console.log(data)
}).catch((err)=>{
console.log(err);
})
}
}
})
</script>
过滤器
过滤器作用
在不改变数据的情况下，输出前端需要的格式数据
2.0中已经废弃了内置过滤器，需要我们自定义过滤器来使用filter
全局过滤器的定义方法
位置：创建实例之前
Vue.filter(‘sum’, function(val){
return val + 4;
});
eg：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="box">
<p>{{text|maren}}</p>
<p></p>
</div>
</body>
</html>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script>
Vue.filter("maren",(val)=>{
return val.toUppercase;
})
new Vue({
el:".box",
data:{
text:"sdsdas"
},
methods:{
}
})
</script>
局部过滤器
只能在当前vue注册内容中使用
在vue实例中与el属性data属性同级定义
filters：{
过滤器名字:function(val){
return 输出内容
}
}
过滤器的调用方法
{{ msg | sum }}
注意事项
定义全局过滤器，必须放在Vue实例化前面
在没有冲突的前提下，过滤器可以串联
实例生命周期
什么是实例的生命周期
实例在被创建前经过的一系列初始化过程叫生命周期
什么是生命周期钩子
在生命周期中被自动调用的函数叫做生命周期钩子
生命周期钩子函数的用途
在生命周期中会自动调用一些函数，为我们提供执行自定义逻辑的机会
钩子函数有哪些
beforeCreate（创建实例）、created（创建完成）、beforeMount（开始创建模板）、mounted（创建完成）、beforeUpdate（开始更新）、updated（更新完成）、beforeDestroy（开始销毁）、destroyed（销毁完成）
钩子函数的书写位置在data与methods同级位置书写。
扩展设置数据请求的钩子
created里面，如果涉及到需要页面加载完成之后的话就用 mounted。
在created的时候，视图中的html并没有渲染出来，所以此时如果直接去操作html的dom节点，一定找不到相关的元素
而在mounted中，由于此时html已经渲染出来了，所以可以直接操作dom节点
扩展常见问题
1.什么是vue生命周期？
2.vue生命周期的作用是什么？
3.vue生命周期总共有几个阶段？
4.第一次页面加载会触发哪几个钩子？
5.DOM 渲染在 哪个周期中就已经完成？
扩展常见问题答案
1.Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。
2.生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易完成指定逻辑。
3.它可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后
4.第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子
5.DOM 渲染在 mounted 中就已经完成了.
简单描述每个周期？
beforeCreate（创建前） 在数据观测和初始化事件还未开始
created（创建后） 完成数据观测，属性和方法的运算，初始化事件，实例中的el属性还没有显示出来
beforeMount（载入前） 在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。
**mounted（载入后） **在el 被新创建的 vue.el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。
**beforeUpdate（更新前） **在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。
**updated（更新后） **在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
beforeDestroy（销毁前） 在实例销毁之前调用。实例仍然完全可用。
**destroyed（销毁后） **在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。