使用vue.js爬坑二

Part1新手使用vue.js开发过程遇到的坑二

1遇到的问题

1. 怎么调用另外一个vue文件的方法
2. 封装axios的时候，说回调函数不存在
3. 登录成功后，想把template标签隐藏掉，结果发现隐藏不了

2述说过程

1.怎么调用另外一个vue文件的方法

• 原因：我现在做的是一个登录注册，这个登录成功，要把一些信息存到cookie里面去，考虑到cookie的存取方法是可以复用的，所以我就想写到另外一个单独的vue文件中去，当作公共方法
• 如图，刚开始，我在export default里面找到了一个methods,这个命名看着就是应该在里面写方法的，于是我这么做了

• 很显然不行，Console里面直接报错说，这不是一个方法，我懵了，心想在前一个vue文件我还用的好好的，咋跨个界面调用，就说不是一个方法呢

• 后来我找了查了好多资料，东西是通过exports 暴露出去了，但是我不知道怎么调用呀

• 后来我只能用死办法了，我在外面定义了一个方法，然后把方法名暴露出去，就可以了

• 外面直接先引入cookiesUtil 然后给它写个名字 直接名字.方法名调用就行了。
• 至于为啥写在methods里，但是不能远程调用的问题，我现在还没不知道怎么做，等我继续找找资料，当然有人如果懂，给我解解惑也是感激不尽!!!

2.封装axios的时候，说回调函数不存在

• 问题描述
• 就是我想把axios异步请求封装一下，封装成一个公用的js工具类，这样每次我只要调用request.get/set方法，就可以发起请求，减少了代码的开发量

先说说axios每个方法的用途

• .post(url) 代表用post请求url
• .get(url) 代表用get请求url
• .then(response=>hdCall(response))
• .then代表请求成功后执行的方法
• response代表服务器返回来的数据，可能是json对象可能是html字符串
• => 这个是箭头函数 上面那一行转换成普通的js函数 如下图

function(response){
return hdCall(response);
}

• hdCall(response) 回调函数 就是成功之后把调用这个function方法


• .catch(error=>errorCall(error))
• .catch 方法 是请求错误后执行的方法
• errorCall(error) 回调函数 是出错之后调用这个function方法

• .finally() 代表不管请求失败还是请求成功都会执行的方法，一般用于前端把加载的特效隐藏或关闭

• 调用过程
• 我直接request.post(params,hdcall)调用，出现一个异常 说errorCall没有定义


• 解决办法
• 我直接做了一个判断，如果你没有传回调函数，在里面自己默认建一个回调函数

3.登录成功后，想把template标签隐藏掉，结果发现隐藏不了

• 问题描述，就是登录成功之后，我想把template这个模板给隐藏掉,我查询了资料，用了v-if这个指令，结果就是没反应
• 具体原因 好像是vue不支持隐藏template
• 解决办法
• 把v-if写在template下方的div上一样可以隐藏掉这个页面
• 在图下方，data里面写条件初始值 控制显示隐藏
• 可以使用 this.login_type = 'sublogin' 更改里面的值

这就是我学了第二天的vue，学完写了一个页面，想把公司的erp管理系统，从前后端不分离，改成前后端分离的模式，感觉路途慢慢呀!!!

觉得还行的话，关注下我的公众号 楼梯间的男孩 我们一起进步，或者看我进步!!!