- 博客(56)
- 收藏
- 关注
RSS订阅原创 vue-在组件中使用v-model
子组件想要使用父组件的值,又想去改父组件的值父组件子组件点击前点击后1.给子组件的value传个变量2.监听子组件的事件,并且把传过来的值赋给父组件的变量
2022-06-04 15:58:21
1261
原创 helloTypeScript
helloTypeScriptfunction greeter(person: string) { return `hello${person}`}const user = 'typeScript' console.log(greeter(user))var message = 'helloTypeScript';console.log(message);tip在文件夹下新建一个tsconfig.json文件,能解决vscode代码爆红异常高效的编写ts注意先用npm ini
2022-05-26 21:45:56
81
原创 react学习笔记(二)
setStatesetState在同步模块里面是异步的,想在语句后面直接拿最新的数据是拿不到的setState在异步模块里面是同步的。组件传值父传子跟vue一样直接写在标签上类组件拿值在render函数中用this.props拿值,所有父亲传过来的值,都在props里面属性验证导包import propsType from 'prop-types' static propTypes = { }默认值 static defaultProps = { }函数式组件拿
2022-05-04 15:10:44
689
1
原创 react学习之路（一）
安装脚手架 npm i -g create-react-app新建项目create-react-app 你的项目名字类组件import React from "react"class HelloWorld extends React.Component { render() { return ( <div> HelloWorld1 </div> ) }}export default HelloWorl
2022-05-02 16:47:32
347
1
原创 webpack学习笔记
相关命令打包webpack查看打包相关详细信息webpack --stats detailed设置打包入口文件webpack --entry 文件路径设置打包模式webpack --mode production/development修改文件自动打包webpack --watch热更新(ctrt+s后页面自动更新内容)先安装依赖npm i webpack-dev-server修改配置项 devServer: { // 提供静态文件目录地址,就是热更新时候
2022-04-30 16:04:55
676
原创 Vue项目中使用链操作运算符
在vue项目中用链式运算符我发现会报错,但是在有些vue项目中使用又不会报错,真是奇了个大怪。附一下解决方案1.npm安装依赖npm install @babel/plugin-proposal-optional-chaining 2.babel.config.js中加入如下代码module.exports = { presets: ["@vue/app"], // 这个是要加的 plugins: [ "@babel/plugin-proposal-optional-c
2022-03-25 11:38:34
2059
5
原创 微信小程序项目中使用vant组件库
vant-webapp连接1.npm初始化1.1 新建终端1.2 初始化npmnpm init -y初始化npm报错,可能是你的文件目录是中文,尝试排查一下1.3 npm安装依赖npm i @vant/weapp -S --production1.4 构建npm点右上角工具,点击构建npm2.修改app.json将 app.json 中的 "style": "v2" 去除,这里我看有的人也没去除,反正我去除了,去不去看你个人了。3页面使用3.1注册组件在页面的JSON文
2022-03-17 19:37:24
393
原创 Vue子父传值的一些新发现
子组件传值this.$emit('get-attr', category1Id, category2Id, category3Id)父组件监听<CategorySelect @get-attr="onGetAttr" />函数处理 methods: { // args存的是1id, 2id, 3id onGetAttr(...args) { console.log(Array.isArray(args)) // true }, // 当
2022-03-13 12:36:18
1519
原创 template标签结合v-if,v-else不影响相关样式
问题描述有时候存在这种情况,h2和span标签与第二个h2标签不想同时显示,也就是111,222显示,333就不显示,333显示,111,222就不显示。这时候就会用到v-if,v-else,然后给h2，span外面包裹一个div，但是这样做样式可能就会乱掉,可以考虑用template节点去包裹,template标签不会生成额外节点,并且样式也不会乱掉 <div class="demo"> <h2>111</h2>
2022-03-11 14:54:40
2812
原创 CSS加关键帧动画切换背景图片闪烁问题修复
问题描述给一个div加个关键帧动画,动态改变背景图片,会出现首次进入页面这个div背景图片出现抖动问题css示例// 这样会出现抖动 .demo { width: 100px; height: 100px; animation: demo 2s linear infinite; } @keyframes demo { 0% { background: url('1.png') no-repeat; backgrou
2022-03-07 12:31:23
3001
1
原创 Vue中使用qrcode插件将后端给的url转为ewm图片
1.安装依赖npm i qrcode2.组件内导入import QRCode from 'qrcode'3.处理事件函数使用const qrCodeImgUrl = await QRCode.toDataURL('后端返你的url')qrCodeImgUrl就是二维码的图片链接,放到img标签的src属性上就可以了,正常应该用try,catch去包裹一下处理一下错误,不过我懒得包,感觉没这个必要。...
2022-03-05 17:41:10
521
原创 恶补JS基础第二轮
函数1.变量提升 var a = () => { console.log(1) } function a() { console.log(2) } a() // 打印1个人理解: 待补充2.length属性返回需要传入的形参数量 function demo(a, b, c) { } console.log(demo.length) // 33.函数的作用域函数的作用域是在声明的时候绑定的,而不是运行
2022-03-03 19:32:03
372
原创 ES6学习之路(九)---async&await
async1.async函数返回一个Promise async function demo() { return '夏鸣予' } console.log(demo()) // Promise {<fulfilled>: '夏鸣予'}2.返回的值可以用.then接受 async function demo() { return '夏鸣予' } demo().then(res => { console.log
2022-03-03 15:12:49
467
原创 小程序WXS使用(实现vue过滤器效果),组件使用,踩坑记录
使用wxs代码来实现vue中过滤器效果在vue中对展示的数据进行统一处理,我们可以在组件中自己写一个过滤器,来转化数据,但是在小程序中是没有filter这个属性的,比如以下的wxml文件<view class="single-video"> <view class="album"> <text>{{duration}}</text> </view> &l
2022-03-03 11:07:40
923
原创 css实现一行文字居中,多行文字左对齐
思路一个div里面搞个span,div给text-align: center，span设置成行内块级元素,并给text-align: left示例如果换不了行,记得加个word-break: break-all;样式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="I
2022-03-01 16:27:39
1914
原创 Object(...) is not a function
问题描述vue项目中发送网络请求的时候,有时候会报错Object(...) is not a function解决思路看一下你封装的网络请求的那个模块是不是没ctrl+s保存,也就是你代码是不是没保存？
2022-02-28 20:10:05
1135
原创 flex布局最后一排元素效果不理想
问题描述使用 justify-content: space-evenly;布局,最后一行元素没撑满会出现元素不会在起始位置分布的问题问题图html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport
2022-02-28 19:36:29
408
原创 vue中a标签点击事件效果不理想
如果你发现在vue项目中给a标签加点击事件,然后在methods的事件处理函数中程序达不到预期的效果,比如该出的弹窗没有出来,考虑给点击事件加个prevent修饰符试试。prevent修饰符,本质上是阻止了默认行为 <a class="sindelet" @click.prevent="onDeleteCart(item)">删除</a>...
2022-02-27 15:09:56
2355
3
原创 input输入框的部分总结
input输入框购物车的一些总结(pc端)change事件是在失焦的时候触发的,但是如果你输入的值跟原来的值一样,失焦的时候是不是触发change事件的在输入框里面按回车键是能否触发change事件的,但是要保证输入的值跟原来的值不一样vue项目中给input的value属性也可以动态绑定一个变量,但是这种方式跟v-model的区别是给value动态绑定的变量与input输入框输入的值不是双向绑定的,也就是你把变量绑在value上,这个value就是死的,变量是多少value就是多少,不能手动输入
2022-02-26 22:53:17
431
原创 微信小程序图片高度无法撑满父容器
问题描述在view标签里面加image标签,view标签的宽是有的,但是高度没有,image标签的宽度我给了100%,但是我发现了一个问题,就是image标签底部跟view标签底部是有一个细小的距离的,真是奇了个大怪啊。解决方案外层容器view标签加个display:flex属性...
2022-02-25 22:12:37
1471
3
原创 echarts文字加阴影效果,描边颜色,描边宽度
给Echarts字体加阴影效果: textShadowColor给文字加描边颜色: textBorderColor给文字加描边宽度: textBorderWidth
2022-02-25 22:10:07
4470
原创 恶补js基础第一轮
恶补js基础第一轮变量提升(hoisting)js引擎解析代码的方式是先把所有被声明的变量放在头部,所以会出现以下情况 console.log(a) // undefined var a = 1标识符可以使用中文名字作为标识符,标识符就是你给你的变量起的名字 // 合法 var 夏鸣予 = '哎呀呀'这里我的理解就是对象不是由key和value组成的吗,key就是字符串,你写中文,其实我认为js被解析的时候自动帮你转为字符串了。区块用大括号把一组语句括起来,被称
2022-02-23 15:18:22
127
原创 ES6学习之路(九)-Promise
对于Promise,记录一下自己工作和学习中常用的一些操作和技巧使用Promise封装函数待补充。。。使用Promise.all发送并发请求 const p1 = new Promise(resolve => { setTimeout(() => { resolve('1') }, 500) }) const p2 = new Promise(resolve => { setTimeout(() =>
2022-02-22 18:03:11
238
原创 ES6学习之路（八）-类的继承
简介本文基于峰哥的ES6类的继承一节谈谈我的理解先写一个father类 class Father { constructor(money,carName) { this.money = money this.carName = carName } }在new一个Father实例的时候,我们给他配置一些金钱并配置一辆车,而在199x-200x年,你出生了,当然你可以完美继承你爸爸的金钱,你除了继承你爸爸的钱以外,你也可以开你爸爸的
2022-02-22 15:22:57
973
原创 removeListener报错
问题描述<!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>Docum
2022-02-22 11:03:57
5504
原创 es6学习之路(7) -类
老版新版对比如果了解过C++，或者java，类的写法看起来就很舒服了 // 老版的构造函数 function House(name) { this.name = name } House.prototype.openDoor = () => { console.log('door open') } // ES6类的写法 class House { constructor(name) { this.name = name }
2022-02-21 17:33:52
358
原创 微信开发者工具关联gitee
微信开发者工具关联gitee远程仓库1.gitee上新建仓库新建成功后这个会出现这个界面,不要关了2.微信开发者工具上关联打开微信开发者工具,点击右上角版本管理点击设置点网络和认证,然后点下方使用用户名和密码,输入你的gitee账号和密码再点远程，再点添加按提示输入名字,和远程分支地址,这个地方要注意去复制你的HTTPS地址点确定弹窗结束3.测试是否成功点左上角推送出现对钩,推送成功4.gitee上面检查一下去你的仓库看一下是不是推上去了成功！！！！！
2022-02-21 15:05:48
932
原创 原生js实现放大镜效果
记录一次原生js实现放大镜效果。效果图设计思路基本架子先弄一个容器放正常的图片,中间那个蒙版(稍微有点透明的白色正方形),肯定给绝对定位,动态调left，top值,所以子绝父相,父容器给相对定位。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
2022-02-20 17:28:29
643
原创 echarts字体大小自适应
问题描述做大屏时可能会遇到这种情况,图表可以根据容器(div)的大小自动调整,因为你可以在相关配置项中设置为百分比,但是字体大小就不一样了,你只能传个写死的数字。这里记录一下怎么做到文字自适应。解决方案在methods里面搞一个方法,举个例子，比如美工给你的设计稿是1920*1080的,字体大小你量的是30px,那么网页加载时,获得屏幕的宽度,然后用屏幕宽度除以1920,得到比例,用30px乘以比例,就是你想要的字体大小了。比如在960px宽度的屏幕上,比例就是960 / 1920 = 0.5,得到
2022-02-16 16:47:55
11743
3
原创 ES学习之路(六)-Set&Map数据结构
Set简要介绍Set是一种数据结构,注意是一种数据的结构,不是数据类型,峰哥说是一个构造函数,es6已经出类了,所以只要说是构造函数,我的理解就是类。Set数据结构里面的元素是不能重复的!!!既然是类,我们要是用,那就肯定要搞个实例出来。 const s = new Set() // 这样就有了一个Set实例实例化的时候可以接受参数,可以接收一个数组,或具有iterable 接口的其他数据结构,关于什么是 iterable 接口, 由于知识点太难,这个待补充。 const
2022-02-15 19:34:28
1747
原创 手写分页器组件
主题数据量过大的时候,前端分页是避免不了的事情,记录一次手写分页器组件(估计我这辈子只会手写这一次)。首先把静态分页器弄出来。再做js逻辑设计。<template> <div class="pagination"> <button>上一页</button> <button>1</button> <button>···</button> <button>3&l
2022-02-13 22:03:35
994
1
原创 v-if和v-for一起使用
让v-if和v-for一起使用外层包裹一个template节点,示例 <template v-if=""> <div v-for=""> </div> </template>
2022-02-13 21:59:00
524
2
原创 es6学习之路五-Symbol
文章目录简介获取Symbol的描述消除魔术字符串Object.getOwnPropertySymbols()方法获取symbol属性数组感慨时间Symbol.for(), Symbol.keyfor()方法Symbol.for()Symbol.keyfor()内置的Symbol值1.Symbol.hasInstance2.Symbol.isConcatSpreadable简介新方法或事物的出现,总是需要伴随着能够解决一些问题。Symbol数据类型的出现就是为了解决变量属性名称相同的这一个问题。上代码
2022-02-13 12:54:24
557
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人