忘れられたくない

忘れられたくない 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 个人简介什么都没有

个人动态

忘れられたくない 发布了文章 · 1月21日

隐藏IE、谷歌、火狐浏览器滚动条

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

赞 0 收藏 0 评论 0

忘れられたくない 发布了文章 · 1月15日

重绘和重排

  • 重排(重构/回流/Reflow):当渲染树的一部分必须更新并且节点的尺寸发生了变化,浏览器会使渲染树中受到影响的部分失效,并重新构造渲染树。
  • 重绘(Repaint):是在一个元素的外观被改变所触发的浏览器行为,浏览器会根据元素的新属性重新绘制,使元素呈现新的外观。比如改变某个元素的背景色、文字颜色、边框颜色等等
重排
  1. 元素宽度、高度改变
  2. 新增、删除可见dom元素
  3. 元素的位置改变
  4. 浏览器窗口尺寸改变
  5. 填充内容的改变,比如文本的改变或图片大小改变而引起的计算值宽度和高度的改变

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

赞 1 收藏 0 评论 0

忘れられたくない 发布了文章 · 1月15日

值类型和引用类型存在的位置

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

值类型数据的实际值存储在栈中
引用类型数据的实际值存储在堆中
  1. 值类型数据有:string、number、boolean、symbol(ES6新增)、null、undefined。
  2. 引用类型数据有:对象和函数。
查看原文

赞 0 收藏 0 评论 0

忘れられたくない 发布了文章 · 2020-12-31

css的那些事

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. 外部样式:单独写在一个页面被引用
查看原文

赞 1 收藏 0 评论 0

忘れられたくない 发布了文章 · 2020-12-30

css盒子模型

css盒子模型:content padding border margin

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

设置两种模型
IE:box-sizing:border-box
标准:box-sizing:content-box
查看原文

赞 0 收藏 0 评论 0

忘れられたくない 发布了文章 · 2020-12-30

实现已知或者未知高度div居中

//第一种方法
<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>
查看原文

赞 0 收藏 0 评论 0

忘れられたくない 发布了文章 · 2020-12-22

高度已知,三栏布局,左右宽度各300px,中间自适应

//第一种方法:浮动(块级格式独占一行)
<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布局依然可以实现
查看原文

赞 1 收藏 0 评论 0

忘れられたくない 发布了文章 · 2020-10-25

组件吸顶

主要是通过浏览器事件监听函数,判断距离顶部的高度,是否符合吸顶,利用动态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>
查看原文

赞 0 收藏 0 评论 0

忘れられたくない 发布了文章 · 2020-10-20

Vuex的使用

  1. 新建下列目录结构

image.png

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'])
}
查看原文

赞 2 收藏 0 评论 0

忘れられたくない 发布了文章 · 2020-10-12

VueCli4.0安装及项目框架的搭建

安装版本
npm install -g @vue/cli
yarn global add @vue/cli

vue --version 查看版本

如果出现下面情况
image.png

1、如果使用npm安装,使用命令npm root -g查看npm包的位置
2、如果使用yarn安装,使用命令yarn global dir查看yarn安装的位置
image.png
3、打开环境变量中的系统变量,找到path变量进行编辑添加
image.png


创建项目
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')
查看原文

赞 1 收藏 0 评论 0

认证与成就

  • 获得 28 次点赞
  • 获得 0 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 0 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2019-12-04
个人主页被 1.5k 人浏览