1. 关于数据更新机制

   （1）v-if 关闭组件的时候，会销毁数据，可以用于实现返回父组件关闭音频等媒体，如果只是界面的开关的话，用 v-show 即可

   （2）离开子组件后，父组件所传递的数据需要清空，切记不要在网络请求里做清空操作，因为网络请求是有延迟的，一般放在打开子组件的事件里执行清空操作

分页是一种比较常见的功能，分页的原理其实也很简单，首先要知道没有需要展示的项目数量 pageSize，然后还得知道当前所在的页数 currentPage, 设所有的 item 都在一个数组 array 里，每页需要展示 5 个 item，那么当 currentPage = 1 时，第一页要展示的所有 item 为 array.slice(0, 4), 第二页要展示的 item 为 array.slice(5, 9), 以此类推，那么第 n（n >= 0) 页需要展示的 item 应该为：array.slice(5n, 5n+4)，推而广之，基本数字的分页公式就出来了：

前几天有人问我给定一个这样的结构：div => div，如何让里面的元素水平垂直居中？给出 css2 代码。这对于一直用 css3 布局方式的我来说，一时还有点蒙蔽，只知道左右居中一般用 margin：0 auto，至于垂直居中，还真没用 css2 实现过。于是动手实践，发现以下的方式而已完美达到想要的效果。

centos7 安装 MySQL

这是一个一键生成响应式表格的方案。

table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  line-height: 40px;
  table-layout: fixed;
  color: #333;
  font-weight: normal;
  font-size: 14px;
  margin: 5% 0;
  td{
    padding: 10px;
  }
  thead {
    background-color: #cce5ff;
    font-weight: 500;
  }
}

table-bordered {
  border: 1px solid #e0e0e0;
}

.table-bordered {
  th {
    background: #e4efff;
    border: 1px solid #e0e0e0;
    font-weight: normal;
    height: auto;
  }
  td {
    background: #e4efff;
    border: 1px solid #e0e0e0;
    font-weight: normal;
    height: auto;
  }
  thead {
    th {
      border-bottom: 1px;
      font-weight: 500;
      height: auto;
    }
    td {
      border-bottom: 1px;
      font-weight: 500;
      height: auto;
    }
  }
}

1. 全屏是什么：

   个人理解，全屏指的是去掉浏览器的导航栏，浏览器的全部空间被页面所占有，网页即 html 文档，网页全屏即 dom 全屏

2. 不同的浏览器又不同的全屏事件可以调用，但是不同浏览器的全屏事件并不一致，因为还没被写入规范中，所以需要判断在特定的浏览器下，哪个事件可以用，以下是全屏事件的封装：

key 值在 vue 组件的作用

摘要：
本文主要实现了一下功能：1、图形验证码由验证码、干扰线、干扰点组合而成；2、验证码由数字和字母随机组合形成；3、每次切换验证码，验证码字体颜色和背景颜色变化

一、实现思路

1. 生成一个随机色，用于切换验证码时控制字体颜色和背景颜色

1. 删除按钮虚线框

   <!-- 火狐浏览器，去除按钮虚线框 -- > button::-moz-focus-inner, input[type='reset']::-moz-focus-inner, input[type='button']::-moz-focus-inner, input[type='submit']::-moz-focus-inner, input[type='file'] > input[type='button']::-moz-focus-inner { border: none; }

css 基础知识笔记，包括专业术语介绍、css 流概述等，具体内容可以查看全文