幽夜忧伤来袭-CSDN博客

原创学习typescript（1）

typescript的命令1、查看本机typescript版本，使用tsc -v2、查看本机typescript版本，可以使用npm view typescript version3、查看typescript所有可以使用的版本，npm view typescript versions4、如果想要查看typescript不同环境下的版本，可以使用npm info typescript查看测试版本、开发版本、最近版本、下一版本5、查看本地是否安装typescript，使用npm ls typescript6、全

2022-07-06 09:22:39 371 1

原创（还好吧）v-if和v-for的优先级

目录共同点：不同点：手段：编译过程：编译条件：性能消耗：使用场景：优先级：总结：共同点：都是动态显示DOM元素不同点：手段：v-if是通过控制dom节点的存在与否来控制元素的显隐；v-show是通过设置DOM元素的display样式，block为显示，none为隐藏；编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换；编译条件：v-if是惰

2022-03-01 19:12:11 331

原创 ECharts插件的基本使用

1. 使用npm下载组件库npm install echarts --save引入组件库

2022-02-24 19:29:35 789

原创（还不错）v-if与v-show的区别

区别相同点：都可以动态控制着dom元素的显示隐藏。不同点：显示隐藏：v-if: 控制DOM元素的显示隐藏，是将DOM元这个进行添加或者删除；v-show: 控制DOM 的显示隐藏是为DOM元素添加css的样式display，设置display的属性none(隐藏)或block(显示)，DOM元素还存在，只是被隐藏了。性能：v-if：因进行频繁切换时，性能消耗过高（对DOM元素进行添加火删除），在显示隐藏方面实...

2022-02-24 18:54:01 576

原创 vue的指令

1. v-model 多用于表单元素实现双向数据绑定；2. v-for 格式： v-for="（item,index) in/of 数组json" 循环数组或json；3. v-show 显示内容 ,通过display=block/none来控制元素隐藏出现；（v-show与v-if的区别，面试需要注意）略：4. v-hide 隐藏内容同上；5. v-if 显示与隐藏（dom元素的删除添加同angular中的ng-if 默认值为false）；6. v-else-if 必须和.

2022-02-24 18:44:47 89

原创 vue2和vue3的区别

目录1. 双向数据绑定的原理发生了改变2.vue3默认使用懒加载3.vue3中新添加了TypeScript以及PWA的支持4.重构VirtualDOM5.生命周期发生变化1. 双向数据绑定的原理发生了改变在vue3中使用proxy替换了vue2中的Object.defineProperty,vue2的双向数据绑定是利用ES5 的一个 APIObject.definePropert()对数据进行劫持结合发布订阅模式的方式来实现的。v...

2022-02-22 16:07:23 338

原创 vue修改数据页面不重新渲染

目录一、直接添加属性的问题二、原理分析三、解决方案Vue.set()Object.assign()$forceUpdate小结使用vue，遇到几次修改了对象的属性后，页面并不重新渲染一、直接添加属性的问题<template> <div> <p v-for="(value,key) in item" :key="key"> {{ value }} </p> <button @click="add

2022-02-17 16:30:32 341

原创 Vue中的$nextTick()

在下次DOM更新循环结束后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM。使用场景是：可以在created钩子函数中拿到dom节点无法获取的原因：vue的reader渲染函数是异步的，例如将变量修改，数据改变引起虚拟dom对比，如果立刻获取真实dom，无法获取，因为数据改变引起虚拟dom对比，立即获取真实dom是undefined，可以使用定时器、$nextTick使用场景：假如定义一个变量开关，修改开关变量让按钮和输入框来回切换，切换到input直接获取dom为其绑定自动

2022-02-17 16:23:12 616

原创项目优化，以及项目上线

目录实现步骤：项目优化：项目上线：1. 添加进度条2. 根据报错修改代码3. 执行npm run build（打包）4. 生成打包报告5. 修改webpack的默认配置6. 加载外部CDN7. 定制首页的内容8. 路由懒加载9. 项目上线通过node创建服务器开启gzip压缩配置https服务使用pm2管理应用实现步骤：项目优化：生成打包报告，根据报告优化项目第三方库启动，使用CDN Element-UI组件按需加载路

2022-02-17 15:44:18 294

原创 vue的slot插槽

目录什么时slot插槽？默认插槽：具名插槽：作用域插槽：总结：什么时slot插槽？插槽就是父组件往子组件中插入一些内容。有三种方式，默认插槽，具名插槽，作用域插槽默认插槽：默认插槽就是把父组件中的数据，显示在子组件中，子组件通过一个slot插槽标签显示父组件中的数据默认插槽指允许将自定义的组件像普通标签一样插入内容import Vue from 'vue'// 定义组件componentOne const compoentOne = {

2022-02-16 16:42:04 152

原创 vue中v-for使用key

什么是key？vue中列表v-for循环需要加上的一个属性，不加，系统就会提示报错，:key=“唯一标识” 唯一标识可以是item里面id（index）等，因为vue组件高度复用性，增加Key可以标识组件的唯一性，为了更好地区别各个组件 key的作用主要是为了高效的更新虚拟DOM。所以，key的作用主要是为了高效的更新虚拟DOM。另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果。比如：在我们使用

2022-02-16 16:26:58 8131

原创 vue中的keep-alive页面缓存

目录概念作用原理props生命周期函数 1. activated 2. deactivated常用的使用方法使用场景缓存所有页面根据条件缓存页面结合Router，缓存部分页面概念keep-alive 是Vue的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 transition 相似，keep-alive是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现在父组件链中；使用keep-alive包裹动态组件时，...

2022-02-15 18:52:26 1347

原创 vue中element-UI组件图片上传等的属性

1. 安装插件elementUI：npm i element-ui -S2. 在main.js中引入组件import Element from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'Vue.use(Element, { size: 'small' })3. 访问Element官网【组件–Upload上传】<el-upload action="https://jsonplaceholder

2022-02-14 21:10:46 393

原创 vue的data为什么是一个函数

1. 根实例对象data可以是对象也可以是函数（根实例是单例)，不会造成数据冲突问题2. 如果不是一个函数，而组件实例的data都是同一个引用数据，当该组件作为公共组件共享使用，如果它是一个对象，会报错，并且一个地方的data更改，所有的data一起改变，相反，如果data是一个函数，每个实例的data都在闭包中，就不会各自影响了。vue实例中的dataconst app = new Vue({ el:"#app", // 对象格式 data:{ ...

2022-02-14 07:38:58 754

原创 vue中的一些知识

v-model 多用于表单元素实现双向数据绑定v-for 格式： v-for="（item,index) in/of 数组json" 循环数组或jsonv-show 显示内容 ,通过display=block/none来控制元素隐藏出现v-hide 隐藏内容同上v-if 显示与隐藏（dom元素的删除添加同angular中的ng-if 默认值为false）v-else-if 必须和v-if连用v-else 必须和v-if连用不能单独使用否则报错模板编译错误v-bind

2022-01-26 20:44:25 1048

原创前端js基础知识

1. 作用域作用域就是一个变量可以使用的范围，主要分为全局作用域和函数作用域和块级作用域（es6新增）全局作用域：Js中最外层的作用域函数作用域：js通过函数创建的一个独立作用域，函数可以嵌套，所以作用域也可以嵌套块级作用域：Es6中新增，由大括号包裹，比如：if(){}, for(){} function等2. 自由变量与作用域链自由变量：在当前作用域被使用，但是没有被定义的变量，被称作自由变量作用域链：一个变量在当前作用域没有定义，但是被使用了，就会向上级作用域，一层一层依次

2022-01-21 09:06:16 1834

原创构造函数的原型，原型链，以及三角关系

构造函数的原型，原型链prototyoe: 每个构造函数里都有一个prototype属性，称为显示原型__proto__: 每个实例化对象都有一个__proto__属性，称为隐式原型constructor：每个prototype原型都有一个constructor属性，我们称它为构造函数原型链：每一个实例对象有一个__proto__属性，指向构造函数的原型对象，构造函的原型对象也是一个对象，也有__proto__属性，这样一层一层往上找，直到找到Object.prototype为止，就形成了原

2022-01-15 07:39:35 365

原创项目vue-cli4打包以及优化

一、vue项目的打包：可以执行一下代码，在vue-cli中自有打包指令，进行打包，但是为了打包后的大小考虑，还需要在项目的开始前以及结束后，进行相应的操作，对项目打包进行优化，是项目的所占体积变小npm run build //使用npm打包cnpm run build //使用cnpm打包yarn build //使用yarn打包二、项目开始前的配置：在项目根路径下创建vue.config.js文件，以修改webpack配置。1. 配置跨域使用vue-

2022-01-14 19:38:43 2521

原创 HTML5与css3的新特性

1. 什么是HTML5？万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改，作为HTML语言，具有新的元素、属性和行为。2. h5的新增特性：1. 语义化标签：header、footer、section、nav、aside、article2. 增强型表单：input 的多个 type3. 新增表单属性：placehoder、required、min 和 max4. 音频视频：audio、video5. canvas 画布6. 地理定位7.

2022-01-11 19:49:05 209

原创 link和@import的区别

目录1. 讲解：2. link3. @import4. 区别：5. link和@impor的详细区别 1. 从属关系 2. 加载顺序 3. 兼容性问题 4. DOM可控性 5. 权重问题（有争议）1. 讲解：页面中使用CSS的方式主要有3种：行内添加定义style属性值，页面头部内嵌调用和外面链接调用，其中外部引用有两种分别是：link和@import。2. link<link rel="stylesheet" rev="st...

2022-01-11 19:23:07 4026

原创 src和href的区别

目录1.href2. src3. src&&href的区别：1.hrefhref：是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。标识超文本引用，用在link和a等元素上，href是引用和页面关联，是在当前元素和引用资源之间建立联系<link href="common.css" rel="stylesheet"/>当浏览器解析到这一句的时候会识别该文档为css文件，会下载并且不会停止对当前文档的...

2022-01-11 19:07:09 10461 1

原创 CSS Hack

1.什么是CSS Hack？由于不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack!一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack。CSS Hack常见的有三..

2022-01-11 18:58:27 100

原创块级元素和行内元素，以及行内块元素

目录讲解：CSS中规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，比如div默认display属性值为“block”，成为“块级”元素；span默认display属性值为“inline”，是“行内”元素。1. 块级元素2. 行内元素3. 行内块级元素4. 显示模式的转换讲解：CSS中规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，比如div默认display属性值为“block”，成.

2022-01-11 18:46:51 1535

原创 vue路由导航的详细讲解

vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：1. 全局的,2. 单个路由独享的,3. 或者组件级的。1. 全局守卫 router.beforeEach当从一个路由跳转到另一个路由的时候触发此守卫，这个守卫也叫全局前置守卫，所以它是跳转前触发的。任何路由跳转都会触发。...

2022-01-11 16:06:52 1552

原创 html-设置导航栏Tab的左侧图标

2022-01-10 09:36:03 1101

原创 Flex 布局

一、Flex 布局是什么？Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。行内元素也可以使用 Flex 布局。注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目

2022-01-10 07:40:19 67

原创元素垂直水平居中(上下左右居中)

水平垂直居中已知高度和宽度的元素方案一：设置父元素为相对定位，给子元素设置绝对定位，top: 0; right: 0; bottom: 0; left: 0; margin: auto;<style> #father { width: 500px; height: 300px; background-color: skyblue; position: relative;} #so.

2022-01-07 19:23:22 109

原创 position定位属性

position的含义是指定位类型，取值类型可以有：static(没有定位)、relative(相对定位)、absolute(绝对定位)、fixed(固定定位)、inherit(继承)、sticky(黏性)这里sticky是CSS3新发布的一个属性。1. position: staticstatic(没有定位)是position的默认值，元素处于正常的文档流中，会忽略left、top、right、bottom和z-index属性。2. position: relativerelative(相

2022-01-07 19:06:15 560

原创 vuex的使用

一、vuex1. 什么是vuexVuex:是vue的状态管理工具，就是管理公共数据的，这个数据在任何组件都能使用。2. vuex的持久化数据安装插件cnpm i vuex-persist --save在store/index.js 中引入import vuexPersist from "vuex-persist"配置plugins:[newvuexPersist({ storage:window.localStorage, }).plugin,...

2022-01-07 07:37:53 75

原创什么是BFC？

1. BFC的定义BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。注意：BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。2. BFC的布局规则内部的Box会在垂直方向，一个接一个地放置。 Bo

2022-01-05 15:39:30 228

原创标准盒模型和怪异盒模型的讲解

目录1. 什么是盒子模型？2. 盒模型分为几种？3. 标准模型和怪异模型的转换4. JS盒模型5.盒模型的使用1. 什么是盒子模型？在HTML页面中，每一个元素都可以看作一个盒子。这个盒子由：内容（content）、内边距（padding）、边框（border）、外边距（margin）四部分组成。2. 盒模型分为几种？盒模型根据浏览器的不同，所使用的盒子模型也不一样。(IE使用的是怪异盒模型，但是在IE10以后，改用其他的了)盒模型分为两种：标准盒..

2022-01-05 15:22:51 1018

原创 JS原生点击返回顶部(可直接粘贴复制使用)

本章节为大家介绍如何通过 JS/CSS 实现网页返回顶部效果。JS代码：// 当网页向下滑动 20px 出现"返回顶部" 按钮window.onscroll = function() {scrollFunction()}; function scrollFunction() {console.log(121); if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {

2022-01-05 07:37:10 726

原创一篇文章，带你了解SVN

1. 什么是SVNSVN是subversion的缩写，是一个开放源代码的版本控制系统，通过采用分支管理系统的高效管理，简而言之就是用于多个人共同开发同一个项目，实现共享资源，实现最终集中式的管理SVN的官网：Home · TortoiseSVN2.SVN的优势1.存储SVN服务器既具有CVS所具有数据储存的优点，像是信息资源存储后会形成资源树结构，便于存储的同时，数据一般不会丢失，同时又拥有自己的特色。SVN是通过关系数据库及二进制的存储方式，同时解决了既往不能同时读写...

2022-01-03 19:29:31 1255

原创 rem的适配

1、rem是什么？rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。注意：rem是只相对于根元素htm的font-size，即只需要设置根元素的font-size，其它元素使用rem单位设置成相应的百分比即可。2. rem的适配方案Vant中的样式魔人使用是 px 作为单位。使用rem推荐使用一下两个插件：postcss-pxtorem是一款 postcss插件，用于将单位转化为 rem lib-f..

2021-12-31 11:20:28 1818

原创跨域的配置及讲解

首先在vue脚手架下创建vue.config.js文件插入代码// 进行修改默认的webpack配置module.exports = { devServer: { //开发环境的服务器配置 // 是否自动弹出浏览器，默认false open: false, // 修改默认端口，默认8080 // port: 9090, proxy: { //进行代理转发 '/api': {...

2021-12-30 19:59:52 1652

原创配置多环境变量

一个项目的产出过程1 客户拥有需求，并寻找公司制作2 公司接单，并交于产品经理制作原型图3 原型图制作完成后，与客户确认4 交于ui进行项目设计5 设计完成，前后端开始工作，制作页面与后台数据6 身为前端，如果一开始没有后台数据的情况下，可以使用json进行后台数据模拟7 最后，前后端共同调试，当然，一开始就有数据的情况下，前端在工作时就需调试完成8 项目完成，交于测试，改bug9 测试通过后上线，一个项目完成环境变量都有什么开发环境 development 使用.

2021-12-30 19:49:52 509

原创 git的命令

1.git使用前的信息配置在使用git前，需要告诉git你的信息，之后去使用git仓库。1. 配置提交人姓名：git config --global user.name 提交人姓名2. 配置提交人邮箱：git config --global user.email 提交人邮箱3. 查看git配置信息：gitconfig --list（分别查看 git config user.name || git config user.email...

2021-12-27 11:51:26 105

原创 git及其命令

目录1.Git的基础 1.1 什么是Git 1.2git的功能特性： 1.3Git的下载 1.4Git的基本工作流程 1.5git的基础命令1.6git的常用命令图标1.Git的基础 1.1 什么是Git Git是一个版本管理控制系统，它在任何的时间点，可以将文档的状态作为更新的记录保存起来，也可以将保存的记录回复回来。...

2021-12-25 12:00:07 413

空空如也

空空如也