laiqi_luckyboy-CSDN博客

原创 Vue3组合式API之Setup

组合式API诞生背景使用过vue2.x开发过项目的人应该都清楚了其弊端，当一个组件功能较多的时候尤为明显。2.x版本的vue对于刚接触这个框架的人十分友好，简明的结构和易懂的使用方法很快就能上手。但是问题来了，当一个组件功能很多，每个功能的数据、方法以及生命钩子函数等等堆在了一起，当我们想去看某个功能的逻辑过程时，是极其繁琐的，你需要不断地上下查找编辑器的有关代码。Setup为了解决上面那个弊端，vue3提出了组合式api，简单地说就是把一个功能逻辑涉及到的数据、方法、生命周期、侦听器等等都收集在一起

2021-08-03 16:42:09 665

原创 Webpack构建项目时报Error: Cannot find module ‘webpack-cli/bin/config-yargs‘

场景复现在使用webpack-dev-server 来构建 web 服务器，实现实时重新加载(live reloading)项目的时候package.json文件中添加运行指令"start": "webpack-dev-server --open"在控制台中输入指令npm start运行项目，报错如下原因webpack-cli的4.x版本和webpack-dev-server的3.x版本不兼容解决办法安装webpack-cli的3.x版本即可npm uninstall webpack

2021-06-21 15:45:10 210

原创 CSS3过渡动画实现hover人物弹出炫酷效果案例

目标我们要实现的目标效果如下过渡如何使用可以清楚地看出效果图中的效果用到了css3中的过渡transition，先来了解一下transitionCSS3 过渡是元素从一种样式逐渐改变为另一种的效果过渡共有四个属性，分别是：transition-property：规定应用过渡的 CSS 属性的名称transition-duration：定义过渡效果花费的时间。默认是 0transition-timing-function：规定过渡效果的时间曲线。默认是 “ease”transi

2021-06-18 15:04:56 1955

原创 leetCode算法js解第一题：两数之和

题目描述来源：力扣（LeetCode）题目链接：https://leetcode-cn.com/problems/two-sum给定一个整数数组 nums 和一个整数目标值 target，请你在该数组中找出和为目标值 target 的那两个整数，并返回它们的数组下标。你可以假设每种输入只会对应一个答案。但是，数组中同一个元素在答案里不能重复出现。你可以按任意顺序返回答案。示例 1输入：nums = [2,7,11,15], target = 9输出：[0,1]解释：因为 nums

2021-06-18 11:02:10 458 2

原创 canvas实现简单的刮刮乐功能

canvas实现刮刮乐效果平时浏览一些购物网站常常有一些抽奖的环节它们就会使用一种刮刮乐的形式给用户发一些优惠券或者其它的一些奖品，对此突然产生了些许兴趣于是就琢磨着该如何实现，最终还是选择了canvas来实现这个效果思路思路很简单，无非就是绘制一个用来刮的蒙版矩形，给画布添加鼠标移动事件，在鼠标移动是不断绘制以鼠标为圆心的圆形闭合路径，图形合成globalCompositeOperation 属性使用‘destination-out’，用来抹除重叠的部分ctx.globalCompositeOp

2021-06-15 17:33:00 1461

原创简单使用VueI18n实现项目国际化

介绍Vue I18n 是 Vue.js 的国际化插件，用于在vue项目中实现多语言切换使用1. 安装npm i vue-i18n安装完毕后接下来在main.js中使用2. 导入import VueI18n from 'vue-i18n'3. 配置Vue.use(VueI18n)// 创建VueI18n实例对象const i18n = new VueI18n({ locale: 'zh', // 当前语言 fallbackLocale: 'zh', // 默认语言 s

2021-06-08 11:13:56 202

转载 JavaScript之ES6+的常用新特性

本文转载自：Vue中文社区https://mp.weixin.qq.com/s/BXw4Bz7S-2yUV8oL2JSHTAES6(2015)1. 类(class)class Person { constructor(name) { this.name = name; } showName() { console.log(this.name); }}const me = new Person('Lucky');me.showName(); // lucky2.

2021-05-29 14:45:37 194

原创 vue中的.sync 修饰符

应用场景介绍vue官网上是这样介绍.sync修饰符的应用场景的：在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以变更父组件，且在父组件和子组件都没有明显的变更来源。这也是为什么我们推荐以 update:myPropName 的模式触发事件取而代之。用法如下的父组件Father在引入子组件Son并使用.sync修饰符绑定传入的值<Son :show.sync='isShow'></Son>以上代码就被

2021-05-17 18:36:55 104

原创样式穿透——‘＞＞＞‘&‘/deep/‘&‘::v-deep‘

为何要用在vue项目中，每个组件的style标签都可以通过添加一个scoped属性来实现样式的作用于当前这个组件。大部分时候我们会在项目中引入第三方组件库，但是我们会发现有的时候我们修改了第三方组件库的样式却不生效，这就是因为scoped属性使得父组件的样式将不会渗透到子组件中解决办法1.直接在css中或者stylus中使用>>>实现样式穿透2....

2021-05-14 17:19:41 212

原创 axios取消请求

axios取消请求应用场景：防止用户频繁发送请求，实现发送请求的防抖官网上描述的使用方法有两种，如下：利用CancelToken.sourceconst CancelToken = axios.CancelTokenconst source = CancelToken.source()// get请求cancelToken定义在第二个参数中axios.get('/requrl', { cancelToken: source.token}).catch(function (throw

2021-05-09 20:17:11 191

原创微信小程序父子组件之间传值

简单描述小程序父子组件之间传值和vue的类似，不同的是父传子时子组件是通过properties属性来接收的，子传父则是通过triggerEvent方法触发父组件方法实现传值的父传子父组件json文件注册使用的子组件 "usingComponents": { "son": "../../components/son/index" }父组件使用子组件<view>this is 父组件</view><son fatherMsg="{{ fatherMsg

2021-04-25 20:39:12 601

转载 Javascript数组的常用方法总结

本文转载至：https://mp.weixin.qq.com/s/XokYZKcnnPE_MSRMsnU1IA数组基本操作可以归纳为增、删、改、查，需要留意的是哪些方法会对原数组产生影响，哪些方法不会对原数组产生影响操作方法下面对数组常用的操作方法做一个归纳增下面前三种是对原数组产生影响的增添方法，第四种则不会对原数组产生影响push()unshift()splice()concat()push()push()方法接收任意数量的参数，并将它们添加到数组末尾，返回数组的最新长度

2021-04-16 16:14:32 81

原创 TS入门——07.装饰器

装饰器概念ts官方文档上，是这样描述装饰器的，装饰器是一种特殊类型的声明，它能够被附加到类声明，方法，访问符，属性或参数上，装饰器使用 @expression这种形式，expression求值后必须为一个函数，它会在运行时被调用，被装饰的声明信息做为参数传入。通俗的讲装饰器就是一个方法，可以注入到类、方法、属性参数上来扩展类、属性、方法、参数的功能装饰器主要有以下几种：类装饰器类装饰器是应用于类的装饰器参数： target：类function classDecorator(target: a

2021-04-14 11:27:49 766

原创 TS入门——06.命名空间

命名空间概述命名空间就是用来开辟一个作用域解决命名冲突问题，我们可以在不同命名空间中定义同名的变量TypeScript 使用namespace来定义命名空间，通过 export 关键字对外暴露需要在外部访问的对象，如下namespace s1 { export interface rule { name: string, age: number }}// 使用命名空间s1的接口约束const obj: s1.rule = { name: 'lucky', age

2021-04-13 11:05:49 1209 2

原创 TS入门——05.泛型

为何使用泛型我们不仅要创建一致的定义良好的API，同时也要考虑可重用性，可以使用泛型来创建可重用的结构，一个结构可以支持多种类型的数据，泛型实现类、接口、方法的复用性以及对不特定类型的数据的支持下面定义一个可以返回用户传入值的函数function fn (value: number): number { return value}上面函数只可以实现传入为数字的情况，无法传入其它类型的值，用any类型可以解决这个问题function fn (value: any): any { return

2021-04-13 10:10:49 195

原创 flex布局练习——实现骰子的各个点数

效果图如下实现上面效果主要依赖flex布局，话不多说，直接上代码骰子html结构 <ul> <li> </li> <li> </li>

2021-04-12 19:44:34 1251

原创 TS入门——04.接口

ts接口概念接口是一系列抽象方法的声明，是一些方法特征的集合，这些方法都是抽象的，需要由具体的对象去实现，简而言之接口用来定义标准，定义了行为的规范接口使用interface来定义，如下interface my_interface { 内容 }例子：interface myName { firstName: string; secondName: string;}// myName接口表示应用了该接口的数据都同时满足其中的两个属性的存在var obj: myName = {

2021-04-12 19:20:23 243

原创 TS入门——03.类

TS入门——03.类类的简单概述类描述了所创建的对象共同的属性和方法，ES6前js是通过构造函数来描述类的，这里我们主要讲ES6的类。ES6则使用class关键字来定义类，class关键字紧跟定义的类名，在类里可以定义接收参数的构造器constructor，可以定义原型方法，也可以定义静态属性和静态方法。ts类的定义ts的定义类的方法和js定义类的方法大体一致，只是在类实例化时需要初始化字段，对字段进行修饰符约束TypeScript 类定义一个Person类示例如下class Person {

2021-04-10 15:00:59 353

原创 TS入门——02.函数

TS入门——02函数函数定义函数就是一组可以执行某种特定功能的代码段，函数声明告诉编译器函数的名称、返回类型和参数函数就是使用了关键词 function把代码块包裹在花括号中，如下// 函数声明function fn() { console.log('函数执行了')}// 函数调用fn() // 函数执行了大多时候，我们需要通过函数指定返回值给调用处，在js中我只需通过关键字return即可返回任意类型的值，但是在ts中我们需要给返回值指定一个返回类型，如果没有返回值，编译器默认返回

2021-04-10 11:24:22 787

原创 TS入门——01.数据类型

TS入门学习——01.基本类型TS数据类型介绍JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型（如下）var luckyboy;console.log(luckyboy) // luckyboy声明来未赋值为undefinedvar luckyboy = 250;console.log(luckyboy) // 现在 luckyboy赋值为数字类型var luckyboy = "lucky";console.log(luckyboy) // 现在 lu

2021-04-09 16:25:23 1453

原创个性课表静态网页的制作

个性课表静态网页的制作效果图:主要运用知识：html ，css这里是把主页面分成三个div区块：一个是课表头部；一个是课表月份以及课的节数；还有一个是星期，日期和课名；第二个和第三个星期日期是用表格第三个课名用列表来做内容比较简单，所以没有添加注释html 代码：<!doctype html><html><head><meta...

2019-03-14 13:19:30 1844

qq_38836435的博客