工作上的一些记录

1. vue在data中引入静态图片路径

在data设置本地图片路径，无论相对路径还是绝对路径都无法显示
解决:

• 将图片放在项目的public文件夹里，正常引入即可
• 通过import的方法引入图片

静态背景图片设置

// 静态背景图片设置
data () {
  return {
    imgStyle: {
      backgroundImage: `url(${require('@/assets/images/xxx.png')})`
    }
  }
}

2. v-for key避免使用index作为标识

如果当index作为标识的时候，列表中插入一条数据，列表中插入地方的后面的index值都会变化，那么当前的v-for都会对key变化的element进行重新渲染，但是其实我们这是插入了一条数据，除了当前插入的数据，其他数据都没有变化，这就造成了没必要的开销。

3. vue动态设置宽度

<div :style="'width:' + width + 'px'"></div>

4. http code 304 重定向

第一次访问接口，返回的是200，当你第二次再访问该接口，数据没有变化，浏览器会自动识别返回你304，重定向你访问的资源，这样你访问的更快

5. 连接数组

this.list = […this.list, …rows]
this.list = this.list.concat(rows)

6. 监听路由变化

可以用作编辑页面后，返回页面后刷新页面操作

watch: {
    $route (to, from) {
      console.log(to)
   }
}

beforeRouteEnter (to, from, next) {
  // 在渲染该组件的对应路由被 confirm 前调用
  // 不！能！获取组件实例 `this`
  // 因为当钩子执行前，组件实例还没被创建
},
beforeRouteUpdate (to, from, next) {
  // 在当前路由改变，但是该组件被复用时调用
  // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
  // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
  // 可以访问组件实例 `this`
},
beforeRouteLeave (to, from, next) {
  // 导航离开该组件的对应路由时调用
  // 可以访问组件实例 `this`
}

7. 字符串与数组相互转换

// 字符串转数组

const a = 'a,b,c,d';
const newArry=a.split(‘,');
console.log(newArry);   // ["a", "b", "c", "d"]

// 数组转字符串

const array = ["a", "b", "c", "d"];
const s = array.join(',’);
console.log(s)  // "a,b,c,d"

8. webstorm修改项目名称

直接拷贝webstorn的项目，项目名称也不会变化，需要手动修改项目名称

1. 项目文件右键 -> Refactor -> Rename

   
   image.png

2. 选择Rename project，点击OK, 进行修改即可

   
   image.png

9.禁止鼠标双击选中文字

// css
user-select:none;

<!--html --> 
<section onselectstart="return false;">这又是一段文字</section>