程序员Syoyu-CSDN博客

原创一文带你构建自己的脚手架

何为脚手架？在日常开发中，我们创建vue项目所使用的vue-cli，创建react项目的create-react-app…都是非常优秀的脚手架。那为什么要使用脚手架来创建项目呢？因为在实际开发中，使用脚手架我们可以快速的初始化一个项目，无需自己一步一步配置，可以有效的提升开发效率。既然已经有这么多优秀的脚手架工具了，为什么还要自己开发一个脚手架呢？其实在实际开发中，有可能这些脚手架不符合我们的实际应用，这时候就需要我们自己根据实际的需求自己去“造轮子”。

2022-11-14 09:45:52 1210 1

原创【JS】一文学会正则表达式

1.概述1.1什么是正则表达式正则表达式（ Regular Expression ）是用于匹配字符串中字符组合的模式。在JavaScript中，正则表达式也是对象。正则表通常被用来检索、替换那些符合某个模式（规则）的文本。例如验证表单：用户名表单只能输入英文字母、数字或者下划线，昵称输入框中可以输入中文(匹配)。正则表达式还常用于过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)。…其他语言也会使用正则表达式，作为前端萌新，这里我主要是利用JavaScri

2022-04-14 17:11:04 994

原创【JavaScript】一文学会JavaScript继承

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EzzMcBXp-1649325798847)(https://note.youdao.com/yws/res/836/WEBRESOURCE7533d44b0c7e49a12c16601fddfdce3f)]1. 原型链继承原理：让子类的原型等于父类的实例function Animal() { this.name = 'dog'}Animal.prototype.getName = function() {

2022-04-07 18:04:20 850

原创【vue】从零开发组件库并发布npm

前言在工作中，我们经常使用element-ui、iview等一系列组件库。久而久之，我自己也在想可不可以开发一个属于自己的组件库，并且到时候直接npm install xxx 之后就可以直接安装引入使用。本文旨在分享前端萌新自己的vue组件的搭建和发布到npm上的流程。如有错误，请大佬们指出，一起交流。vue项目初始化1. 创建vue项目vue create project-name2. 将项目目录修改成以下结构（参考了iview的目录结构）|-- project-name |

2022-04-06 14:25:51 1533

原创【Vue3】如何理解ref toRef和toRefs

Vue3中新增了几种创建响应式数据的方法，其各自的作用当然也不尽相同，每一种方法都有其自己的应用场景，今天我们来聊聊什么是ref toRef和toRefs？三者在使用方式上有什么不同？最佳的使用方式是什么？

2021-08-25 11:20:02 1511

原创 vue模板编译

提示：本博客用于分享本人学习心得,如有错误之处欢迎大家指出。文章目录前言编译模板是什么？编译模板的过程？1. vue-template-compiler2. vue组件可用render代替template编译模板的结果？前言我们在用vue进行开发的时候，虽然模板是vue开发中最常用的部分，但是大多数人对他可能不是很了解，今天我们就一起来探讨以下，模板是什么？模板是如何编译的？编译模板是什么？模板不是html，模板有表达式、插值、能实现判断、循环html是标签语言，只有js代码才能实现判断

2021-08-10 21:47:44 479

原创 vue3响应式之Proxy

提示：本博客用于分享本人学习心得,如有错误之处欢迎大家指出。文章目录前言什么是proxy？vue3中的proxy前言在上一篇文章vue2 响应式之Object.defineProperty中，我们知道了vue2是通过Object.defineProperty这个API来实现响应式的。那么，为什么vue3要使用proxy来替代Object.defineProperty？就像上一篇中讲到的，vue2.x基于Object.defineProperty的实现，存在很多缺点：一次性递归计算量大、无法新

2021-08-09 23:17:26 982

原创 vue2 响应式之Object.defineProperty

这里写自定义目录标题1.前言2.Object.defineProperty（1）Object.defineProperty监听简单对象，例子如下（2）Object.defineProperty深度监听data变化（3）Object.defineProperty监听新增、删除属性（4）监听数组变化3.Object.defineProperty的缺点以下内容是自己在学习过程中所记录，如有1.前言在日常的开发中，在data中定义的数据，可以在template中用*{{}}*在视图中显示，如下图所示

2021-07-30 10:29:38 572

原创 [Vue warn]: Error in mounted hook: “TypeError: Cannot read property ‘getAttribute‘ of null“

最近在vue中用echarts的时候报如下错误：报错原因：Echarts的图形容器还未生成就对其进行了初始化。于是在网上搜索了解决该问题的方法。但大多解决办法都是使用ref来代替document.getElementById（）获取该图形容器对象。但是用了之后还是会报错，于是我们转换思路，可以先用ref来判断该容器是否存在，如果存在，之后我们再用document.getElementById（）来获取dom对象。代码如下：<template> <div> &

2021-03-23 10:13:24 567

原创 vue开发去哪儿网App的知识点和错误点整理

简介：vue开发去哪儿网App项目是跟着慕课网上面的教程进行学习、编码完成的。这篇文章主要记录的是-我在编码过程中运用的主要知识点和遇到的bug以及对bug的修复，目的是加深对vue基础知识的记忆和理解。项目文件地址为https://gitee.com/zjinxiaoliang/Travel_GoWhere一、主要知识点1.字体图标的使用（1）下载相应图标文件，并且将文件放在src/asset文件夹中（具体文件夹可以根据自己需要自己创建），我是在阿里巴巴图标矢量库下载的图标文件，地址如下：htt

2020-08-05 22:15:23 423

原创 TypeScript基础-TS环境和数据类型

转载自个人网站https://jinxiaoliang.cn/ts/197.htmlTypescript是Javascipt的超集，包含ES567，新增了类型系统和完整的面向对象。使用ts编写的项目更加健硕，并且更容易扩展和维护1.TS环境安装TS新增的那一部分语法，不管是浏览器还是nodejs都是无法识别并执行的，因此需要一个工具将ts转换为浏览器或者nodejs识别的js代码。1.1 安装node或者nvm点击查看安装教程1.2 安装TypeScript在命令行工具输入如下命令，完成全局

2020-07-28 08:50:17 587

原创 Vue定义全局时间过滤器

vue获取后台的时间数据时，服务器端返回的时间大多时候都是毫秒类型，这样是非常不美观的，如下图所示。因此我们可以设定一个全局的时间过滤器来美化时间的显示形式。1.首先，我们现在main.js中定义一个全局的过滤器// originVal 后台返回的毫秒Vue.filter('dataFormat', originVal => { const dt = new Date(originVal) const y = dt.getFullYear() const m = (dt.getM

2020-07-16 16:14:32 568

原创 Element UI中的Tag组件中的$nextTick函数的作用

当我们在使用Element UI中的Tag组件时，我们能看到这样的代码this.$nextTick(_ => { this.$refs.saveTagInput.$refs.input.focus();})上述三行的代的作用是自动获取input输入框的焦点。this.$ refs.saveTagInput.$ refs.input.focus() 是通过$ refs获取input DOM对象，然后调用focus()方法自动获取焦点。$ nextTick 的作用是当页面上元素被重新渲染

2020-07-15 17:34:10 873 3

原创 Ajax基础

##1.Ajax的实现步骤###1.1 创建Ajax对象var xhr = new XMLHttpRequest();###1.2 告诉Ajax请求地址以及请求方式xhr.open('get','http://www.example.com')###1.3 发送请求xhr.send()###1.4 获取服务器端给客户端的响应数据xhr.onload = function() { console.log(xhr.responseText);}##2.服务器端响应的数据格式

2020-05-09 20:44:31 198

原创 MongoDB--基础学习

##1.Mongoose第三方包使用Node.js操作MongoDB数据库需要依赖Node.js第三方包mongoose使用 npm install mongoose命令下载###1.1 启动MongoDB在命令行工具中执行 net start mongoDB命令即可启动MongoDB，否则MongoDB将无法连接###1.2 数据库连接使用mongoose提供的connect方法即可连接数据库const mongoose = require('mongoose');mongoose.c

2020-05-09 20:39:43 158

原创有3个按钮，我们给每个按钮添加点击事件，希望每次点击时输出当前点击的是第几个按钮，但是目前不论点击哪个按钮，最终输出的都是4。把下面的代码改正，实现我们要求的功能。效果图如下：

有3个按钮，我们给每个按钮添加点击事件，希望每次点击时输出当前点击的是第几个按钮，但是目前不论点击哪个按钮，最终输出的都是4。把下面的代码改正，实现我们要求的功能。效果图如下：（1）单击方法导致的循环问题。提示：单击方法在循环外面定义（2）在循环中调用，并将被点的按钮的型号传进去提示：每次进入一个新的作用域，都会创建一个用于搜索变量和函数的作用域链，搜索的顺序是沿着作用域链从当前作用域...

2020-03-02 23:33:08 994

原创基础网络协议之HTTP

转自个人网站https://www.jinxiaoliang.cn/1105.html一、HTTP简介HTTP协议（HyperText Transfer Protocol，超文本传输协议）是因特网上应用最为广泛的一种网络传输协议，所有的WWW文件都必须遵守这个标准。HTTP是一个基于TCP/IP通信协议来传递数据（HTML 文件, 图片文件, 查询结果等）。HTTP工作原理HTT...

2019-10-18 19:25:33 273

原创题目：请编写函数void fun( char *s),函数的功能是：在字符穿中的所有数字字符前加一个$字符，例如，输入：A1B23CD45,则输出为：A$1B$2$3CD$4$5。

转自个人网站：https://www.jinxiaoliang.cn/478.html题目：请编写函数void fun( char *s),函数的功能是：在字符穿中的所有数字字符前加一个$字符，例如，输入：A1B23CD45,则输出为：A$1B$2$3CD$4$5。分析：遍历整个字符串，如果发现有数字字符就先输出一个$,再输出数字字符，若未发现数字字符就直接输出字符。在这里我们要利用’\0’来...

2019-10-18 19:15:26 4424

原创 Jquery之实现弹幕效果

Jquery之实现弹幕效果1.效果演示如下2.功能分析点击按钮，获取input框中的值并把他传送到上面的弹幕盒子里面弹幕的颜色随机、距离顶部的距离不一并且迅速滑过屏幕点击按钮后，input框中的值清空3.用到的方法 Math.random()//用来取随机值<li>css()//设置弹幕样式</li><li> animate()...

2019-10-11 09:24:15 374

原创本地存储之window.sessionStorage和window.localStorage

window.sessionStorage和window.localStorage1.window.sessionStorage(1).生命周期为关闭浏览器窗口（关闭浏览器之后，所存储的数据也就随之清空）(2).以键值对形式存取使用(3).在同一窗口（页面）下数据可以共享存储数据sessionStorage.setItem(key,val)获取数据sessionStorage.s...

2019-09-18 13:55:57 4182 2

原创缓动动画

转自个人网站：https://www.jinxiaoliang.cn/2019/09/01/javascript-animation-07/一、缓动动画原理1.缓动动画就是让元素运动的速度有所改变，最常见的就是让运动速度慢慢停下来。2.思路：（1）让盒子每次移动的距离慢慢变小，盒子就会慢慢停下来（2）核心算法：让**（目标值 - 盒子目前的位置）/ 10** 的值作为每次盒子移动的距离，...

2019-09-02 00:33:25 668

原创 JavaScript之offset以及模态框拖拽的实现

转自个人网站：https://www.jinxiaoliang.cn/2019/08/30/javascript-offset-04/一、offset概述offset翻译过来就是偏移量，使用offset的相关属性可以动态的获取元素的偏移、大小等获得元素距离带有定位父元素的位置获得该元素自身的大小（高宽）注意：返回的数值都不带单位offset系列常用属性：offset系列属...

2019-09-01 18:51:34 607 1

原创 JavaScript之立即执行函数

1.含义：立即执行函数就是不需要调用，就可以直接执行//普通函数function fn(){};//声明定义函数fn();//调用//立即执行函数(function fn(){}());//立即执行2.写法(1)、(function(){}());//其中function(){}声明了之后就直接被里面的括号调用了，里面的“()”就可以理解为调用的意思。 (2)、(function...

2019-09-01 18:20:55 146

Mr.J的博客