- 博客(181)
- 收藏
- 关注
RSS订阅原创 vue3笔记10之“provide 与 inject“祖与后代组件间通信
作用：实现祖与后代组件间通信 父传子套路：父组件有一个 provide 选项来提供数据，后代组件有一个 inject 选项来开始使用这些数据祖组件中：后代组件中：
2022-06-15 13:40:18
197
原创 vue3笔记8之“toRaw 与 markRaw“
一、其它 Composition APItoRaw 与 markRawtoRaw作用：将一个由reactive生成的响应式对象转为普通对象。使用场景：用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面更新。markRaw作用：标记一个对象，使其永远不会再成为响应式对象。应用场景:有些值不应被设置为响应式的，例如复杂的第三方类库等。当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能。...
2022-06-15 13:39:03
163
原创 vue3笔记7之“readonly 与 shallowReadonly“
一、其它 Composition APIreadonly: 让一个响应式数据变为只读的（深只读）。shallowReadonly：让一个响应式数据变为只读的（浅只读）。应用场景: 不希望数据被修改时。
2022-06-15 13:38:19
145
原创 vue3笔记6之“toRef、shallowReactive 与 shallowRef浅响应式“
作用：创建一个 ref 对象，其value值指向另一个对象中的某个属性。语法：const name = toRef(person,'name')应用: 要将响应式对象中的某个属性单独提供给外部html使用时。扩展：toRefs与toRef功能一致，但可以批量创建多个 ref 对象，语法：toRefs(person)shallowReactive：只处理对象最外层属性的响应式（浅响应式）。shallowRef：只处理基本数据类型的响应式, 不进行对象的响应式处理。什么时候使用?如果有一个对象数据，结构比
2022-06-15 13:37:40
208
原创 vue3笔记5之“生命周期、复用的hook”
一、生命周期Vue3.0中可以继续使用Vue2.x中的生命周期钩子，但有有两个被更名：beforeDestroy改名为 beforeUnmount销毁之前-在事件里面的所有对数据的更改，都不会对数据进行更新（一般，关闭定时器，取消订阅消息、解绑自定义事件等收尾操作）destroyed改名为 unmounted 销毁之后-没什么用，被忽略2.可以直接已配置项的形式使用生命周期钩子，也可以使用组合式API的形式使用，尽量统一一般来说，组合式API里的钩子会比配置项的钩子先执行，组合式API的钩子名字有变化Vu
2022-06-15 13:37:07
1114
原创 vue3笔记4之“计算属性、监听、watchEffect“
一、计算属性与监视1.计算属性：与Vue2.x中computed配置功能一致写法：2.watch函数与Vue2.x中watch配置功能一致两个小“坑”：监视reactive定义的响应式数据时：oldValue无法正确获取、强制开启了深度监视（deep配置失效）。监视reactive定义的响应式数据中某个属性时：deep配置有效。情况一：监视ref定义的响应式数据如果用ref定义了一个对象或者这样情况二：监视多个ref定义的响应式数据情况三：监视reactive定义的响应式数据若
2022-06-15 13:36:36
155
原创 vue3笔记2之“组合函数、setup的2个注意点、reactive和ref3个区别”
一、Composition API1.组合式 API在Vue2中，我们使用的是Options API ，配置项式的API，我们要创建一个Vue实例，然后在里面传入一个配置对象，里面要写data、methods、watch等的东西，而Vue3提出了全新的 Composition API，组合式API，我们不用直接创建Vue实例，而是创建一个app，然后按需引入需要的API，来进行使用...2.Options API 存在的问题使用传统Options API（配置式API）中，新增或者修改一个需求，就需要分别在
2022-06-15 13:35:28
432
原创 vue3笔记1之‘优势、创建、新特性、目录结构’
一、vue3的优势性能的提升打包大小减少41%初次渲染快55%, 更新渲染快133%内存减少54%2.源码的升级使用Proxy代替defineProperty实现响应式重写虚拟DOM的实现和Tree-Shaking3.拥抱TypeScriptVue3可以更好的支持TypeScript二、新的特性1.Composition API（组合API）setup配置ref与reactivewatch与watchEffectprovide与 inject2.新的内置组件FragmentTeleportSuspense3
2022-06-15 13:35:00
132
原创 5.BI可视化编辑器之“控制面板项“实现
一、布局1.新增组件style-sider.vue2.组件的放置位置,样式第一章有 二、思路1.首先要配置好、组件名称、组件的类型、和组件的样式3.首先要传给子组件的东西，有2个，’获取当前点击的图层‘和’获取当前点击的图层的样式配置‘这边的图层的样式配置数据在第一章有，这边提供一部分config.jsdefault.js style-form-config.js4.因为传的是需要单向数据绑定的，所以这边要使用计算属性去绑5.然后通过遍历"图层的样式配置数据"去
2022-06-13 00:00:00
342
原创 4.BI可视化编辑器之右击菜单的“上移、下移、删除“实现
一、思路1.先找到当前选中的项，+1上移动，然后去找数组中上一个，让上一个，往下移，当前的去+12.下移同理3.删除，过滤掉当前选中的项就可以了二、实现代码三、全部代码四、效果展示
2022-06-12 21:37:14
576
原创 3.BI可视化编辑器之右击菜单的“置顶、置底“实现
一、思路1.每次push到list数组的时候，新增一个z用来管理图层的叠放，z应该有个默认值0，如果有z值去多个z值中比较获取最大的，这样拖拽的时候，会是最高层级的的2.样式的话z-index因为我们用的依赖，所以直接赋值就可以了二、置顶和置底1.首先右击的时候获取当前图层的焦点传一个item过来，然后设置一个focused状态，遍历list中的id,跟当前点击的id是否一样，一样就true,否则为flase2.先找到数组中被选中的项，通过list中多个z值比较，最大最小，从而实现置底和置顶三、全部代
2022-06-12 21:26:37
1679
原创 2.BI可视化编辑器之“右击菜单“实现
一、引入依赖二、使用三、打开于关闭事件1. 写入的ref要有2. this.$refs.contextMenu.close()//关闭右键菜单this.$refs.contextMenu.open(e);//打开右键菜单3.我们封装打开菜单的方法塞给画布中显示的图层，这样右击就可以出现菜单四、代码......
2022-06-12 20:48:25
268
原创 1.BI可视化编辑器之“拖动、移动 、放置、图层放大缩小“实现
一、拖拉拽widget-list.vue 1.拖的实现： draggable="true" H5给了一个属性可以拖拽，要配合2.放置的实现@dragover.prevent @drop="onDrop"App.vue 3.放置位置差计算图图解 4.静态资源管理4-1.constants下的config.js-组件列表的配置项 4-2.constants下的default.js-组件列表的配置项的默认样式4-3.constants下的style-form-config.js-组
2022-06-12 17:59:14
1233
原创 前端常用方法之“js一些常用的简写方式”
原： data:this.value.map((item)=>{return item.name}),简写：this.value.map(item=>item.name)当箭头函数的函数体只有一个 `return` 语句时，可以省略 `return` 关键字和方法体的花括号总结一下，如果箭头函数中只有一句return，那么可以同时省略大括号与return；但如果使用了大括号，即使只有一句表达式，也必须有return。...
2022-05-31 18:20:38
1391
原创 前端常用方法之“array.map()”迭代
一、定义和注意点map()方法定义在JavaScript的Array中，它返回一个新的数组，数组中的元素为原始数组调用函数处理后的值。注意：1.map()不会对空数组进行检测2.map()不会改变原始数组二、语法1.array.map(function(currentValue, index, arr), thisIndex)function(currentValue, index, arr)：必须。为一个函数，数组中的每个元素都会执行这个函数。其中函数参数： 1.curre..
2022-05-31 17:43:21
677
原创 github依赖总结之“vue-drag-resize”
一、作用1.主要是拖拉拽、放大缩小二、效果展示demo地址：Vue-drag-resize三、使用步骤1.npm i -s vue-drag-resize安装2.注册import Vue from 'vue'import VueDragResize from 'vue-drag-resize'Vue.component('Drageer', VueDragResize)3.使用<template> <div id="app">..
2022-05-30 18:33:46
529
原创 web前端常用方法之“array.find()”迭代
一、定义和注意find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。find() 方法为数组中的每个元素都调用一次函数执行：当数组中的元素在测试条件时返回true时, find() 返回符合条件的元素，之后的值不会再调用执行函数。 如果没有符合条件的元素返回 undefined注意: find() 对于空数组，函数是不会执行的。注意: find() 并没有改变数组的原始值。二、实列var ages = [3, 10, 18, 20]; function c..
2022-05-29 21:59:18
437
原创 vue其他之“props”的几种接收写法
//简单声明接收 // props:['name','age','sex'] //接收的同时对数据进行类型限制 /* props:{ name:String, age:Number, sex:String } */ //接收的同时对数据：进行类型限制+默认值的指定+必要性的限制 props:{ name:{ type:String, //name的类型是字符串 required:true, //name是必要的 }, age.
2022-05-29 20:28:43
3309
原创 web前端CSS之“ calc() 函数”
1.定义calc() 函数用于动态计算长度值。2.用法需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)； 任何长度值都可以使用calc()函数进行计算； calc()函数支持 "+", "-", "*", "/" 运算； calc()函数使用标准的数学运算优先级规则；3.作用：1-自动调整表单域的大小以适应其容器的大小input { padding: 2px; display: block; width: calc(
2022-05-29 18:15:22
1588
转载 web前端CSS之“px、em、rem、%、vw、vh单位”区别
1 、pxpx就是pixel（像素）的缩写，相对长度单位，相对于屏幕分辨率。2、em参考物是父元素的font-size，具有继承的特点。浏览器默认字体是16px，整个页面内1em不是一个固定的值。字体大小同样都是1.5em，但是效果却截然不同，按照W3C提供的公式，我们可以计算下： class为id1的div字体大小继承自父元素body：16px*1.5em = 24px class为id2的div字体大小继承自父元素id1：24px*1.5em = 36px class为id3的div字体
2022-05-29 18:00:06
3225
1
原创 vue其他之“vue关闭语法检查”
module.exports = { pages: { index: { //入口 entry: 'src/main.js', }, }, lintOnSave:false, //关闭语法检查 //开启代理服务器（方式一） // devServer: { // proxy: 'http://localhost:5000' // }, //开启代理服务器（方式二） devServer: { proxy: { '/at.
2022-05-29 17:49:53
234
原创 vue面试之“ES6-ES10”
1.let、const2.解构赋值 let { a, b } = { a: 1, b: 2 }3.箭头函数4.字符串模板5.扩展运算符6.indexOf、map、filter7.暴露es7includes()方法，用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回true，否则返回false。es8async/await解决异步请求问题先用async定义一个异步函数，在函数中定义await同步去顶一个变量，返回最终的一个变量最后通过方法.then(functio.
2022-05-23 21:14:27
225
原创 vue面试之“router和route”的区别
1.router router 是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数的到的一个router对象。这个对象是一个全局对象，他包含可所有路由包含许多关键性的对象和属性2.route route是一个跳转路由对象，每一个路由都会有一个router对象，是一个局部的对象，可以获取对应的name、path、params、querty等...
2022-05-23 20:59:32
1288
原创 vue面试之“mutation和action 区别”
1.action的功能和mutation是类似的，都是去变更store里的state，不过action和mutation有两点不同： action主要处理的是异步的操作，mutation必须同步执行，而action就不受这样的限制，也就是说action中我们既可以处理同步，也可以处理异步的操作 action改变状态，最后是通过提交mutation ...
2022-05-23 20:48:15
1050
原创 vue面试之“防抖和节流”
防抖: 就是指触发事件后在n秒内函数只能执行一次，如果在n秒内又触发了事件，则会重新计算函数执行时间。例如：设定1000毫秒执行，当你触发事件了，他会1000毫秒后执行，但是在还剩500毫秒的时候你又触发了事件，那就会重新<body> <input type="text" class="ipt" /> <script> var timerId = null document.querySelector('.ipt').on
2022-05-23 20:43:32
184
原创 vue面试之“v-if与v-show”的区别
1.v-if 写法： (1).v-if="表达式" (2).v-else-if="表达式" (3).v-else="表达式" 适用于：切换频率较低的场景。 特点：不展示的DOM元素直接被移除。 注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”（中间不能有其他标签）。 2.v-show 写法：v-show="表达式" 适用于：切换频率较高的场景。 特点：不展示的DOM元素未被移除，...
2022-05-23 20:40:43
255
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人