在做项目的过程中,目前主要遇到了以下几个问题:

一.样式问题

1.样式中使用scoped的问题:

主要表现在从一个页面跳到另一个页面时,第二个页面的样式不能正确显示,通过刷新才能恢复页面的预定样式。

究其原因,是因为如果浏览器在加载了上一个页面的样式时,在跳到第二个页面时,css样式文件是懒加载的,上一

个页面的样式还是会作用到当前的页面,尤其是使用了组件框架时,当大量的以标签作为选择器的样式存在时,就会

使页面产生混乱。

2.解决方案

<1>所有页面统一在style标签内使用scoped属性,避免页面间的相互影响。

添加scoped之后,实际上vue在背后做的工作是将当前组件的节点添加一个像data-v-1233这样唯一属性的标识,当然也会

给当前style的所有样式添加[data-v-1233]。这样的话,就可以使得当前样式只作用于当前组件的节点。

优点:可以有限避免页面样式错乱的问题

缺点:代码复用率低

<2>使用统一的公共样式,在公共样式的基础上给页面添加单独样式。

<3>适当使用行内标签

二.过滤器的问题

在使用Vue过滤器的过程中出现了这样一个问题,需要将电话号码格式化为344的格式,在过滤器中这样写

formatTelNum (value){

let temp = value.split("")........

……

}

一运行就会报undefined的错误,解决的方法是在method中定义格式化电话号码的方法。

三.vue父子组件通讯中传值得一些问题

在Vue父子组件通讯的过程中可能遇到下面的问题:

当父组件中想要传递给子组件的值为异步获取到的时,即使在父组件的created(mounted)中就调用这个异步函数,在子

组件beforeUpdated钩子前都是拿不到这个传递过来的值得,如果想要在子组件页面渲染之前就要使用到这个值,必须在子组件的

标签中使用v-if或者v-show。在父组件想要传递的值还没有获取到之前,使子组件的v-if为false,当异步函数完成时设置为true,即可在

子组件的created钩子中拿到需要传递的值。

v-if和v-show的区别:

v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。

相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。

一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。

四.vue钩子

 

beforeCreate

  • 类型:Function

  • 详细:

    在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

created

  • 类型:Function

  • 详细:

    在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。

beforeMount

  • 类型:Function

  • 详细:

    在挂载开始之前被调用:相关的 render 函数首次被调用。

    该钩子在服务器端渲染期间不被调用。

mounted

  • 类型:Function

  • 详细:

    el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.$el 也在文档内。

    注意 mounted不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕,可以用 vm.$nextTick 替换掉 mounted

    mounted: function () {
    this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been rendered
    })
    }

    该钩子在服务器端渲染期间不被调用。

beforeUpdate

  • 类型:Function

  • 详细:

    数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。

    你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程。

    该钩子在服务器端渲染期间不被调用。

updated

  • 类型:Function

  • 详细:

    由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。

    当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态。如果要相应状态改变,通常最好使用计算属性或 watcher 取而代之。

    注意 updated不会承诺所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕,可以用 vm.$nextTick 替换掉 updated

    updated: function () {
    this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been re-rendered
    })
    }

    该钩子在服务器端渲染期间不被调用。

activated

  • 类型:Function

  • 详细:

    keep-alive 组件激活时调用。

    该钩子在服务器端渲染期间不被调用。

deactivated

  • 类型:Function

  • 详细:

    keep-alive 组件停用时调用。

    该钩子在服务器端渲染期间不被调用。

beforeDestroy

  • 类型:Function

  • 详细:

    实例销毁之前调用。在这一步,实例仍然完全可用。

    该钩子在服务器端渲染期间不被调用。

destroyed

  • 类型:Function

  • 详细:

    Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

    该钩子在服务器端渲染期间不被调用。

errorCaptured

2.5.0+ 新增

  • 类型:(err: Error, vm: Component, info: string) => ?boolean

  • 详细:

    当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

    你可以在此钩子中修改组件的状态。因此在模板或渲染函数中设置其它内容的短路条件非常重要,它可以防止当一个错误被捕获时该组件进入一个无限的渲染循环。

    错误传播规则

    • 默认情况下,如果全局的 config.errorHandler 被定义,所有的错误仍会发送它,因此这些错误仍让会向单一的分析服务的地方进行汇报。

    • 如果一个组件的继承或父级从属链路中存在多个 errorCaptured 钩子,则它们将会被相同的错误逐个唤起。

    • 如果此 errorCaptured 钩子自身抛出了一个错误,则这个新错误和原本被捕获的错误都会发送给全局的 config.errorHandler

    • 一个 errorCaptured 钩子能够返回 false 以阻止错误继续向上传播。本质上是说“这个错误已经被搞定了且应该被忽略”。它会阻止其它任何会被这个错误唤起的 errorCaptured 钩子和全局的 config.errorHandler

五.、$nextTick

这个问题可以说是最容易被忽略有最容易令人焦头烂额的了,先上案例:

<el-table
stripe
ref="multipleTable"
:data="vendorList"
tooltip-effect="dark"
style="width: 100%"
@select-all="selectAll"
@selection-change="handleSelectionChange">
<el-table-column type="selection">
</el-table-column>
<el-table-column prop="vendorNum" label="设备编号">
</el-table-column>
<el-table-column prop="vendorModelName" label="设备型号">
</el-table-column>
<el-table-column prop="nickName" label="点位昵称" show-overflow-tooltip>
</el-table-column>
<el-table-column label="当前版本"> </el-table-column>
</el-table>
现有以上这段代码,表格第一列是CheckBox,场景是在表格数据载入之前,和现有数据(vendorNum)比对,如果
vendorNum存在,在相应的CheckBox打上对号。实现的方法很简单,就是在请求回来数据之后调用这个函数:
//通过和请求到数据比较vendorId,设置相应状态为选中
setSelectedStatus(){
let temp = {};
this.selectedVendorList.vendorNumIds.forEach(item=>{
temp[item.num] = item;
this.multipleSelection.push({vendorNum:item.num,vendorId:item.id});
});
for(let i = 0, l = this.vendorList.length; i < l; i++){
let res = this.vendorList[i];
if(temp[res.vendorNum]){
this.$refs.multipleTable.toggleRowSelection(this.vendorList[i]);
}
}
},

这样做的结果是,相应的选项CheckBox是选中的状态,但渲染的结果是未选中。这就要用到VUE里的nextTick了。

Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 DOM 的更新。

$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后使用 $nextTick,则可以在回调中获取更新后的 DOM。

于是解决的方法如家下:

const list = await getVendorList(data);
if(list.status){
this.vendorList = list.data.items;
this.totalPage = list.data.totalCount;
}else{
this.$message({
type:"error",
message:"数据获取失败"
})
}
//保证在DOM更新之后进行数据比对
this.$nextTick(function(){
this.setSelectedStatus();
});

运行,一切OK!

六.Popover 弹出框

官方文档使用方法如下:

<el-popover  ref="popover1" placement="top-start" title="标题" width="200" trigger="hover" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"> </el-popover>

<el-button v-popover:popover1>hover 激活</el-button>

通常情况狂下这种用法中规中矩,没有任何问题,但是在表格中,尤其是需要渲染一个数组的数据时用这种方法就会产生一大堆报错,因为和ref和id一样,都是独一无二的。此时

需要用如下方法:

<el-table-column label="商品名称">
<template slot-scope="scope">
<el-popover
placement="right"
width="400"
trigger="hover">
<el-table :data="scope.row.groups">
<el-table-column width="150" label="商品">
<template slot-scope="scope1">
<span style="cursor: pointer;" @click="linkDetails(scope1.row)">{{scope1.row.goodsGroupName}}</span>
</template>
</el-table-column>
<el-table-column width="100" property="amount" label="数量"></el-table-column>
<el-table-column width="300" property="productPrice" label="价格"></el-table-column>
</el-table>
<span slot="reference" style="cursor: pointer;" @click="linkDetails(scope.row)">{{scope.row.goodsGroupName}}</span>
</el-popover>
</template>
</el-table-column>

将触发el-popover显示的内容放在el-popover组件中的插槽中,用一个reference的具名slot ,就可以解决这个问题。

vue及Eelement使用过程中遇到的一些问题的更多相关文章

  1. 在 Vue 结合 Axios 使用过程 中 post 方法,后台无法接受到数据问题

    关于在 vue 中 使用 axios 相关 bug 首先,我们来看下 axios 的 github 传送门 axios 然后我们再介绍下 axios 的作者的 github 传送门 Matt 最后,我 ...

  2. vue+webpack安装sass过程中遇到权限不够,直接删除node_modus文件夹重新安装,node_modus先取得管理员权限才能删

    vue vue-style-loader !css-loader错误 最近在学习vue框架,使用webpack打包vue项目,在执行npm run start的时候 出现如下错误: This depe ...

  3. 解决vue.js在编写过程中出现空格不规范报错的情况

    找到build文件夹下面的webpack.base.conf.js文件. 然后打开该文件,找到图下这段代码,把他注释掉. 注释掉之后,再进行子页面等编写的时候,空格不规范的情况下也不会再报错啦.因为这 ...

  4. vue环境搭建过程中,遇到的坑爹的问题

    1,在配置package.json下载node依赖包时,执行$cnpm install过程中,这个过程是比较漫长的,尤其的这种core i5配置的电脑,简直有点卡的人怀疑人生,后来动了下有消息输出,我 ...

  5. 解决vue数据渲染过程中的闪动问题

    关键代码 主要解决vue双大括号{{}}在数据渲染和加载过程中的闪动问题,而影响客服体验. html代码: <span class="tableTitle selftab" ...

  6. Vue使用过程中常见问题

    目录 一.vue监听不到state数组/json对象内的元素的值的变化,要手动通知触发 二.vue用splice删除多维数组元素导致视图更新失败情况 三.vue项目如何部署到php或者java环境的服 ...

  7. 添加谷歌拓展程序 vue.js devtools过程中的问题

    在用vue做项目过程中,需要用到vue.js devtools,在从github上面clone下来代码,然后再npm install ,过程报错,然后更新npm包也是会有问题,以下是install的问 ...

  8. Vue在ASP.NET MVC中的进行前后端的交互

    Vue在ASP.NET MVC中的进行前后端的交互 Preface: 由于最近在研究前端相关的技术,作为前端非常优秀的框架Vue,个人在学习的过程中遇到一些问题,网上相关资料有限,所以在这这里总结一下 ...

  9. vue生命周期在工作中的用法

    1.首先来官方服生命=周期的解释: beforeCreate():实例在内存中被创建出来,还没有初始化好data和methods属性. create():实例已经在内存中创建,已经初始化好data和m ...

随机推荐

  1. 一套简单的git版本控制代码

    对于博客来说,我还是直接实践比较好,理论过多,不方便以后的查看 废话不多,直接开干 功能需求: .公司需要将jenkins打包出来的压缩包通过git上传到git服务器 .而且通过版本控制上传的文件,即 ...

  2. 日志记录模块logging

    在python中,日志记录显示有两种方式,一种是保存在文件和打印屏幕上,一种保存在文件中. 第一种,直接保存在文件中. import logging #日志模块,方便记录日志 # 下面是配置日志记录格 ...

  3. 回调函数的原理及PHP实例

    背景:在最近的一个开发项目中,用户要先调用服务才能开始进行一系列的查询活动,想了好久,经同事提醒, 用回调函数即可解决该问题.在这里,对PHP下回调函数的原理及实现分别做一下讲解. 1 什么是回调 软 ...

  4. LeetCode算法题-Same Tree(Java实现)

    这是悦乐书的第162次更新,第164篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第21题(顺位题号是100).给定两个二叉树,编写一个函数来检查它们是否相同.如果两个二 ...

  5. 团队作业——Beta冲刺

    团队作业--Beta冲刺 经过紧张的Alpha阶段,很多组已经从完全不熟悉语言和环境,到现在能够实现初步的功能.下一阶段即将加快编码进度,完成系统功能.强化软件工程的体会.Beta阶段的冲刺时间为期5 ...

  6. Python 进程管理工具 Supervisor 使用教程

    Supervisor 是基于 Python 的进程管理工具,只能运行在 Unix-Like 的系统上,也就是无法运行在 Windows 上.Supervisor 官方版目前只能运行在 Python 2 ...

  7. echarts图表大小随着外部div大小变化

    jquery有resize()事件,但直接调用没有起作用,引入jquery.ba-resize.js文件就可以了. 例如: <div class="chart" > & ...

  8. call和apply;this;闭包

    对于这两个原生JS的方法,一直有点绕不过来,朦朦胧胧的感觉.现在详细梳理一下: 两者是基于继承的思想, obj.call(thisObj, arg1, arg2, ...); obj.apply(th ...

  9. SQLAlchemy 嵌套事务的解决方案

    sqlachemy 是python的orm框架,在使用一段时间后,我们通常会出现事务嵌套的情况,看到很多人写代码的时候,居然是session到处传递,这无疑是加大了代码之间的耦合度. 案例: def ...

  10. raise ValueError("Cannot convert {0!r} to Excel".format(value))

    I have hundreds of XML files that I need to extract two values from and ouput in an Excel or CSV fil ...