前端工作过程遇到的问题总结(七)

淡淡的烟草味﹌ 2021-12-17 12:09 337阅读 0赞

**目录**

解决浏览器Chrome net::ERR\_BLOCKED\_BY\_CLIENT

JavaScript对象与JSON字符串的相互转换

vue 引入iview3.x使用less更换主题的过程报错解决

详解vue 兼容IE报错解决方案

vue v-for src 图片路径问题 404

vue-element-admin兼容IE解决

vue单个元素绑定多个事件 例如点击绑定多个事件方法

vue报错 Do not use built-in or reserved HTML elements as component id:header

js去掉浏览器右键点击默认事件

vue中点击空白处隐藏div的实现

关于JSON.parse(JSON.stringify(obj))实现深拷贝应该注意的坑

--------------------

### 解决浏览器Chrome net::ERR\_BLOCKED\_BY\_CLIENT ###

文章：[解决浏览器Chrome net::ERR\_BLOCKED\_BY\_CLIENT][Chrome net_ERR_BLOCKED_BY_CLIENT]

问题：

开发的公司内部后台应用页面显示异常，获取不到资源

F12 提示 net::ERR\_BLOCKED\_BY\_CLIENT

很困惑，用Chrome打开页面就异常，IE什么的就没问题…

原因：广告拦截插件（我这儿是Adblock Plus，也可能是其他插件…全家桶系列什么的…）

解决：把域名添加到白名单

### JavaScript对象与JSON字符串的相互转换 ###

*  JSON.parse()

使用 JSON.parse() 方法将数据转换为 JavaScript 对象。

JSON.parse(text[, reviver])

**参数说明：**

*  **text:**必需， 一个有效的 JSON 字符串。
 *  **reviver:** 可选，一个转换结果的函数， 将为对象的每个成员调用此函数。

--------------------

*  JSON.stringify()

使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。

JSON.stringify(value[, replacer[, space]])

**参数说明：**

*  **value:**
    
    必需， 要转换的 JavaScript 值（通常为对象或数组）。
 *  **replacer:**
    
    可选。用于转换结果的函数或数组。
    
    如果 replacer 为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串：""。
    
    如果 replacer 是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。当 value 参数也为数组时，将忽略 replacer 数组。
 *  **space:**
    
    可选，文本添加缩进、空格和换行符，如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格，如果 space 大于 10，则文本缩进 10 个空格。space 也可以使用非数字，如：\\t。

### vue 引入iview3.x使用less更换主题的过程报错解决 ###

[vue 引入iview3.x使用less更换主题的过程报错解决][vue _iview3.x_less]

### 详解vue 兼容IE报错解决方案 ###

[详解vue 兼容IE报错解决方案][vue _IE]

### vue v-for src 图片路径问题 404 ###

文章：[vue v-for src 图片路径问题 404][vue v-for src _ 404]

图片添加src时：

*  第一种

<img v-for='url in imgurl' :src='url' />
    
    export default {
      data(){
        return{
          imgurl:['../assets/img/icon1.png' ,'../assets/img/icon2.png']     
        }
      }
    }

报错如下：

![861122-20171019113308365-212578501.png][]

修改的内容为：

imgurl:['../assets/img/icon1.png' , '../assets/img/icon2.png']

修改之后的代码：

imgurl:[require('../assets/img/icon1.png') ,require('../assets/img/icon2.png')]

*  第二种

当我们需要在js代码里面写图片路径的时候，如果我们在data里面写

/*错误写法*/
    imgUrl:'../assets/logo.png'

此时webpack只会把它当做字符串处理从而找不到图片地址，此时我们可以使用import引入图片路径：

<img :src="avatar" />
    import avatar from '@/assets/logo.png'

在data中定义：

avatar: avatar

*  第三种

我们也可以把图片放在外层的static文件夹里面，然后在data里面定义：

imgUrl ： '../../static/logo.png'
    <img :src="imgUrl" />

### vue-element-admin兼容IE解决 ###

[vue-element-admin兼容IE解决][vue-element-admin_IE]

### vue单个元素绑定多个事件 例如点击绑定多个事件方法 ###

文章：[vue单个元素绑定多个事件 例如点击绑定多个事件方法][vue_]

比如 @click=“one();two()”  
注意: 方法名后加 () => 调用方法 多个方法用 ; 隔开

### vue报错 Do not use built-in or reserved HTML elements as component id:header ###

文章：[vue报错 Do not use built-in or reserved HTML elements as component id:header][vue_ Do not use built-in or reserved HTML elements as component id_header]

组件，不能和html标签重复

header组件，h5新标签重复

Do not use built-in or reserved HTML elements as component id:header

![1066030-20170623095434570-1008783404.png][]

由于在模板需要插入到 DOM 中，所以模板中的标签名必须能够被 DOM 正确地解析。主要有三种情况：

一是完全不合法的标签名，例如 </>；

二是与 HTML 元素重名会产生不确定的行为，例如使用 input 做组件名不会解析到自定义组件，使用 button 在 Chrome 上正常但在 IE 上不正常；

三是与 Vue 保留的 slot、partial、component 重名，因为会优先以本身的意义解析，从而产生非预期的结果。

### **js去掉浏览器右键点击默认事件** ###

[js去掉浏览器右键点击默认事件][js]

### vue中点击空白处隐藏div的实现 ###

[vue中点击空白处隐藏div的实现][vue_div]

### 关于JSON.parse(JSON.stringify(obj))实现深拷贝应该注意的坑 ###

[关于JSON.parse(JSON.stringify(obj))实现深拷贝应该注意的坑][JSON.parse_JSON.stringify_obj]

[Chrome net_ERR_BLOCKED_BY_CLIENT]: https://www.cnblogs.com/niceboat/p/6134405.html
[vue _iview3.x_less]: https://blog.csdn.net/shaomingfly/article/details/84564858
[vue _IE]: https://www.jb51.net/article/153757.htm
[vue v-for src _ 404]: https://blog.csdn.net/abcde158308/article/details/80015375
[861122-20171019113308365-212578501.png]: /images/20211213/c0da8ebff6964ab79f1fafdaa5e6f349.png
[vue-element-admin_IE]: https://www.jianshu.com/p/527b60ab6d6f
[vue_]: https://blog.csdn.net/meikaied/article/details/86578453
[vue_ Do not use built-in or reserved HTML elements as component id_header]: https://www.cnblogs.com/qingqingzou-143/p/7068514.html
[1066030-20170623095434570-1008783404.png]: /images/20211213/8fbc8fd09b2f47cabec8e2aab8ada19c.png
[js]: https://www.cnblogs.com/rachelch/p/8135883.html
[vue_div]: https://www.jianshu.com/p/7409bee595a5
[JSON.parse_JSON.stringify_obj]: https://www.jianshu.com/p/b084dfaad501