打包后css、js和img路径错误
利用vuex-persistedstate插件实现vuex的数据持久化
将后台传过来的 json 数组里面的 name 换成 text
this.columns = JSON.parse(JSON.stringify(res.data.data.data).replace(/r_name/g,'text'))
// res.data.data.data 是需要替换的对象数组
// r_name 是替换前的
// text 是替换后的
点击选择器禁止键盘弹出
forbidKeyboard(){
document.activeElement.blur();
},
position:fixed;在android下无效怎么处理？
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
怎么让Chrome支持小于12px 的文字？
p{font-size:10px;-webkit-transform:scale(0.8);}
什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？
响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。
基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。
页面头部必须有meta声明的viewport。
<meta name=’viewport’ content=”width=device-width, initial-scale=1. maximum-scale=1,user-scalable=no”>
1px border 问题
对于老项目，有没有什么办法能兼容1px的尴尬问题了，个人认为伪类+transform是比较完美的方法了。原理是把原先元素的 border 去掉，然后利用 :before 或者 :after 重做 border ，并 transform 的 scale 缩小一半，原先的元素相对定位，新做的 border 绝对定位。
单条border样式设置：
.scale-1px{
position: relative;
border:none;
}
.scale-1px:after{
content: '';
position: absolute;
bottom: 0;
background: #000;
width: 100%;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
按需引入
图片懒加载
如何给spa中一个单独的组件设置背景色
给SPA的每个页面加title
main.js
router.beforeEach((to,from,next)=>{
// 为页面添加标题
if (to.meta.title) {
document.title = to.meta.title
}
next()
})
router.js 中给每个路由下添加一个meta 对象，内部加入 title。
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
function loadView(view) {
return () => import(/* webpackChunkName: "view-[request]" */ `@/components/${view}.vue`)
}
export default new Router({
mode: 'history',
base: 'view',
routes: [
{
path: '/',
name: 'HelloWorld',
component: loadView('HelloWorld'),
meta:{
index:2,
auth:true,
title:'用户中心'
}
},
{
path: '/addCarInfo',
name: 'AddCarInfo',
component: loadView('AddCarInfo'),
meta:{
index:3,
auth:true,
title:'绑定车辆信息'
}
},
]
})
class 内写三元运算符
<li :class="['carnum', item.plate_number.length == 8 ? 'carNumBgBlueGreen' : 'carNumBgBlue']">
<div>{{item.plate_number}}</div>
</li>
// carnum是无需判断，直接作用在 li 上面
// carNumBgBlueGreen 和 carNumBgBlue 直接使用 style 中的类名
替换对象数组内的键值key
columns = JSON.parse(JSON.stringify(res.data.data.data).replace(/r_name/g,'text'))
// res.data.data.data是被替换的对象，把 name 换成 text
对象数组查重方法
unique(arr){
let unique = {};
arr.forEach(function(item){
unique[JSON.stringify(item)]=item;//键名不会重复
})
arr = Object.keys(unique).map(function(u){
//Object.keys()返回对象的所有键值组成的数组，map方法是一个遍历方法，
//返回遍历结果组成的数组.将unique对象的键名还原成对象数组
return JSON.parse(u);
})
return arr;
}
Vue 路由的两种传参方式
路由嵌套，子路由传参
watch 的初始立即执行
观察和响应 Vue 实例上的数据变动。类似于某些数据的监听回调 ，每当监听的数据变化时都会执行回调进行后续操作。
但是当 watch 一个变量的时候，初始化时并不会执行，如下面的例子，你需要在 created 的时候手动调用一次。
created() {
this.getList();
},
watch: {
keyWord: 'getList',
}
上面这样的做法可以使用，但很麻烦，我们可以添加 immediate 属性，这样初始化的时候就会自动触发(不用再写 created 去调用了)，然后上面的代码就能简化为：
watch: {
keyWord: {
handler: 'getList',
immediate: true
}
}
watch 有三个参数
- handler：其值是一个回调函数。即监听到变化时应该执行的函数
- deep：其值是 true 或 false；确认是否深入监听。
- immediate：其值是 true 或 false，确认是否以当前的初始值执行 handler 的函数
监听组件的生命周期
比如有父组件 Parent 和子组件 Child，如果父组件监听到子组件挂载 mounted 就做一些逻辑处理，常规的写法可能如下：
// Parent.vue
<Child @mounted="doSomething"/>
// Child.vue
mounted() {
this.$emit("mounted");
}
此外，还有一种特别简单的方式，子组件不需要任何处理，只需要在父组件引用的时候通过@hook 来监听即可，代码如下：
<Child @hook:mounted="doSomething" />
<Child @hook:updated="doSomething" />
当然这里不仅仅是可以监听 mounted，其它的生命周期事件，例如：created，updated 等都可以。
路由参数变化组件不更新
同一path的页面跳转时路由参数变化，但是组件没有对应的更新。
原因：主要是因为获取参数写在了created或者mounted路由钩子函数中，路由参数变化的时候，这个生命周期不会重新执行。
解决方案1：watch监听路由
watch: {
// 方法1 //监听路由是否变化
'$route' (to, from) {
if(to.query.id !== from.query.id){
this.id = to.query.id;
this.init();//重新加载数据
}
}
}
//方法 2 设置路径变化时的处理函数
watch: {
'$route': {
handler: 'init',
immediate: true
}
}
解决方案2 ：为了实现这样的效果可以给router-view添加一个不同的key，这样即使是公用组件，只要url变化了，就一定会重新创建这个组件。
<router-view :key="$route.fullpath"></router-view>
不刷新页面添加路由参数
this.$router.push({ query: {...this.$route.query, name: val.name} })
