- 博客(34)
- 收藏
- 关注
RSS订阅原创 【vue基础】常用vue指令盘点
引言：vue是一个渐进式的js框架，有一套拥有自己规则的语法。其中有很多自己的特殊的html标签属性，也就是vue指令，特点就是以v-开头。2.1.v-on事件绑定语法：v-on：事件名=“methods中的函数”v-on：事件名=“methods中的函数（实参）”简写：@事件名=“methods中的函数”2.2.v-on事件对象vue事件处理函数中，拿到事件对象2.3 v-on修饰符事件修饰符 - 给事件带来更强大的功能语法@事件名.修饰符=“methods里的函数”修饰符.sto
2022-07-12 20:19:28
382
1
原创 [前端bug词典]npm ERR Cannot read properties of null (reading ‘pickAlgorithm‘)
Cannot read properties of null (reading 'pickAlgorithm')。npm下包时的报错。
2022-05-03 17:39:25
9429
12
原创 [webApi] 事件对象e
事件对象是存储与事件触发有关（事件触发点，键盘信息）的对象获取事件对象： 给事件处理函数添加一个形参 event / ev /e当用户触发事件的时候，浏览器会自动捕捉触发时(鼠标坐标和键盘按键)的信息,存入对象中。这个对象称之为事件对象。*常用属性e.pageX / e.pageY : 获取鼠标触发点到页面左上角距离键盘事件与获取onkeydown ：键盘按下onkeyup：键盘弹起onfocus：获得焦点onblur：失去焦点获取用户按键e.key:获取按键字符串e.key
2022-05-02 08:52:47
192
1
原创 【跨域】浅谈一下跨域
跨域是什么跨域是由浏览器的同源策略导致的不允许当前页面访问另一个源的数据。当两个网页的协议，端口和域名一致时才叫同源，三者有任一不一致就叫跨域。ps;同源策略可以帮助阻隔恶意文档，减少可能被攻击的媒介。提高安全性。解决跨域的方法使用vue-cli脚手架搭建项目时proxyTable解决跨域问题打开config/index.js，在proxyTable中添加如下代码proxyTable: { '/api': { //使用‘/api’来代替‘源地址’ target: 'www.ba
2022-04-29 21:14:05
692
原创 [前端bug词典]The “xxx“ component has been registered but not used vue/no-unused-components
bug现象在用vsCode写vue项目时有可能会出现这样的报错：“xxx”组件已注册，但未使用bug原因eslint代码监测到注册组件未使用解决方法删除未使用的注册组件使用该组件修改rules的设定（如果你只希望不报错，不使用也不删除组件）解决步骤删除未使用的注册组件根据编译器的报错提示找到未使用的组件，把它删掉使用该组件根据编译器的报错提示找到未使用的组件，使用它修改rules的设定在项目中packge.json文件中找到eslintConfig给其中的“
2022-04-12 21:02:57
962
原创 [前端bug词典]The project seems to require yarn but it‘s not installed.
在用脚手架创建的项目中使用yarn serve启动服务后出现的报错
2022-04-09 20:21:09
1008
3
原创 什么是vue脚手架, 如何安装和初始脚手架项目
前提：前置知识：js，node.jsvue脚手架脚手架是为了保证施工过程顺利进行而搭设的工作平台，在代码里的体现, 就是一套固定标准的, 文件夹+文件+webpack配置。安装在电脑中像生成项目的任意路径输入cmd打开黑窗口,输入如下代码全局安装。yarn global add @vue/cli安装进程结束后，在黑窗口输入如下代码查验是否安装成功,如果有版本号出现就是已经安装成功了vue -V //注意 这里是大写的V，不是小写v初始化项目创建项目继续在黑窗口中输入如下
2022-04-07 21:09:48
301
原创 js递归求1-100的和
今天用递归的方法来求一下1-100的和。代码如下：function fn1(n){ //跳出条件 if(n == 1) return 1 //逻辑 n+n-1 的和 return n+fn1(n-1)}console.log(fn1(100))
2022-04-03 21:48:24
5458
原创 【webApi】深入浅出“自定义属性”
自定义属性，顾名思义就是自己定义的html本身没有的属性。它的作用就是存储数据。而操作自定义属性，就需要用到attribute语法。attributesetAttribute(‘属性名’，属性值):设置属性getAttribute(‘属性名’)：获取属性removeAttribute(‘属性名’)：移除属性接下来看一个案例来看一下attribute的实际应用<!DOCTYPE html><html lang="en"> <head> <
2022-03-27 20:23:25
253
原创 【Git】手把手教你使用git管理代码 （下）
在上讲了Git的来由和基本的知识点，以及代码的推送。今天讲讲在工作中的多人协作的用法，多人协作管理员角色创建远程仓库 或 创建本地仓库之后推送到远程仓库初始化一个项目，git init添加初始的代码到暂存区 git add .提交初始的代码到本地仓库 git commit -m “提交了初始的代码”推送到远程仓库git remote add origin SSH地址git push -u origin master邀请成员开发（add / commit / pull /
2022-03-25 20:15:12
409
原创 【Git】手把手教你使用git管理代码 （上）
Git 是一个开源的分布式版本控制系统，是目前世界上最先进、最流行的版本控制系统。可以快速高效地处理从很小到非常大的项目版本管理。特点：项目越大越复杂，协同开发者越多，越能体现出 Git 的高性能和高可用性！今天我们从头开始来使用git管理代码。1.下载并安装Githttps://git-scm.com/downloads根据自己的操作系统，下载对应的git安装包。安装包下载好之后：双击，然后一直下一步安装即可（不要修改安装路径，容易出现乱码）。不要安装到含有中文的路径中。比如，不要
2022-03-24 22:04:35
7859
9
原创 [js案例]tab栏切换
今天来看一个tab栏切换的小案例效果如下：思路分析：这个效果用到了js中webApi的排他思想，之前的文章中有提到过。再就是css中display的应用代码如下：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css">
2022-03-07 22:42:20
162
原创 [js小品一则] 实现一下倒计时效果
今天用js的定时器来实现一下倒计时的效果首先分析一下思路。开启永久定时器，间隔时间1s (1)获取 时h 分m 秒s 文本innerText (2)秒自减 s-- (3)如果 s < 0 : s = 59 , m-- (4)如果 m < 0 : m = 59, h-- (5)如果 m h s 小于10，则补0 (6)将计算之后的h m s 重新赋值给页面元素innerText (7)如果 h == 0 && m == 0 &&a
2022-03-01 20:06:02
135
原创 【js案例】讲一下webApi中的核心的“排他思想”算法
如果有同一组元素，我们想要某一个元素实现某种样式， 需要用到循环的排他思想算法：所有元素全部清除样式（干掉所有人）给当前元素设置样式 （只复活自己）注意顺序不能颠倒，首先干掉其他人，再复活（设置）自己接下来看案例案例一：这一排5个按钮，只有在我点到哪个的时候哪个才变红，其他的都是默认样式。要实现这个效果，用css也可以实现，但今天我们用js中“排他思想”算法来实现它。代码如下：<!DOCTYPE html><html lang="en"> <head
2022-02-27 20:14:42
264
原创 【js案例】webApi实现隔行变色
今天用js中的webApi来实现隔行变色的效果。目的是 点击btn 修改所有li元素颜色（单行：橙色 双行：粉色）单行和双行和可以使用if判断，步骤：1.获取元素2.注册事件3.事件处理代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="wi
2022-02-26 19:56:22
318
原创 [js数据类型]值类型（简单数据类型）和引用数据类型（复杂数据类型）的区别
先说结论。值类型（简单数据类型）：string Boolean null undefined number栈中存储的是数据，赋值拷贝的也是数据，对拷贝数据进行修改，对原数据没有影响引用类型（复杂数据类型 array functionobject）：栈中存储的是地址，数据存在堆中。赋值拷贝的是地址。修改拷贝后的数据对原数据有影响。来举个栗子。 //1.值类型 let num1 = 10 let num2 = num1
2022-02-24 21:46:16
278
原创 [js小品一则]猜谜游戏：生成一个1-100之间的随机整数让用户猜
猜谜游戏题目要求：生成一个1-100之间的随机整数让用户猜如果用户猜大了或者猜小了，提示用户，直到用户猜对位置这里**用到的是js的基础语法。**来实现。主要使用到的知识点： 循环语句、多分支语句、随机数应用//Math.ceil和Math.random是js自带的函数，作用是数值向上取整和返回一个0-1之间的随机数。 let ran = Math.ceil(Math.random() * 100) let guess = +prompt('请输入一个数字')//当
2022-02-24 21:23:10
5524
原创 【js小品一则】三种方法封装一个根据布尔值求数组最大值或最小值的函数。第三种你绝对想不到。
题目要求，封装一个函数，有两个参数数组和布尔值，根据布尔值选择求任意数组的最大值或最小值。首先分析题目，封装一个函数，这个函数要能求数组最大值也能求数组最小值，而且用布尔值来选择是求最大值还是最小值。所以是一个求数组最大值的函数和求最小值的for循环，以及一个if判断就可以完成这个函数。代码如下：方法一：最容易理解也是最长的一个答案function getBig (arr, boolean) { //第一种方法 if (boolean == true) {//i
2022-02-23 21:37:02
1663
原创 [css]盒子水平垂直居中的6种方法
让盒子水平垂直居中是前端很基础的知识，在前端的面试中也经常会考查到，今天我就整理总结一下盒子水平垂直居中的几种方法。盒子的设定父盒子：width: 400px; height: 500px;子盒子：width: 100px; height: 100px;（当然也可以是其他数值，只是为了统一得到一个结果就提前给个设定）预期结果方法1.定位法利用子绝父相，给父盒子添加相对定位子盒子添加绝对定位代码如下：<!DOCTYPE html><html lang="en
2022-02-17 21:57:51
14609
3
原创 [css]移动web中，rem和vw/vh的区别
rem和vw/vh的区别在移动端网页中常用的两种相对单位就是rem和vw/vh，那么他们都有什么区别呢？remrem数值是相对于html标签的字号（一般设置为当前设备视口宽度的十分之一）大小来决定的在不同的移动设备上需要不断地修改html标签的字号大小，以适应设备需要媒体查询media需要引用flexible.js目前在市场上比较常见，如手淘之类都在用vw/vhvw/vh在同一个网页中只能使用一个，不可混用，否则盒子可能会出错vw/vh的数值是相对于设备视口宽/高的1%来决定的适
2022-02-16 16:52:32
548
原创 [css][移动web][rem适配][less]移动端网页的适配
移动端适配主流两种方案flex+rem单位 目前主流（小米和手淘用的较多）flex+vw/vh 未来趋势长度单位rem/vw/whrem相对单位（相对于html标签字号大小）1rem=1html字号大小/* 根html 为 12px */html { font-size: 12px;}/* 此时 div 的字体大小就是 24px */ div { font-size: 2rem;}rem的优势：父元素文字大小可能不一致， 但是整个页面只
2022-02-15 22:04:21
316
原创 [css][移动web]flex布局中主轴转换，弹性盒子换行和侧轴对齐方式
flex主轴方向flex-direction属性改变元素排列方向主轴默认水平方向，侧轴默认垂直方向flex-direction：column;弹性盒子换行flex-wrap:wrap;解决弹性容器中弹性盒子不会自动换行的情况。也就是说给父亲添加了display: flex;后 所有的子盒子都会在一行显示。而给父亲添加flex-wrap属性可以解决这种情况。侧轴对齐方式align-content：center；...
2022-02-13 21:07:09
602
原创 [css][移动web]flex布局的简单运用。（子盒子垂直水平居中）（圣杯布局，双飞翼布局）
今天讲一下移动web最常用的flex布局。虽然flex布局方式在在pc端存在兼容性的问题，但是在移动端上就完全不用担心这个问题，可以放心使用。flex布局方式可以大大的提高编程的效率。Flex布局弹性布局作用：基于flex精确灵活的控制块级盒子的布局方式，避免浮动布局中脱离文档流的现象发生flex布局非常适合结构化布局设置方式给子元素最近的父元素添加 display：flex，子元素就可以自动挤压或拉伸组成部分弹性容器（父盒子）弹性盒子（子盒子）主轴（x轴）侧轴（y轴）主轴对齐
2022-02-12 20:10:19
709
1
原创 [css]css中动画的使用
在网页上的动画效果可以由css实现或js实现，今天简单的讲一下css中动画如何实现。动画animation属性用来添加动画效果实现步骤在样式中定义动画 @keyframes 动画名称{ /*动画开始*/ from{} /*动画结束*/ to{} }或是@keyframes dance { 0% { } 100% { } }调用动画（在需要添加动画的元素样式中
2022-02-10 20:27:34
832
原创 [css]网页中字体图标的使用
一.字体图标1.字体图标本质是字体，可以改变字体和大小。颜色单一。优点：灵活 轻量 兼容 使用方便来源：阿里巴巴矢量图标库2.使用步骤：ps：引入字体图标css文件放在最上面。第一种使用方式复制相关文件在本地（fonts）目录下，并引入字体图标css文件标签使用字体图标，必须调用两个类名第二种使用方式（Unicode引用）复制相关文件在本地（fonts）目录下，并引入字体图标css文件或者在css文件中在标签中填写unicode编码
2022-02-09 22:04:32
510
原创 【css】用css的方法来画一个三角形
引言： 我们在网页中经常会见到一些小的三角形，比如对话框上的小角等。我们可以用css来画出这样的三角形css画一个三角形用盒子的边就可以画出来。步骤设置一个盒子 ，宽高为0给盒子的边设置宽度，并添加颜色选取需要的三角形，将其他的三个三角形设置为透明参考代码如下 width: 0; height: 0; /* border-top: solid 60px transparent; border-right: solid 60px
2022-01-24 10:30:00
4042
原创 【css】简单说一下定位
定位引言：当我们在浏览网页上下滑动时，很多时候会发现在网页上某些图片或者文字不会随着网页的滑动而动，始终固定在视野里的某个地方。还有不太引人注意的图片叠加在另一个图片的某个位置的情况。比如某购物网而这些效果都是用css中的 定位 来实现的1.为什么使用定位定位可以解决标准流和浮动实现不了的网页效果，它可以让盒子自由的在某个盒子里移动位置固定在屏幕的某个位置压住其他的盒子也就是说定位也是在摆放盒子，它可以解决网页页面中的层叠样式问题，也可以让元素固定位置。2.定位组成定位=定位模
2022-01-23 20:27:18
268
原创 【vue面试题几则】1.封装vue组件 2.vue组件传值 3.vue组件data为啥是函数 4.组件的命名规范
1. 请说下封装 vue 组件的过程首先，组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，解决了我们传统项目开发：效率低、难维护、复用性等问题。 分析需求：确定业务需求，把页面中可以复用的结构，样式以及功能，单独抽离成一个组件，实现复用 具体步骤：Vue.component 或者在new Vue配置项components中, 定义组件名, 可以在props中接受给组件传的参数和值，子组件修改好数据后，想把数据传递给父组件。可以采用$emit方法。 2. Vue组件
2021-10-25 18:36:05
1597
原创 [npm发包]手把手教你如何发包，发包竟如此简单。
1. 包是什么node.js中的第三方模块又叫做包.不同于node.js中内置模块和自定义模块，包是由第三方个人或团队开发出来的，免费供人使用。2.下载包和上传包都在[npm （Node Package Manager）](https://www.npmjs.com/)网站上进行，在电脑终端可以执行npm -v命令来查看电脑上安装的npm包管理工具的版本号3.自己创建一个包。一个规范的包，它的组成结构，必须符合以下 3 点要求：包必须以单独的目录而存在 包的顶级目录下...
2021-10-11 18:54:11
4271
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人