学习笔记

1. v-show指令的值可以是布尔值、属性名、函数名，如果使用函数来控制，无论函数内容是什么，只要最终返回的是布尔类型的true和false即可。

2. 表单元素的value属性的绑定值最好不要是父元素传递的值，即props里的属性。
   原因：避免直接更改prop，prop是单向绑定，不能更改数据，只能由父组件传输过来。每当父组件重新渲染时，该值会被重新覆盖,所以对value属性的值应该使用data或计算属性定义数据，再通过$emit等方法将值传递给父组件。

3. 路由缓存问题：通过watch监听路由变化解决问题

4. 封面图比例
   padding-bottom的值是百分比的话是 基于父元素宽度的百分比下内边距

<div class="coverImg">
    <div class="cover-img">
      <img src="" :alt="alt" />
    </div>
    <!-- 控制封面图高度 -->
    <div class="holder"></div>
  </div>
 
/*封面图占比*/
.coverImg {
  position: relative;
}
.cover-img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
  background-position: 50%;
  background-size: cover;
}
.cover-img img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.holder {
  width: 100%;
  position: relative;
  padding-bottom: 100%;
  background-repeat: no-repeat;
  background-size: cover;
}

5. 对列表内容进行筛选，可以在computed定义

data(){
	return {
		list:[
			{id:1,name:"zs"},
			{id:2,name:"ls"},
			{id:3,name:"zss"},
			{id:4,name:"zsl"},
		]
	}
}
computed:{
	// 第一种
	getFirstThreeList(){
		return this.list.filter((item,index) => index < 3)
	},
	// 第二种
	getFirstThreeList(){
		return this.list.slice(0,3)
	}

}

6. 在vue项目中使用$router.push()报错的解决方案：
   (可以点击这里蓝色字查看这篇文章的详细介绍~)
   解决vue在控制台的 NavigationDuplicated 报错

7. js判断对象是否为空对象obj的几种方法

var obj = {}
// 1、将json对象转化为json字符串
JSON.stringiy(obj) === '{}'
// 2、keys()返回数组
Object.keys(obj).length === 0
// 3、for循环
let flag = () => {
　　for(var key in obj) {
　　　　return false;　　
　　}
　　return true;
}
console.log(flag) // 输出true即代表obj为空
// 4、getOwnPropertyNames()返回数组
Object.getOwnPropertyNames(obj).length === 0

8. vuex-router-sync
   通过安装该插件可以将vue-router当前的$route同步为vuex存储状态的一部分。即可以通过store.state.route获取路由信息

 //安装： 
 npm i vuex-router-sync --save
 // 在 main.js 导入
 import { sync } from "vuex-router-sync";
 // 使用
 sync(store, router)
 // 可以选择设置自定义vuex模块名称
 sync(store, router, { moduleName: 'RouteModule' } )
 // 举例：在store.js里
 mutations:{
 	getRouteSrc(state) {
	    const path = state.route.from.path;
	},

 }

8. 【vue移动端页面】设计一个带返回按钮的头部导航，如果是首页，则没有返回按钮

// 头部导航 template部分
<div class="navigation flex flex-center flex-middle">
      <img v-if="isReturn" class="iconBack" src="@/assets/images/icon/icon-menu-back.png" alt="返回图标" @click="goBack()" />
      <div class="header">{{ currentTitle }}</div>
</div>
<div class="placeholder" ></div>
// 导航栏 style部分
.navigation{
  position: fixed;
  top: 0;
  width: 100%;
  height: 2.2rem;
  line-height: 2.2rem;
  z-index: 1000;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  .iconBack{
    position: absolute;
    left: 0.75rem;
    width: 1rem;
    height: 1rem;

  }
  .header{
    font-size: 0.75rem;
    font-weight: bold;
  }
}
.placeholder{
  width: 100%;
  height: 2.2rem;
}

// script部分
data(){
	return {
	  currentPath :"",
      isReturn: false, // 是否显示返回按钮
	}
}
methods:{
	 goBack: function() {
      this.$router.go(-1);
	},
	
}
 mounted(){
	 this.currentPath = this.$route.path;
      if (new RegExp(/^\/home/).test(this.currentPath)) {
        this.isReturn = false;
      } else {
        this.isReturn = true;
      }
},
watch:{
	$route(to,from){
		this.currentPath = to.path;
	      if (new RegExp(/^\/home/).test(this.currentPath)) {
	        this.isReturn = false;
	      } else {
	        this.isReturn = true;
	      }
	}
	
}

9. 前端缓存技术（其他博客）
   前端常用缓存技术

   前端缓存详解