调试工具
1、Weinre远程调试工具
简单的步骤：
- 本地全局安装weinre , 命令行：npm install -g weinre - 在本地启动一个检测器：weinre --boundHost 1.2.3.4 （IP为本地IP地址） - 在浏览器访问此地址：http://1.2.3.4:8080 - 把下面这一串东西，放在你需要调试的页面里： <script src="http://1.2.3.4:8080/target/target-script-min.js#anonymous"></script> - 点击链接打开：http://1.2.3.4:8080/client/#anonymous
2、vconsole 日志打印
import VConsole from 'vconsole' var vConsole = new VConsole();
3、fiddler抓包也需要支持https
解决方案：fiddler需要安装信任证书，手机也需要安装信任证书，在浏览器里面打开
http://1.2.3.4:8888 // 本地IP地址+端口号
4、charles 手机端抓包，需要安装证书
手机浏览器输入：chls.pro/ssl ，去下载证书。 手机-设置-安全与隐私-更多安全下载-从sd卡安装证书 - 找到之前在浏览器下载的证书
vue相关问题
1、vue 如何获取拉回数据后图片的高度？
<img :src="userInfo.profilePicture" alt class="img-picture" v-if="userInfo.profilePicture" ref="myImg" @load="imageFn" > imageFn() { console.log(this.$refs.myImg.offsetHeight); console.log(this.$refs.myImg.offsetWidth); },
2、vue中同一个dom节点，v-if与v-for不推荐同时使用，官方解答：
不推荐同时使用 v-if 和 v-for。 当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级
3、vue v-for 中更改item 属性值后，v-show不生效的问题
添加this.$forceUpdate();进行强制渲染，效果实现。 因为数据层次太多，render函数没有自动更新，需手动强制刷新。
4、这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消
beforeRouteLeave(to, from, next) { if (to.path === '/votes/subject') { next('/task-list'); } else { next(); } }
5、element UI 自定义传参的解决方法
这里的handleSelect默认绑定的参数是选中的那条数据。如果一个页面有好几个相同的组件，要想知道选的是哪个？
<el-autocomplete v-model="state4" :fetch-suggestions="querySearchAsync" placeholder="请输入内容" @select="handleSelect" ></el-autocomplete>
解决方案：
<el-autocomplete v-model="state4" :fetch-suggestions="querySearchAsync" placeholder="请输入内容" @select="((item)=>{handleSelect(item, index)})" // 写个闭包就可以了，index表示第几个组件 ></el-autocomplete>
6、element-UI 框架 el-input 触发不了 @key.enter事件
<el-input v-model="form.loginName" placeholder="账号" @keyup.enter="doLogin"> </el-input>
解决方案：使用@key.center.native
<el-input v-model="form.loginName" placeholder="账号" @keyup.enter.native="doLogin"> </el-input>
最后
以上就是前端小姐姐这两年小本本上总结的所有东西了，当然相信咱们的前端道友们都是见过大风大浪的，欢迎在评论区交流，分享自己的宝贵经验！o(￣︶￣)o
