Vue（五）计算属性、过滤器、axios、vue生命周期

效果如下：

过滤器连用：

//定义

//充分考虑将来进入这个过滤器的旧值共有几种情况

Vue.filter(“过滤器名”,function(旧值,…){ })

//使用

<元素>{{变量 | 过滤器1 | 过滤器2 | … }}</元素>

举例：给性别追加图标；

性别: {{sex|sexIcon}}

性别: {{sex|sexFilter|sexIcon}}

性别: {{sex|sexFilter("en")|sexIcon}}

性别: {{sex|sexFilter("cn")|sexIcon}}

效果如下：

三、axios

axios是第三方开发的，专门发送ajax请求，基于Promise的函数库；只要在vue中发送ajax请求，一律用axios。

axios的使用：

（1）配置服务器端接口地址的公共路径部分

axios.defaults.baseURL=“http://服务器端基础地址部分”

（2）get请求

axios.get(“服务器端接口地址剩余相对路径部分”,{

params:{ 参数名: 参数值, … : … , … }

}).then(result=>{

})

//注意：

//.then后必须用箭头函数

//result不直接是响应结果，result.data才是真正的响应结果

（3）post请求

axios.post(

“服务器端接口地址剩余相对路径部分”,

“参数名1=参数值1&参数名2=参数值2&…”

).then(result=>{

console.log(result.data);

})

（4）运行时axios会自动将baseURL和get/post中的相对路径拼接成接口的完整地址再发送请求。

举例：模拟访问器服务器相关数据；

请求结果如下：

需要特别注意： axios发送get请求和发送post请求的参数格式是不一样的。

四、vue的生命周期（高频笔试面试）

new Vue()的加载过程是异步的，放在new Vue()之后的代码是无法保证在vue加载完之后才执行的，所以将来程序的主要流程和代码，都要写在new Vue()内部；

其实new Vue()和普通网页一样，在整个加载过程中也要经历多个阶段——生命周期。

1.vue生命周期四个阶段

必经阶段

（1）创建(create)阶段：创建data对象、访问器属性；

（2）挂载(mount)阶段：扫描真实DOM树，创建虚拟DOM树，并首次加载数据到页面显示；

不必经阶段

（3）更新(update)阶段：只当修改data中的变量，且影响页面显示时触发；

（4）销毁(destroy)阶段：只当主动调用vm.$destroy()函数后触发，只删除虚拟DOM树断开的new Vue()与页面之间的联系，但是new Vue()对象还在内存中。

主动调用 **vm.$destroy()\ast \ast 函数销毁后，可用\ast \ast vm.$mount(“#app”)**将断开的new Vue()和页面重新建立虚拟DOM树，重新绑定起来挂载界面。

2.每个阶段前后，各有一对生命周期钩子函数（回调函数）

new Vue({中

/必经阶段/

beforeCreate(){…} //没data、访问器属性，没虚拟DOM树

//创建(create)阶段

created(){…} //有data、访问器属性，没虚拟DOM树

beforeMount(){…} //有data、访问器属性，有虚拟DOM树，但页面内容未加载

//挂载(mount)阶段

mounted(){ …} //有data、访问器属性和虚拟DOM树，页面内容也加载完成，new Vue()首屏加载完成

/不必经阶段/

beforeUpdate(){…}

//更新(update)阶段

updated(){…}

beforeDestroy(){…}

//销毁(destroy)阶段

destroyed(){…}

举例：触发new Vue()声明周期各个阶段；

Welcome {{uname}}

• 编号 | 详细信息 | 单价

• {{p.pid}}|{{p.details}}|¥{{p.price.toFixed(2)}}

  效果如下：

  

  

  

  

  3.发送ajax请求应写在哪个阶段

  首屏数据加载完，new Vue()会自动触发mounted()回调函数/钩子函数，所以如果希望在首屏加载完之后，自动发送ajax请求，应该放在mounted()中。

  过程：

  a.在data中先定义变量，准备接受ajax请求回来的数据；

  b.在mounted()中发送ajax请求，获得响应结果；

  先输出响应结果，确定是否正确

  再将响应结果赋值给data中之前准备好的变量

  c.在界面中用绑定语法或指令，显示data中变量的值。

  举例：请求商城首页商品，加载到页面；

  Welcome {{uname}}

• 编号 | 详细信息 | 单价

• {{p.pid}}|{{p.details}}|¥{{p.price.toFixed(2)}}

  效果如下：

  总结

  三套“算法宝典”

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  

  算法刷题LeetCode中文版（为例）

  人与人存在很大的不同，我们都拥有各自的目标，在一线城市漂泊的我偶尔也会羡慕在老家踏踏实实开开心心养老的人，但是我深刻知道自己想要的是一年比一年有进步。

  最后，我想说的是，无论你现在什么年龄，位于什么城市，拥有什么背景或学历，跟你比较的人永远都是你自己，所以明年的你看看与今年的你是否有差距，不想做咸鱼的人，只能用尽全力去跳跃。祝愿，明年的你会更好！

  由于篇幅有限，下篇的面试技术攻克篇只能够展示出部分的面试题，详细完整版以及答案解析，有需要的可以关注