前端学习之路——随遇随学知识点，在不断完善的过程中

本文章旨在记录本人在遇到知识点时随遇随记，方便以后查看，如果发现本文记录有问题望及时指出，我也及时改正，方便自己的同时也能帮助他人

1.require.context的使用

require.context主要是实现在前端工程中引入其他文件是的使用
使用的方法为：require.context(param1,param2,param3)
此方法有三个参数
第一个参数是param1：为目标文件夹
第二个参数是param2：是否查找子集 true | false
第三个参数是param3：是正则匹配
下面举一个例子具体详解一下

require.context('@/views/modules/tpl-crud', true, /.js/)

此例子的意思就是访问此@/views/modules/tpl-crud目录下以.js结尾的文件

2 vue中混入(Mixin)

在我的理解中混入可以解决一个功能在多个地方使用时省去代码复制、粘贴。
官方文档的解释是：
混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
首先贴上自己的用法：



这里再总结一下官方文档的说法
1.选项合并
①当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。比如，数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。
②同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。
③值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。

3.vue中updated生命周期

updated生命周期的触发是咱们在data中定义的数据或者是父组件传来的数据发生变化并且在页面渲染完成后才触发的一个生命周期

4.js的事件委托

问题就是在咱们进行一些操作dom元素时，可能会遇到咱们要操作的元素是动态生成的，此时我们无法绑定点击事件，这个时候咱们就要用到事件的委托了。
下面就是一个基本的编写方式

$('#min-conter').on('click','.cont-ul',function(){
    //咱们 需要进行的一些流程
    //#min-conter 是咱们要操作的元素的父级元素的ID
    //click是咱们要进行的事件，这里就是点击事件，mouseover为鼠标移入事件，mouseout为鼠标移出事件
    //.cont-ul为咱们要操作的元素的class   	
})

这个就是一个基本的事件委托的使用方法了

5.元素的存值

目前我能想到的元素存值的办法就是使用.data()方法，如果大佬还有什么更好的办法还望指出，让我进步
开始我的办法是用data-src 等自定义存值办法但是这些值会直接展示在咱们的dom元素上这个时候看起来就会非常的杂乱，后来也是在网上找到.data()的办法
具体的用法就是

$('.advance').data('data',{'src':item.menuurl,'menuId':item.menuid});

这里也可以存对象，也可以存单个值
取值方法就是

src的值是  $('.advance').data('data').src

6.IE下使用ajax数据不是最新数据

在IE下使用ajax请求数据不是最新数据的原因是在IE浏览器下 如果使用的是get请求，第一次请求数据完成后，如果地址和参数不变得情况下，在第二次请求是会默认去读取缓存数据。
在post请求下不会发生此情况，因为浏览器认为post请求提交的内容会有变化，所以不会走缓存。
此时的解决办法是添加cache：false 属性

7.拷贝一份数据以备之后进行操作

var oldData = JSON.parse(JSON.stringify(需要保存的数据))

在需要的时候在进行合并

Object.assign(需要修改的数据,oldRowData)

8 .IE下表格不显示的问题

主要是在写表格时使用了flex：1的用法
只要在样式里面加上

-ms-flex: none !important