- 博客(45)
- 收藏
- 关注
RSS订阅原创 移动端H5页面引入高德地图的一些问题记录
思路：先让地图的div宽高为200%（自己可根据需求自定义），再使用transform: scale(0.5) translate(-50%, -50%);来进行缩放，简不简单？这时的zoom只能控制地图的缩放，因为移动端的宽度相较于web端还是比较小的，如果让移动端即保证zoom值一样，还显示的范围更大。
2023-07-07 14:43:56
446
1原创 sessionStorage在多标签页模式下的一些情况
##sessionStroge在浏览器中是保存当前回话的一些信息，如果当前标签页关闭，那么sessionStroge就会自动销毁，如果在同源的情况下开启多个标签页，那么多个标签页之间的sessionStroge可惜共享或者互相传递吗？根据MDN上的讲解，如果我们使用window. open或者a标签打开一个新的标签页，那么新的标签页是拥有老标签页的sessionStroge，也就是说这种方式带来的标签页复制了老的标签页的sessionStroge，那么既然进行了复制，我们使用sessionStroge能不
2023-02-12 11:22:14
355
原创 vue3 setup 怎么获取vue实例上的全局变量
在vue2中，我们定义在vue实例上的 vue.property.变量 ，在组件中都可以通过 this.变量名得到，那么到了vue3中，在setup中要获取全局变量就需要通过vue提供的方法了挂载全局变量const app=createApp()app.config.globalProperties.变量名组件 setup 获取变量getCurrentInstance().appContext.config.globalProperties.变量名打印getCurrentInstance如
2022-03-23 22:11:27
3462
原创 vue3 渲染函数
能解决的问题有时候使用模板编写某些组件的时候会特别麻烦，使用渲染函数反而可以很简单的解决什么是渲染函数就是使用vue内置的一些API写一些JS代码，就这么简单渲染函数编写方式及封装成组件（个人还是觉得封装成组件好用）import { defineComponent, h } from 'vue';export default defineComponent({ name: 'Demo', props: { name: { type: Str
2022-03-21 22:41:03
4198
原创 vue3 自定义指令 directive
目的：在vue项目中编写一些符合自己业务的指令分类：全局指令，全部组件都能使用在main.js中挂载到app上app.directive(‘focus’, { mounted(el) { el.focus() }})局部指令在组件内部使用directives：{}指令的生命周期created在绑定元素的父组件挂载之前beforeMounted在绑定元素的父组件挂载之后mounted在绑定元素的父组件vnode更新之前beforeUpdate在包
2022-03-20 22:12:51
2074
原创 vue3中在使用setup的情况下适合不适合使用mixin
答案：不推荐使用原因：mixin这个函数是非常霸道的，局部使用还好，如果是全局使用，在项目比较大的时候，个人觉得不是很好，在vue2的时候，因为没有组合式API这一说法，所以mixin对开发人员来说能解决好多事情，但是到了vue3，这种方式已经不推荐使用了，因为我们在vue3中，JS都是在setup里面执行的，这个时候如果我们在外面写一些公共的JS文件，然后暴露出来，在需要使用到的组件里面按需引入，这种比mixin觉得更好仅记录平常学习...
2022-03-20 20:55:21
4215
原创 vue3 中setup的执行时机及在生命周期中的位置
结果：1 setup是在props解析之后，beforeCreate执行之前进行调用2 如果在setup中和外部同时调用一个生命周期函数，setup的生命周期函数 在外部的生命周期函数之前执行<template> <div>setup的执行时机</div></template><script>import { onMounted } from "@vue/runtime-core";export default {
2022-03-20 20:47:52
4622
原创 vue3 在组件上使用v-model
首先要明白的是 v-model在input 、checked 、 radio 、select等标签上表示的意思v-model 在input中表示 value 和input事件 ，如果我们把他么拆分开 ，那么就能实现组件的v-model很简单 ，总共算分为三步吧第一步，在组件内部的input的标签上 使用：value绑定props中的值，这一点要明白 绑定的是父组件传过来的值HTML<input type="text" :value="toValue" @input="i
2022-03-17 22:12:54
4545
原创 vue3 slot 插槽
作用：用于组件之中，用于父组件在调用子组件分发在子组件中插入的内容，可以是字符串、HTML模板甚至是组件规则：父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的在子组件的编写方式如下<slot></slot>v-slot 缩写 #具名插槽：就想我们坐火车拿着车票对号入座一样，在子组件中首先给slot的一个名字，就像提前给火车上的作为编好号，父组件在进行内容分发时，把内容对号入座就行<slot name="1"><
2022-03-16 22:13:20
568
原创 vue3 class与style的绑定
calss使用v-bind:calss进行元素类的绑定，简写为:calss，其中类的绑定方式有两种：第一 以对象的形式进行绑定第二 以数组的形式进行绑定<template> <div :class="{active:isActive}">对象形式绑定class</div> <div :class="[error]">数组形式绑定class</div></template><script>
2022-03-15 21:28:08
865
原创 vue3组件之间数据传递
1. 父传子遵循vue的单向数据流，就是父组件能往子组件传递数据，但是子组件不能回传，父组件传递子组件数据的方式 就是在组件标签上使用属性绑定的方式进行传递，子组件中定义props对象，定义需要接受的数据，在setup中的props定义父传子类型父组件<template> <div>parent</div> <Child></Child></template><script>import Chi
2022-03-14 22:34:51
8528
原创 Getting a value from the `props` in root scope of `setup()` will cause the value to lose reactivity
报错内容翻译为 从’ setup() ‘的根范围的’ props '中获取一个值将导致该值失去反应性这样翻译下来应该就能明白什么意思了，就是我们从props中获取父组件传递数据的时候，不管父组件传递的是不是响应式的数据，在接收的时候要把数据转换为响应式的，具体原因不知道啊，可能这就是规范吧那么如果我们要把props中的数据转换成响应式的数据有两种方法第一种 toRef 转换单个属性第二种 toRefs 转换所有属性...
2022-03-14 21:47:28
18339
原创 vue3 setup computed 计算属性
简介：computed 计算属性 可以对当前实例上的数据进行计算，并缓存下来，只有当依赖的响应式数据改变时，才重进计算，否则每次取到的计算属性数据都是从缓存中取到的（>1）计算属性还是和vue2一样，没啥特别大的改变个人理解：计算属性，说白了也是实例数据的一种，只是这个属性依赖于当前实例的其他数据，并且居右缓存功能，就想我们在data中定义一个name并且初始化的时候给一个值，相对于data中的初始化数据，只是一个依赖于其他的响应式数据进行改变的data数据重点：计算属性不能对依赖数据进行赋值
2022-03-13 22:38:42
5600
原创 Unexpected side effect in computed function vue/no-side-effects-in-computed-properties
vue3计算属性明确规定 只能依赖某个值得到某个值，不能对依赖的值进行赋值，修改，不能在计算属性中操作DOM，如果出现标题中的错误，看一下是否出现上述情况
2022-03-13 22:14:43
3820
原创 vue3中的ref toRef toRefs unRef 等等
refvue官方文档 接受一个内部值并返回一个响应式且可变的ref对象，该对象仅有一个.value property，指向该内部值理解：ref把一个JS基本类型数据变为一个响应式的对象，并且如果我们访问该值，只能通过.value形式，比如可以看出使用ref定义的对象已经变成响应式的对象unref把ref定义的响应式对象转变为基本类型的数据toRefvue官方文档 可以用来为源响应式对象上的某个property新创建一个ref，然后，ref可以被传递，他会保持对源property的响应式链接
2022-03-11 14:27:31
2888
原创 css中的text-shadow box-shadow
text-shadow:文字阴影效果参数：水平阴影位置 垂直阴影位置 阴影模糊距离 阴影颜色box-shadow：边框阴影效果参数：水平阴影位置 垂直阴影位置 阴影模糊距离 阴影颜色仅尽量平常学习...
2022-03-10 21:46:25
122
原创 css中的 currentColor
CSS3 新定义的一个属性，意思是取当前元素的字体颜色、边框颜色、阴影颜色等等，如果当前元素内没有定义color，则取父级元素的color元素，如果父级元素没有回一直往上取，直到有定义color的父级元素，如果都没有定义color ，则取当前的border-color或其他的元素，那个元素在上面，则取哪一个，如果父级元素和当前元素都定义有color，则取当前元素的color仅记录平常学习...
2022-03-10 21:36:14
479
原创 vue3中的watch和watchEffect
watch结论1：watch需要侦听特定的数据源，可以是一个也可以是多个，在页面第一次加载时不运行函数，只有当监听的数据源改变时，才会运行此函数结论2watch监听一个对象的属性，首先监听的值要以函数返回值的形式进行传递监听，不同于vue2形式的监听，如下为对象属性5秒后改变，监听函数打印watchEffect结论1vue官方文档 为了根据响应式状态自动应用和重新应用副作用，我们可以使用 watchEffect 函数。它立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该
2022-03-09 23:14:37
5379
原创 css中的padding margin
padding：块级元素内边距如果padding设置为百分比，则padding的值取自于哪里？？？如果父级元素有宽度和高度，则padding的百分比取自于宽度的值，如果父级元素没有设置宽度值，则一直往上取，直到取到当前页面的宽度如上所示，padding的50%是取得父元素宽度的值仅记录平常学习...
2022-03-08 23:11:51
306
原创 CSS中px em rem的那点事
目的：适配各个分辨率的设备 ，包括PC和移动端px:相对长度单位，px像素是相对于显示器分辨率而言的em:相对长度单位，相对于当前对象没文本的字体尺寸，如果当前对象没有设置字体大小，则相对于浏览器的默认字体大小（注意：浏览器的默认字体大小为16px）1 em会继承父元素的字体大小如上所示： 字体大小是使用的contentClass3中的font-size的大小rem:rem和em差不多，不过rem是相对于根元素HTML，而EM是相对于父级元素的字体大小在平常开发中，如果要实现响应式布局的话，
2022-03-08 22:56:08
160
原创 本地拉取码云上的代码
目的：家里 - 公司 两不误 ，懂得都懂在本地安装git环境省略。。。。配置本地git绑定到码云git config --global user.name “你的username”git config --global user.email “你的邮箱”拉取在需要拉取的项目文件夹中1.打开git命令窗口 ，输入 git init2 Git连接(远程仓库)码云地址git remote add origin 你的码云地址3 拉取码云上的所有文件到项目中来git
2022-03-03 20:51:34
410
原创 canvas学习笔记一 线 图形的绘制
canvas是H5新增的标签，可以使用JS代码绘制HTML图像的元素。作用：绘制照片集或制作简单的动画，甚至可以进行视屏处理和渲染。在HTML代码中使用标签，其中标签中有width和height属性，给canvas初始化宽高，如果不写的话，默认宽高为300px，如果在CSS中设置canvas的宽高，容易出现扭曲，所以避免使用CSS设置canvas的宽高。简单使用，代码如下：<canvas id="canvas1" width="300" height="300"></canvas&
2021-04-21 11:13:28
178
原创 GOJS获取选中的节点或者连线
//流程节点内容修改，把最新的值赋值给传值对象 e.newValue let nodeOrLinkList=self.myDiagram.selection; let key=""; nodeOrLinkList.each((nodeOrLink)=>{ if(nodeOrLink instanceof go.Node){ //获取选中节点
2021-04-09 15:19:17
2205
原创 ES6对象的key和value提取和对象转数组的转换
例如let obj={ "age":12, "name":"zs"}1.首先使用Object.keys(obj)获取对象的keys，或者是使用Object.values(obj)获取value的值，这俩方法得到的对象都是数组形式。2.如果是对象转成数组，对象内必须有length属性，如果没有length属性，则转成的数组元素为undefined，使用方法为Array.from();...
2021-04-07 21:58:44
3545
原创 es6 find方法的使用
根据find的字面意思，代表从数组中查找符合要求的对象或元素例如：var obj=[ { id:1, name:"zhangsan"},{ id:2, name:"lisi"}]var demo=obj.find((item)=>{ return item.id==1;})find的使用规则，查找数组中第一个符合条件的元素，如果未查找到，则返回undefined...
2021-04-05 22:10:15
507
原创 JS中的 foreach、map、filter、every、some等等
此文章仅为记录使用foreach和map都是对数据进行遍历，都是对数组进行一些操作，不同的是foreach是对原数组进行改变，返回值为undefined，而map是返回一个新的数组；//forEacharr.forEach((item,index)=>{ console.log(item)})//MAPlet arr1=arr.map((item,index)=>{ return item+1;})...
2021-04-01 23:09:10
1998
原创 vue+element table 为每个单元格增加点击事件
在e-table上增加@cell-click事件@cell-click="handle"handle(row,column,event,cell){ //row:该行的信息 //column:当前点击列的信息 //event:获取当前元素 //cell}
2021-04-01 09:34:22
1287
原创 vue跳转相同路由时，刷新当前路由
场景：重复点击某一个导航，跳转同一个路由，只会跳转一次，不会实现路由刷新解决办法：在路由跳转的时候加上一个时间戳this.$route.push({ name:"/login", query:{ t:Date.now();}})然后再router-view中加上:key="$router.query.t"<router-view :key="$router.query.t" />这样根据key值可实现重复跳转一个路由实现路由刷新的效果。...
2021-03-31 22:59:35
1057
原创 vue路由重写push方法解决路由跳转错误问题
场景：当在vue项目中，路由跳转需要跳转到相同的路由，如果是使用this.$route.push方法，项目会报错，这时我们就要重写路由的push方法解决问题：相同路由跳转时，项目报错添加：相同路由跳转时，触发watch (仅限string方式传参，形如"view?id=5")const routerPush = Router.prototype.pushRouter.prototype.push = function push(location) { if(typeof(location)==
2021-03-31 22:52:28
732
原创 vue自定义组件__vueClickOutside__的理解
可以点开看看这个，个人感觉不错添加链接描述export default { //绑定 bind (el, binding, vnode) { function documentHandler (e) { if (el.contains(e.target)) { return false; } if (binding.expression) {
2021-03-30 23:19:58
514
原创 对vue中自定义指令directive的理解
directive指令是为了满足vue中内置指令不能满足需求的情况下，开发者需要自定义一些指令来满足业务需要。自定义指令分为全局自定义指令和局部自定义指令。全局自定义指令如下：Vue.directive("myDirective",{ bind:functiion(el,binding,vnode){ /** el:自定义指令绑定的元素 binding：使用自定义指令绑定的属性和值，binding时一个对象，属性如下： name:指令名，不包括v-前缀，例如：v-demo
2021-03-30 22:55:10
1245
原创 对vue中keep-alive的理解
keepAlive作用：对组件进行缓存，避免每次使用组件时都执行init方法，对组件进行持久化，使组件状态维护不变，在下次展示时，也不用再次init。实例：<keep-alive> <component/></keep-alive>上面提交keep-alive是使组件保持持久化，也就是说，再次使用组件时，组件不再重新走生命周期函数，但是在平时的开发中，经常用到组件的生命周期函数进行一些业务逻辑的处理和数据的渲染，所以vue在这里给提供了两个hook，1.ac
2021-03-29 23:09:42
302
原创 对JSencrypt的理解
使用JS对数据进行加密处理，一般用于用户登录数据：用户名和密码，把数据转成base64格式的数据在vue中使用JSencrypt：1.npm install jsencrypt --dep2.引入：import {JSEncrypt } from 'JSEncrypt ’3.使用：3.1获取秘钥 publickey=""3.2 创建jsencrypt对象let encryptor=new JSEnarypt();设置公钥encryptor.setPublickey(publickey);
2021-03-29 22:23:07
2605
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人