IT技术
IT技术
vue生命周期
1.什么是 vue 生命周期？有什么作用？ Vue 实例有⼀个完整的⽣命周期，也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载 等⼀系列过程，称这是Vue的⽣命周期。 各个生命周期作用 beforeCreate（创建前） ：组件实例被创建之初，组件的属性生效之前 created（创建后） ：组件实例已经完全创建，属性也绑定，但真实 dom 还没有生成，$el 还不可用 beforeMount（挂载前） ：在挂载开始之前被调用：相关的 re
阅读更多Vue中的keep-alive是什么意思？以及如何使用
一、keep-alive是什么？<keep-alive>是vue内置的一个组件，能在组件的切换的过程中将状态保留在内存中，防止重复渲染DOM 包裹动态组件的时候，会缓存不活动的组件实例，而不是销毁他们！<keep-alive>是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现在父组件中，作为标签使用 包裹在需要缓存的组件中 注意： 1. include 字符串/正则/数组。只有名称匹配的组件会缓存 2.exclude/字符串/正则/数组。任何名称匹配的组件都不会被缓
阅读更多vue中api统一管理
针对小型项目 无需管理的情况下 <script> import axios from 'axios'; export default { methods: { async request() { let data = {} try { // host指的是请求的域名，path指的是请求的路径， data是相关的参数和请求头配置 let res = await axios.post(`${host}${path}`,
阅读更多解决element的Table表格组件的高度自适应问题
解决element的Table表格组件的高度问题( height只能是数字或者字符串 ),实现height: calc(100vh - 200px) 的效果方式一：注：也可直接将el-table的height属性绑定为字符串：calc(100vh - 200px) 实现为同样的效果， 200 是顶部和底部导航以及部分自定义布局 ；例：（这里使用了rem，一样的道理） 方式二：通过在js中进行计算 j记录一个坑，一开始我想直接在css中进行计算高度，然和可以实现效果，但是会多出
阅读更多CSS中的flex布局
CSS中的flex布局 一.flex布局的基本概念 1.什么是flex布局 Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局，行内元素也可以通过 inline-flex 使属性值用 Flex 布局。 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"； 2.flex能解决什么问题
阅读更多50行代码用Vue实现可拖拽调节的分割布局
按住分割线调节比例 实现并不难，但是网上其他的文章实在是把简单的事情复杂化了 今天教大家的方法超级简洁！！！！只用50行代码！！ 当鼠标在分割线位置按下时 triggerDragging变量变为true 这时split-pane-wrapper的mousemove中判断triggerDragging 如果为true则改变leftOffset，pane-left的width就会随之改变 pane-trigger-con的width是固定的 而pane-right采用了弹性布局的flex:
阅读更多Webpack to Vite踩坑指北
前言 最近一直在看vite的源码（传送）,恰逢公司的项目使用的是webpack，正好借此机会做下迁移，并将该过程记录。当前项目使用webpack+vue2对比 这里挑选了一个比较复杂的路由页面，分别使用vite和webpack启动，记录从npm run start到页面加载的耗时 vite webpack 基础改造 package.json中新建指令 alias别名 和webpack一样，配置resolve.al
阅读更多Vue执行流程及渲染解析（一）
最近想对之前看过的vue一些较原理的一些东西进行总结，今天就谈谈vue实例创建到渲染的一个流程概述。说的不对希望可以补充评论。 相信绝大多数的前端小伙伴已记不清做了多少项目，写了多少代码了，每个人如同教科书般地写着Vue代码： // 入口文件中的常见代码 new Vue({ el: '#app', router: router, render: h => h(App) }) 大家是否有想过Vue内
阅读更多懒加载的实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&
阅读更多常用 api
钩子函数 before() ：在当前 describe 的第一个测试用例中仅调用一次 beforeEach() ：在当前 describe 下的每一个测试用例执行前都要先执行一次 afterEach() ：在当前 describe 下的每一个测试用例执行完都要先执行一次 after() ：在当前 describe 的最后一个测试用例中仅调用一次 若包含多级测试套件，那么父级套件、祖父级套件声明的 hook 函数会作用于所有子级套件的测试用例，孙子级套件的测试用例…以此类推 describe('父
阅读更多