精华内容
下载资源
问答
  • vue项目中遇到的难点
    千次阅读
    2021-09-03 17:49:21

    1. input中type为number时 max-length 失效

      解决:input type="tel"

    2. vue组件中click事件失效

      解决:使用了bette-scroll插件做滚动。加.native也不好使,发现better-scroll的配置中没有设置 click:true,设置过之后click事件成功。

    3. 不同商品页,id变化,商品不变

      监听$route变化,然后获取id重新去取数据。

    4. 修改完数据点击提交后,数据变了 页面数据没有更新

      原因:因为vue的检查机制在进行视图更新时无法监测 数组中的某个对象的属性值的变化。(数据是引用数据类型,数据上没有get set方法)

      方案一:利用 this.set(this.obj,key,val)

      解析:第一个参数目标对象,第二个参数要修改数据下标,第三个参数修改后的新值。

      方案二:也可以使用$nextTick()这个方法

      解析:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM,

      Vue 在更新 DOM时是异步执行的。当数据发生变化,Vue将开启一个异步更新队列,视图需要等队列中所有数据变化完成之后,再统一进行更新!

      方案三:this.$forceUpdate(); //可以直接使用这个是强制更新 但不推荐使用

      调用强制更新方法this.$forceUpdate()会更新视图和数据,触发updated生命周期。

    更多相关内容
  • vue项目中遇到难点面试.pdf
  • 在声动语商项目中,需求更改后,出现一个:教师发布课程的时候要求一个课程同时发送给多个班级。 现在的接口:每次只能发送一个班级的id,也就是:classesId字段只能传一个班级的id,因此为了满足这个新需求就想着:...
  • 这里给大家分享一下vue中的一些技巧,希望对大家有用处。(话不多说上代码) 1,vue路由拦截浏览器后退实现表单保存类似需求(为了防止用户突然离开,没有保存已输入的信息。) //在路由组件: mounted(){ }, ...
  • 在本篇文章里小编给大家分享的是关于vue开发中遇到的问题总结,有兴趣的朋友们可以学习参考下。
  • Vue项目遇到的一些难点

    千次阅读 2022-05-09 15:56:28
    解决方法:配合qs插件使用 也就是将对象格式化成 Form Data 类似jquery的serialiZeArray()方法 2、使用vue-router时 URL模式引发的问题? Vue-router 提供一个mode参数 用来控制 URL 格式 默认使用的是 hash...

    1、使用axios.js 处理异步加载时发现请求时传递参数会直接发送js对象到后端 而不是发送Form Data 而且post 请求 会发送两次请求  第一次是 methodoptions 第二次才是post

    解决方法:配合qs插件使用 也就是将对象格式化成 Form Data  类似jquery中的serialiZeArray()方法

    2、使用vue-routerURL模式引发的问题?

    Vue-router 提供一个mode参数 用来控制 URL 格式 默认使用的是 hash格式 而我在项目中使用的是history格式

    对比:使用history 后发现手动切换页面一切正常 但刷新页面是会提示页面不存在(404) 原因就是后端把URL解析了,使用hash模式 URL中会有一个#号分割 后端默认不会解析#后面的参数

    3、Vue 项目中 用v-for循环本地图片 图片不显示

    解决方法:使用require动态引入图片  或者将图片放static文件夹里

    <img v-bind:src="require(item.imgurl)">

    4、elementui中 防止错误提示框多个弹出 可以直接调用(Message as  any).colseAll() ; 也可从新 Message()方法

    展开全文
  • 今天忙里偷闲,简单总结一下最近vue项目重构的一些技术要点。 vue数据更新, 视图未更新 这个问题我们经常会遇到,一般是vue数据赋值的时候,vue数据变化了,但是视图没有更新。这个不算是项目重构的技术要点,也和...
  • vue项目中遇到的问题汇总

    千次阅读 2020-12-21 12:00:20
    前:项目用到的技术栈为webpack+vue2.x+pug+stylus+elementUI1、IE9, 请求服务器数据并用v-for渲染option标签出现只显示第一个字的问题解决方法:/*** 强制重绘页面的select 输入框,解决IE9只显示单个字符串问题...

    前:项目用到的技术栈为webpack+vue2.x+pug+stylus+elementUI

    1、IE9中, 请求服务器数据并用v-for渲染option标签出现只显示第一个字的问题

    解决方法:

    /**

    * 强制重绘页面的select 输入框,解决IE9只显示单个字符串问题

    * @param useNextTick {Boolean} 使用在vm next tick 处理, 默认true

    */

    forceRedrawSelect: function (useNextTick) {

    useNextTick = useNextTick !== false;

    if (!browser.isIE)

    return;

    var _this = this;

    var redraw = function () {

    var $select = _this.$("select");

    $select.css('width', 0);

    $select.css('width', ''); // remove from style tag

    };

    if(useNextTick)

    this.$nextTick(redraw);

    else

    redraw()

    },

    2、IE9中,elementUI的el-input删除操作无法触发数据变动监听

    解决办法:加入ie9input事件垫片

    cnpm install --save ie9-oninput-polyfill

    3、vue自定义指令判断时机问题

    // 错误写法

    'null' (el) {

    if (el.innerHTML === '' || el.innerHTML === '--') {

    addClass(el, 'null-handler')

    } else {

    removeClass(el, 'null-handler')

    }

    },

    因为无法控制标签内容的渲染时机导致判断出错,所以应该去判断value

    // 正确写法

    'null' (el, { value, oldValue }) {

    if (oldValue === value) return

    if (value === '' || value === '--') {

    addClass(el, 'null-handler')

    } else {

    removeClass(el, 'null-handler')

    }

    },

    4、el-input手动获取焦点问题

    情景:输入框一开始是隐藏的,点击按钮显示输入框并获取焦点

    把手动获取焦点那段代码写在$nextTick()就好了

    手动获取焦点这个操作我也记录一下:

    首先给标签加个属性ref="searchBox"(名字随便起),然后点击按钮把控制显示的字段赋值true,接着写下这几行代码就好了

    this.$nextTick(() => {

    this.$refs.searchBox.focus()

    })

    image.png

    image.png

    5、mounted钩子函数中请求数据导致页面闪屏问题

    其实就是加载时机问题,放在created里会比mounted触发早一点,如果在页面挂载完之前请求完成的话就不会看到闪屏了

    6、IE9中template标签使用问题

    之前在tr标签里面用template标签包裹td标签,出现了比较严重的UI错乱,

    所以。。IE9不能在tr标签中使用template标签

    7、纯色svg转换成字体(用了panda这个软件),跟预期不符

    这个应该是跟svg的描绘路径什么的有关,让设计师同学重新出一个图吧。。

    8、一个奇葩bug,开发环境elementUI的表格排序图标不显示,但是在线上环境和其他同事的开发环境没问题

    // 是由于mac没安装xcode导致依赖包install出错(出错了居然还能启动。。)

    // 输入以下命令,如果没安装xcode系统就会提示你安装了

    // npm rebuild node-sass --force

    后来又出现了问题, 然后我升级了npm版本解决

    9、el-table用v-if隐藏显示列和预期不符问题

    给el-table-column加一个key属性,:key="Math.random()"或者其他的,确保每列的key值不同就可以了

    10、在使用el-table的时候有的时候需要对表格中的数据做处理,需要用到filter,虽然官方也有提供过滤的方法(filter-method),但是还是用自定义列,然后用filter复用性好一些

    {{scope.row.date | dateConvert}}

    11、在使用el-table的时候,有时候需要自定义表头,比如在表头中加个问号,然后hover有个提示信息

    这里就需要用到官方提供的render-header属性了,首先给需要自定义表头的列加一个属性,绑定一个方法

    HTML中

    {{scope.row.date | dateConvert}}

    methods中

    renderDate (createElement, { column }) {

    return createElement('div', {style: {'margin-top': '5px'}}, [

    column.label,

    createElement(

    'el-tooltip',

    {

    class: 'header-tip',

    props: {

    effect: 'light',

    placement: 'bottom-end',

    enterable: false,

    content: '日期'

    }

    }, [

    createElement('i', {

    class: 'el-icon-question'

    })

    ]

    )

    ])

    }

    12、用forEach遍历NodeList,ie报错“nodelist为对象,不支持forEach属性”

    因为ie认为NodeList是一个对象,不支持forEach方法遍历,解决方法很简单

    // es6写法

    let nodeList = [...this.$el.querySelectorAll('[id^=productItem]')]

    // es5写法

    let nodeList = Array.prototype.slice.call(this.$el.querySelectorAll('[id^=productItem]'))

    展开全文
  • webpack项目中自动引入全局scss变量文件  假设我们有一个公共的scss变量文件variables.scss /*存放所有全局变量*/ $card-title:#C7D200; //首页 卡片标题颜色 $bc-color:#182037; $hoverColor: #7abef9; //链接...
  • 近期一直在做一个xxx中心的项目,先来吐槽下内心的想法, 要开发的项目需求很不明确,需求两周两周的更改,感觉每天并没有特别多实际的产出,总是感觉有点儿浪费时间。 虽然这样,但是作为开发,我们只能服从上级...

    近期一直在做一个xxx中心的项目,先来吐槽下内心的想法,

    要开发的项目需求很不明确,需求两周两周的更改,感觉每天并没有特别多实际的产出,总是感觉有点儿浪费时间。

    虽然这样,但是作为开发,我们只能服从上级命令,好了,进入正题。

    但是对我来说,感觉还好,需求的更改,对我来说又是新的开发,新的接触,同时也是在锻炼我的耐心和耐性。

    ------------正题----------分割线【1】2019-10-17 2019年10月17日15:00:10-----------

    第一次使用vue开发实际的项目,虽然之前也有写过,但是都是自己练手的,并没有实际的后端接口,这次对我自己来说也算是个小小的锻炼。项目开发过程中遇到的坑,以及bug,以及自己不会的地方挺多的,下面我就一一列举下。

    (下面所有的问题,在我博客里面都会有)

    (1)axios请求中post请求的坑。刚开始的坑是,使用axios的post方法请求数据,数据被拦截,数据一直传不到后端那边。后来查文档才得知 axios对于post请求是有拦截功能的,需要自己判断,或者使用提请的 qs 方法,将传给后端的数据进行下处理。

    (2)路由传参的功能的坑。之前一直使用路由传参,但是当本页面刷新的时候,页面上是没有参数的,因为参数是从上个页面传入进来的。   解决办法:使用了缓存,和vuex状态管理。但是由于项目并不是很大型的项目,所以使用最多的是缓存。

    (3)页面缓存的坑。有个填写信息的页面,需要填写一部分信息,进入查新协议页面,返回的时候,页面上填写的信息还需要留存。  解决办法:使用vue提供的keep-alive,来完成页面的缓存的。

    (4)vue组件动态加载的坑。由于首页的排版不确定,然后想着,让组件动态显示,根据后端传入的数据,传入那个组件的数据,就显示那个组件。解决办法:和后端商量好,做个标识。前端根据标识判断,动态显示组件。  使用到了vue中的<component :is=""></component>   , 刚开始想着是不是和原生js一样使用append直接可以插入进入呢,但是后来发现根本不可以,思路是可以的,但是实现起来是行不通的。因为append后面插入的必须是个节点,而不是组件。后来就去查阅vue文档。

    但是现在还有个问题,首页是通过动态组件添加的,数据得从后端接口返回,但是接口请求也是需要时间,所以,刚开始进入页面的是,页面先会是空白,但是这样的体验并不友好,会让用户感觉到页面就是一片空白,但是好的解决办法现在暂时没有想出来。好的解决办法还在寻找ing。【师傅有建议添加个加载的gif图,但是,感觉。。。,我在找下看还有别的办法没,实在没有的话,就只能添加个gif图了。】

    (5)解析后端返回的map格式数据的坑。 之前解析数据的时候,直接就可以拿去,然后直接渲染页面使用即可。但是这次遇到后端返回的是map格式的数据,这就得解析下了。  例如:body['1']  。根据返回的格式,自己解析成自己需要的数据格式。

    (6)更新文件缓存的坑。每次打包好文件给后端更新的时候,用户手机上总会留下,上次版本的信息,而且每次都得清下缓存,才会显示最新版本的数据。后来,我师傅提了个建议,让后端返回一个更新版本的接口,前端每次更新版本的时候,都会给后端传入时间戳,然后后端接收后判断和库里的时间戳是否相同,相同的返回不需要更新,不相同的话,返回要更新,然后前端这边的处理方法是:需要更新的话,清除掉缓存,刷新页面即可。

    虽然说给.js  .css文件后缀加上时间戳也是可以的,但是页面的入口index.html每次都是一样的,所以。。。就不会更新,,百度一些说在nginx服务器上,写上强制更新,但是由于公司服务器上的文件很多,万一操作失误那就麻烦了。

    (7)h5页面打开调试日志。h5页面不像小程序那样,直接可以打开控制台,在手机上查看日志,得需要自己安装vConsole的插件来实现。 详见博客:【同微信小程序一样的移动端调试工具】移动端调试工具VConsole_柠檬不萌只是酸i的博客-CSDN博客_vconsole类似工具

    (8)获取首页链接里面的参数问题。获取是可以获取到,只要不跳转出这个项目的页面,都是可以的,但是该项目链接了许多外链,所以,有时候返回的时候,页面就会显示空白,因为获取的参数出了问题。解决办法:将参数设置成了缓存,但是返回的速度快了,首页同样还是会出现拿不到参数,的问题。

    解决办法还在寻找ing。

    (9)h5里面的搜索。h5里面input实现在手机上按下“搜索”,“go”,“前往”等按钮的时候,同时会触发像PC端的Enter。 input标签需要设置属性:type="search"   。  详见博客 html5 里面的type=”search“ ,h5版,点击手机键盘上的 ‘搜索”,”前往“等按钮,进行搜索_柠檬不萌只是酸i的博客-CSDN博客

    ----------稍后再更新--------------分割线【2】 2019年10月17日18:33:59-------------

    (10)登录接口bug。需要判断 errCode  10001状态的情况。如果出现 errCode出现 10001,则清空原来的session,重新请求该网络请求。

    ----------------------------  分割线【3】2019年10月18日14:55:55 ------------------------------

    (11)封装的请求方法不需要在传入相同的参数。  封装的方法,每个方法里面都得传入sessoin,但是里面需要有个版本的方法不需要传入session,那么就得在封装的方法里面进行判断。详见博客:axios请求需要注意的,axios的get请求传入参数需要注意的_柠檬不萌只是酸i的博客-CSDN博客_axios发送get请求传参

    (config.method == 'get') {
        console.log('config.params.version',config.params.version)
        if(config.params.version == 'v'){   // 在更新版本的接口里面会用到
          config.url = config.url
        }else{
          config.url = config.url + '?session='+localStorage.getItem('session');
        }
      }

    (12)省份地区判断的话,尽量不使用name判断,会有bug的。通过市区匹配省份的话,使用areaCode,有些文件是不一样的。

    (13)进来不在index.html文件里面引入公共的文件,因为每次更新版本的时候,index.html 都是相同的,如果修改了公共文件,是会有缓存,不会更新。因为该公共文件后面没有添加时间戳。

    ----------未结束。下次继续

    待优化的:

    • 首页空白。【已解决】【添加了loading】
    • 页面更新版本缓存.  【已解决】(将获取连接的templateId写在Home页面)
    if (templateId) {
        this.$store.commit('updateTemplatedId',templateId);
        window.localStorage.setItem('templateId', templateId);
        console.log('store===templateId',this.$store.state.templateId)
    }else{
        setTimeout(function() {
            window.location.reload()
        }, 1500);
    }

    展开全文
  • 在这个项目中你有遇到什么技术难点,你是怎么解决的? 其实这个问题旨在了解你在遇到问题的时候的解决方法,毕竟现在前端技术领域广,各种框架和组件库层出不穷,而业务需求上有时纷繁复杂,观察一个程序员在面对...
  • 注意点:建议不要使用ESLint 后面选No 就ok 大神跳过此处,否则在项目中只要编码格式有问题就会一直拨错!二.编辑器选择1、推荐使用Visual Studio Code工具打开testproject文件夹即可进行开发。(1)(打开终端快捷键 ...
  • 1.你知道vue的模板语法用的是哪个web模板引擎的吗?说说你对这模板引擎的理解. mustache,主要是使用{{}}进行数据渲染。 2.你知道v-model的原理吗?说说看 v-model是一个语法糖,真正实现双向绑定还是依靠v-...
  • 记录前端项目开发过程中遇到的比较不错的问题
  • 一、先总结出如下几点vue项目开发常见的问题及解决办法。列表进入详情页的传参问题。本地开发环境请求服务器接口跨域的问题API接口的统一管理UI库的按需加载定时器问题rem文件的导入问题Vue-Awesome-Swiper基本能...
  • Vue项目开发遇到的各种痛点问题和解决方案

    千次阅读 多人点赞 2021-02-20 00:36:06
    Vue项目开发遇到的各种痛点问题和解决方案
  • vue项目技术点总结,vue难点

    千次阅读 2020-09-24 15:20:12
    后台项目总结: 一.封装localStorage 我的规范—在src下创建一个utils文件夹,专门存放封装的js文件 封装localStorage创建saveLocal.js,代码如下 let storage = { set(key, value) { localStorage.setItem(key, ...
  • vue面试题和项目中遇到的坑
  • 一.修改el-input的border样式 使用.el-input__inner进行样式css修改,如若无效则尝试/deep/.el-input__inner进行深度修改 二.实现点击button进行页面跳转 为button添加点击事件,@click="$router.push('path跳转路径'...
  • 作者:yeyan1996https://juejin.im/post/5c76843af265da2ddd4a6dd0写在前面马上到了金三银四的时间,...在面试的时候,往往在二面,三面的时面试官会结合你的简历问一些关于你简历上项目的问题,而以下这个问题在很...
  • 达到可复用的目的,也就是说,export default 相当于导出当前vue组件,在其它引入当前组件时可以使用当前组件的方法和变量。 2、export和 exportdefault的区别 export可以导出多个命名模块,引入时(都用import...
  • Case 1 vue项目在IE自动读取缓存的数据,不重新发请求 解决方案: // 在每个请求上增加时间戳 config.url = `${config.url}?_t=${+new Date()}`
  • 使用vuejs开发项目中遇到的问题总结

    千次阅读 2020-12-30 17:35:54
    这次和大家分享一下我在该项目中遇到的坑。1、使用axios.js处理异步加载时发现请求时传递参数会直接发送js对象到后端,而不是发送Form Data,下面是两种传递参数方式的对比。而且post请求会发送两次请求,第一次的...
  • vue商城项目难点,需要解决的bug 1 Bug swiper插件,图片数据没有实时响应问题, 问题描述: vue是实时响应的 图片请求完成后 swiper 依旧在滑动,里面却没有图片 Ans:这是因为浏览器一开始标识pc,然后转换为...
  • vue2双向绑定的核心只要是利用ES5的Object.defineProperty实现的,然后利用里面的getter和setter来实现双向数据绑定的 二、vue2的生命周期 vue的生命周期即为一个组件从出生到死亡的一个完整周期,主要包括以下4...
  • 因为在监听播放状态改变时,也在监听歌曲id的变化,当歌曲的id发生变化时,audio的play()被执行,而此时,监听播放状态变化的play()也会被执行,两个一起执行导致的问题。这个问题不会导致代码出现问题。 ...
  • Vue 项目中各种痛点问题及解决方案

    万次阅读 多人点赞 2020-09-29 08:08:00
    点击上方“程序员黑叔”,选择“置顶或者星标”你的关注意义重大!作者:愣锤原文:https://juejin.im/post/6844903632815521799最近要求使用vue进行前...
  • vue项目遇到的问题以及解决方案

    千次阅读 2019-05-21 23:29:59
    vue项目真机测试 1)有时候我们在vue真机测试的时候,希望通过IP地址第访问页面。 2)比如:192.168.1.105:8080 但是发现打不开,无法访问 3)这是因为前段项目是通过webpack-dev-server启动的。而它默认不支持...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,595
精华内容 1,038
关键字:

vue项目中遇到的难点