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的项目，项目名称也不会变化，需要手动修改项目名称
-
项目文件右键 -> Refactor -> Rename
image.png
-
选择Rename project，点击OK, 进行修改即可
image.png
9.禁止鼠标双击选中文字
// css
user-select:none;
<!--html -->
<section onselectstart="return false;">这又是一段文字</section>
网友评论