//IE浏览器
    html,
    body,
    #app {
      -ms-overflow-style: none;
    }
    
    //谷歌、火狐
    ::-webkit-scrollbar {
      width: 0;
      height: 0;
      background-color: transparent;
    }

• 重排(重构/回流/Reflow)：当渲染树的一部分必须更新并且节点的尺寸发生了变化，浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。
• 重绘(Repaint)：是在一个元素的外观被改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。比如改变某个元素的背景色、文字颜色、边框颜色等等

重排

1. 元素宽度、高度改变
2. 新增、删除可见dom元素
3. 元素的位置改变
4. 浏览器窗口尺寸改变
5. 填充内容的改变，比如文本的改变或图片大小改变而引起的计算值宽度和高度的改变

如何避免触发回流和重绘

• 避免频繁使用 style，而是采用修改class的方式。
• 将动画效果应用到position属性为absolute或fixed的元素上。
• 也可以先为元素设置display: none，操作结束后再把它显示出来。因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘
• 使用createDocumentFragment进行批量的 DOM 操作。
• 对于 resize、scroll 等进行防抖/节流处理。
• 避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来。
• 利用 CSS3 的transform、opacity、filter这些属性可以实现合成的效果，也就是GPU加速。

“栈”其实就是一种后入先出（LIFO）的数据结构，栈的存储量比较小，但是速度快

值类型数据的实际值存储在栈中
引用类型数据的实际值存储在堆中

1. 值类型数据有:string、number、boolean、symbol（ES6新增）、null、undefined。
2. 引用类型数据有:对象和函数。

position定位

position:absolute;绝对定位，容易脱离文本流，不占用空间
position:relative;相对定位，不脱离文本流，占用空间

display:none和visibility:hidden的区别

共同点：都可以隐藏元素
不同点：display:none不占据文档的空间；visibility:hidden占用文本空间

v-show和v-if的区别

相同点：都可以隐藏元素
不同点：v-show占用空间，v-if不占用空间
注：如果要频繁切换某节点,使⽤v-show

行内元素、块级元素以及空元素

• 行内元素

span, a ,b(加粗),i/em/var/cite/dfn/address(斜体),u(下划线),strong(粗体),s/strike(删除线),big,small,sub(下标),sup(上标),font

• 块级元素（独占一行）

p,div,ol,ul,br,table,dl,h1-h6,li

• 空元素（没有内容的html元素）

br,meta,hr,link,input,img

css优先级

!important>id选择器>class选择器>标签选择器

选择器种类

• id选择器：#myId
• 类(class)选择器：.myClassName
• 标签选择器：div,p,h1
• 相邻（兄弟）选择器：h1+p
• 子选择器： ul>li
• 后代选择器：li a
• 通配符选择器：*
• 属性选择器：a[ref="external"]
• 伪类选择器：a:hover,li:nth-child,div:after

div文本超出显示省略符

//单行限制
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
//多行限制
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3;
overflow:hidden;
//长文本换行
word-break:break-all;

css三种引用方式

1. 行间样式：通过style属性将样式写在标签中
2. 内部样式：写在本页面
3. 外部样式：单独写在一个页面被引用

css盒子模型：content padding border margin

标准盒子模型高度为content高度
IE盒子模型高度为content+padding+border

设置两种模型

IE：box-sizing:border-box
标准：box-sizing:content-box

//第一种方法
<div class="box1">
    <div class="inner"></div>
</div>
<style>
    .box1{
      position:relative;
      height:100vh;
    }
    .inner{
      position:absolute;
      top:50%;
      left:50%;
      margin-top:-50px;
      margin-left:-50px;
      height:100px;
      width:100px;
      background: red;
    }
</style>

//第二种方法
<div class="box2">
    <div class="inner">2</div>
</div>
<style>
    .box2{
      position:relative;
      height:100vh;
    }
    .inner{
      position:absolute;
      left:50%;
      top:50%;
      background: red;
      transform: translate(-50%,-50%);
    }
</style>

//第三种方法
<div class="box3">
    <div class="inner">3</div>
</div>
<style>
   .box3{
      position:relative;
      height: 100px;
      background-color: antiquewhite;
    }
    .inner{
      position:absolute;
      width:100px;
      height:50px;
      top:0;
      left:0;
      right:0;
      bottom: 0;
      margin:auto;
      background: rebeccapurple;
    }
</style>

//第四种方法
<style>
<div class="box4">
    <div class="inner">4</div>
 </div>
.box4{
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

//第五种方法
<div class="box5">
    <div class="inner">5.1</div>
    <div class="inner">5.2</div>
</div>
<style>
.box5{
  display: table;
  width:100%;
}
.inner{
  display: table-cell;
}
</style>

//第一种方法：浮动(块级格式独占一行)
<div class="wrapper_float">
    <div class="float_left">1</div>
    <div class="float_center">2</div> 
    <div class="float_right">3</div>
</div>
<style>
    .wrapper_float{
      height:100px;
      width:100%;
    }
    .wrapper_float .float_left{
      width:300px;
      float:left;
      background: red;
      height:100%;
    }
    .wrapper_float .float_center{
      width:300px;
      float:right;
      background: blue;
      height:100%;
    }
    .wrapper_float .float_right{
      background: beige;
      height:100%;
    }
 </style>

//第二种方法：绝对定位
<div class="wrapper_absolute">
    <div class="absolute_left">1</div>
    <div class="absolute_center">2</div>
    <div class="absolute_right">3</div>
</div>
<style>
    .wrapper_absolute{
      height:100px;
      position:relative;
    }
    .absolute_left{
      position:absolute;
      left:0;
      width:300px;
    }
    .absolute_right{
      position:absolute;
      right:0;
      width:300px;
    }
    .absolute_center{
      position:absolute;
      left:300px;
      right:300px;
    }
</style>

//第三种方法：flex布局
<div class="wrapper_flex">
    <div class="flex_left">1</div>
    <div class="flex_center">2</div>
    <div class="flex_right">3</div>
</div>
<style>
    .wrapper_flex{
      display:flex;
      height:100px;
    }
    .flex_left, .flex_right{
      width:300px
    }
    .flex_center{
      flex:1
    }
 </style>

//第四种方法：table
<div class="wrapper_table">
    <div class="table_left">1</div>
    <div class="table_center">2</div>
    <div class="table_right">3</div>
</div>
<style>
    .wrapper_table{
      display: table;
      height:100px;
      width:100%;
    }
    .table_left,.table_right{
      width:300px;
      display: table-cell;
      background-color: aliceblue;
    }
    .table_center{
      display: table-cell;
    }
</style>

//第五种方法：grid
<div class="wrapper_grid">
    <div class="grid_left">1</div>
    <div class="grid_center">2</div>
    <div class="grid_right">3</div>
</div>
<style>
    .wrapper_grid{
      display:grid;
      width:100%;
      grid-template-rows:100px;
      grid-template-columns:300px auto 300px;
    }
</style>

优缺点：
浮动：兼容性好，易脱离文本流
绝对定位：快捷，有效性差
flex布局：解决上述两个问题
table表格布局：兼容性好，单个模块高度增高的时候，其他模块的高度也随着增高
网格布局：减少代码量

高度不固定时，flex布局，table布局依然可以实现

主要是通过浏览器事件监听函数，判断距离顶部的高度，是否符合吸顶，利用动态class属性设置样式~

window.pageYOffset：距离顶部偏移量
document.documentElement.scrollTop：谷歌浏览器获取滚动条距离顶部的位置
document.body.scrollTop：ie浏览器获取滚动条距离顶部的位置

<template>
  <div class="wrapper">
    <div class="nav-bar" :class="{'is_fixed':isFixed}">  
        这是内容
    </div>
    <div class="scroll">
        这是滚动内容
    </div>
  </div>
</template>
<script>
  export default{
    name:'nav-var',
    data(){
      return{
        isFixed:false
      }
    },
    mounted(){
      window.addEventListener('scroll',this.initHeight)
    },
    methods:{
      initHeight(){
        let scollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        this.isFixed = scollTop > 152 ? true : false;
      }
    },
    destroyed(){
        window.removeEventListener('scroll',this.initHeight,false)
    }
  }
</script>
<style lang="scss">
.wrapper{
    .nav-bar{
      height:70px;
      line-height: 70px;
      border-top:1px solid gray;
      background: #ffffff;
      &.is_fixed{
        position: fixed;
        top:0;
        width:100%;
        box-shadow: 0 5px 5px #cccccc;
      }
    }
    .scroll{
        height:500px;
    }
}
</style>

1. 新建下列目录结构

index.js文件

import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import actions from './action'
Vue.use(Vuex);

const state = {
  username: '',//登录用户名
}
export default new Vuex.Store({
  state,
  mutations,
  actions
})

actions.js文件

/**  * 商城Vuex-actions*/

export default {
  saveUserName(context,username){
    context.commit('saveUserName', username)
  }
}

mutations.js文件

/** 
 * 商城Vuex-mutations
*/

export default{
  saveUserName(state, username) {
    state.username = username;
  }
}

在main.js中引入

import store from './store'
new Vue({
  store,
  render: h => h(App),
}).$mount('#app')

存储

//第一种方法
let username = 'jack'
this.$store.dispatch('saveUserName',username)
//第二种方法
import {mapActions} from 'vuex'
methods:{
    ...mapActions(['saveUserName']),
    setName(){
        let username = 'jack'
        this.saveUserName(username);
    }
}

获取

//第一种方法
computed:{
    username(){
        return this.$store.state.username
    }
}
//第二种方法
import { mapState } from 'vuex'
computed:{
    ...mapState(['username'])
}

安装版本

npm install -g @vue/cli
yarn global add @vue/cli

vue --version 查看版本

如果出现下面情况

1、如果使用npm安装，使用命令npm root -g查看npm包的位置
2、如果使用yarn安装，使用命令yarn global dir查看yarn安装的位置

3、打开环境变量中的系统变量，找到path变量进行编辑添加

创建项目

vue create mall //（创建名称为mall的项目）
cd mall
yarn add axios
yarn add vue-router
yarn add vuex

在main.js文件中添加

import axios from 'axios'
import VueRouter from 'vue-router'
import router from './router.js'
import Vuex from 'vuex'

Vue.prototype.$axios = axios;
Vue.use(VueRouter)
Vue.use(Vuex)
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

新建与main.js同级文件router.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from './pages/home.vue'

Vue.use(Router);

export default new Router({
  routes:[
    {
      path:'/',
      name:'home',
      component:Home,
      redirect:'/index',
      children:[
        {
          path: 'index',
          name: 'index',
          component: Index,
        }
      ]
    }
  ]
})

安装vue-devtools拓展工具
vue-devtools官网点击打开，下载master上的代码解压进入此目录执行命令
npm install
npm run build
再通过浏览器的扩展程序进行加载shell/chrome

跨域方案

1、通过CORS进行跨域（后端修改）
2、通过jsonp进行跨域

import jsonp from 'jsonp'
jsonp('https://www.imooc.com/common/adver-getadver',(err,res)=>{
  console.log(res)
})

3、接口代理-通过修改nginx服务器配置来实现

jsonp('/api/activity/servicetime',(err,res)=>{
  console.log(res)
})

新建vue.config.js文件，与package.json同级

module.exports = {
  devServer:{
    host:"localhost",
    port:8080,
    proxy:{//事件代理
      '/api':{
        target:'https://www.imooc.com',
        changeOrigin:true,
        pathRewrite:{
          '/api':''
        }
      }
    }
  }
}

插件安装

//安装图片懒加载、element-ui、sass、轮播
yarn add vue-lazyload element-ui node-sass sass-loader vue-awesome-swiper vue-axios vue-cookie

storage封装

1. storage本身有api，但是只是简单的key/value形式
2. storage只存储字符串，需要手工转化成json对象
3. storage只能一次性清空，不能单个清空

/**
 * Storage封装
 */
 
const STORAGE_KEY = 'mall';

export default {
  // 存储值
  setItem(key, value, module_name) {
    if (module_name) {
      let val = this.getItem(module_name);
      val[key] = value;
      this.setItem(module_name, val);
    } else {
      let val = this.getStorage();
      val[key] = value;
      window.sessionStorage.setItem(STORAGE_KEY, JSON.stringify(val));
    }
  },
  // 获取某一个模块下面的属性user下面的userName
  getItem(key, module_name) {
    if (module_name) {
      let val = this.getItem(module_name);
      if (val) return val[key];
    }
    return this.getStorage()[key];
  },
  getStorage() {
    return JSON.parse(window.sessionStorage.getItem(STORAGE_KEY) || '{}');
  },
  clear(key, module_name) {
    let val = this.getStorage();
    if (module_name) {
      if (!val[module_name]) return;
      delete val[module_name][key];
    } else {
      delete val[key];
    }
    window.sessionStorage.setItem(STORAGE_KEY, JSON.stringify(val));
  }
}

接口错误拦截

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
import VueRouter from 'vue-router'
import Vuex from 'vuex'
import router from './router.js'

//根据前端的跨域方式做调整
axios.defaults.baseURL = '/api';
axios.defaults.timeout = 8000;
//接口错误拦截
axios.interceptors.response.use(function (response){
  let res = response.data;
  if(res.status == 0){//接口成功返回的状态值为 0
    return res.data
  }else if(res.status == 10){//未登录接口返回的状态值为 10
    window.location.href = '/#/login'
  }else{
    alert(res.msg);
  }
})

Vue.config.productionTip = false


Vue.use(VueRouter)
Vue.use(Vuex)
Vue.use(VueAxios, axios)

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')