Vue
海绵杨宝宝
用最通俗的话解释世界。
展开
-
项目中遇到的问题8:修改ele-ui的样式不生效
问题描述:在vu项目中,我们都会使用到ele-ui的组件,但麻烦的是在调节组件的样式的时候,总会出现不生效的情况,这是因为ele-ui有自己的样式,我们想要修改就要用自己的样式覆盖ele-ui本来的样式,而我们的样式一般都会写在中,这样会导致覆盖的样式不生效解决方法1<style lang="less" scoped>// 取消打印功能默认的左右边距@media print...原创 2019-12-30 17:41:52 · 887 阅读 · 0 评论 -
axios请求文件流下载
axios({ method: 'post',// 设置请求方式 url: `/modelapi/report/non-blocking`,// 设置请求地址 data: {// 参数 Id: this.activeTab, ProjectId: this.projectId }...原创 2019-12-18 11:15:51 · 2700 阅读 · 0 评论 -
项目中遇到的问题4:请求数据,并用watch监听,刷新页面会执行两遍接口
问题描述:通过项目ID向后端请求数据,数据请求成功后会向数组中push内容,通过watch监听项目ID变化后重新执行这个方法,但接口会执行两遍,数组中也会被push两次,在请求中清空了数组但依然会push两次内容,所以页面显示也会出错原代码如下:// data中定义了一个空数组studentData,请求到数据后向这个数组中push数据data() { return { ...原创 2019-12-17 16:51:59 · 3088 阅读 · 0 评论 -
项目中遇到的问题2:写好的页面右击打印预览出现空白
写好了一个页面,因为想让用户可以保存成PDF,在谷歌浏览器自己试了下,如下图,左侧和内容中间出现了空白区域:尝试了很多办法都没解决,就把中间内容的样式注释了重新检查,发现我在写页面的时候为了让内容在一行显示使用的时flex布局,后来改成了float:left;再右击打印预览内容部分的空白消失了,但是左侧的灰色区域还存在。在测试的过程中发现是因为浏览器的打印自带了边距所以出现了这个问题,在CSS...原创 2019-12-05 16:22:18 · 1081 阅读 · 0 评论 -
项目中遇到的问题1:iframe嵌套跨域内容,src变更但内容未刷新问题
**问题描述:**在A页面中通过iframe嵌套了B页面,B页面的内容是通过A页面的query里面的参数请求到的使用watch监听了route变化,当query中传入的参数变更后就需要让iframe的src和内容同步变更,但在项目过程中,iframe随着变更了,但是iframe中的内容却没有同步更新在网上查询到了下面的解决方法:方法1:document.getElementById(ifr...原创 2019-11-28 15:50:59 · 2162 阅读 · 0 评论 -
axios.CancelToken
在公司项目中看到之前代码使用了axios.CancelToken,但自己对这个并不了解,所以去查了查,下面是我的一些总结,如有错误,一经提出立即改正。axios.CancelToken官方文档:使用方法如下:需要注意的是在get请求中CancelToken作为第二个参数传入,在post请求中CancelToken作为第三个参数传入const CancelToken = axios.Cance...原创 2019-11-02 10:31:41 · 7398 阅读 · 1 评论 -
VueRouter中$router和$route的区别
在使用路由的时候有如下步骤:1、创建要使用路由的组件2、创建routes,配置路由映射表3、new一个Vue Router命名为router,并将routes作为一个对象添加到router中4、将router在Vue中进行注册let home = { data(){ return {} }, template:"<div>我是home组件&...原创 2019-09-22 15:28:01 · 450 阅读 · 0 评论 -
Vue-Cli 目录架构
目录解构├── build // 构建相关├── config // 配置相关├── src // 源代码│ ├── api // 所有请求│ ├── assets // 主题 字体等...原创 2019-09-08 11:06:58 · 169 阅读 · 0 评论 -
VueRouter-导航守卫
在用户浏览网页,跳转页面的时候我们都会进行一些验证,这是网站项目中很普遍的需求。对此VueRouter为我们提供了7个钩子函数,也就是常说的导航守卫(Navigation-guards)。而VueRouter也对这7个导航守卫分为三类:全局守卫、路由独享守卫、组件内的守卫。下面是结合了vue实例的生命周期钩子函数和导航守卫的钩子函数进行的测试:<div id="app">...原创 2019-09-05 13:59:23 · 293 阅读 · 0 评论 -
Vue的生命周期
下面是Vue官网对生命周期的介绍Vue是一个构造函数,在这个构造函数执行的过程中会经历开始创建、初始化数据、编译模板、实例挂载到真实的DOM、数据渲染 ----> 视图更新等一系列过程,而在这个过程中会在特定的阶段默认调用一些函数,这些函数就是Vue生命周期的钩子函数。下面对这些钩子函数进行详细说明:1、实例通过new Vue()创建后,就会初始化事件和生命周期,然后就会调用be...原创 2019-09-01 15:51:29 · 169 阅读 · 0 评论 -
Vuex中的actions的参数
actions可以说是mutation的加强版,它可以通过commit mutations中的方法改变状态,最重要的是它可以进行异步操作,在组件中通过$store.dispatch来触发action中定义的方法。今天是要来说一下action函数的参数一般在使用actions方法时我们会像下面的书写方式:actions:{ add_num({commit}){ c...原创 2019-09-03 23:42:31 · 16843 阅读 · 2 评论 -
VueRouter-路由传参
1、使用router-link传递参数语法:<router-link to=‘/路由路径/参数’></router-link>代码演示:<router-link to="/home/参数">首页</router-link><router-view></router-view>路由配置:const route...原创 2019-09-05 00:27:28 · 193 阅读 · 0 评论