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

目录

 

解决浏览器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

问题：

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

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 兼容IE报错解决方案

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

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']     
    }
  }
}

报错如下：

修改的内容为：

 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单个元素绑定多个事件 例如点击绑定多个事件方法

文章：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

组件，不能和html标签重复

header组件，h5新标签重复

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

 

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

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

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

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

 

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

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

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

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

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

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