<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[belloc_li的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/belloc_li</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; belloc_li]]></copyright><item><title><![CDATA[【vue基础】常用vue指令盘点]]></title><link>https://blog.youkuaiyun.com/belloc_li/article/details/125747363</link><guid>https://blog.youkuaiyun.com/belloc_li/article/details/125747363</guid><author>belloc_li</author><pubDate>Tue, 12 Jul 2022 20:19:28 +0800</pubDate><description><![CDATA[引言：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]]></description><category></category></item><item><title><![CDATA[【js小知识】轻松了解js防抖与节流]]></title><link>https://blog.youkuaiyun.com/belloc_li/article/details/125197974</link><guid>https://blog.youkuaiyun.com/belloc_li/article/details/125197974</guid><author>belloc_li</author><pubDate>Thu, 09 Jun 2022 10:20:54 +0800</pubDate><description><![CDATA[防抖是回城，节流是平A]]></description><category></category></item><item><title><![CDATA[[前端bug词典]npm ERR Cannot read properties of null (reading ‘pickAlgorithm‘)]]></title><link>https://blog.youkuaiyun.com/belloc_li/article/details/124558431</link><guid>https://blog.youkuaiyun.com/belloc_li/article/details/124558431</guid><author>belloc_li</author><pubDate>Tue, 03 May 2022 17:39:25 +0800</pubDate><description><![CDATA[Cannot read properties of null (reading 'pickAlgorithm')。npm下包时的报错。]]></description><category></category></item><item><title><![CDATA[[webApi] 事件对象e]]></title><link>https://blog.youkuaiyun.com/belloc_li/article/details/124536508</link><guid>https://blog.youkuaiyun.com/belloc_li/article/details/124536508</guid><author>belloc_li</author><pubDate>Mon, 02 May 2022 08:52:47 +0800</pubDate><description><![CDATA[事件对象

是存储与事件触发有关（事件触发点，键盘信息）的对象
获取事件对象： 给事件处理函数添加一个形参  event / ev /e
当用户触发事件的时候，浏览器会自动捕捉触发时(鼠标坐标和键盘按键)的信息,存入对象中。这个对象称之为事件对象。*

常用属性
e.pageX / e.pageY : 获取鼠标触发点到页面左上角距离
键盘事件与获取
onkeydown ：键盘按下
onkeyup：键盘弹起
onfocus：获得焦点
onblur：失去焦点
获取用户按键
e.key:获取按键字符串
e.key]]></description><category></category></item><item><title><![CDATA[【跨域】浅谈一下跨域]]></title><link>https://blog.youkuaiyun.com/belloc_li/article/details/124503329</link><guid>https://blog.youkuaiyun.com/belloc_li/article/details/124503329</guid><author>belloc_li</author><pubDate>Fri, 29 Apr 2022 21:14:05 +0800</pubDate><description><![CDATA[跨域是什么
跨域是由浏览器的同源策略导致的不允许当前页面访问另一个源的数据。当两个网页的协议，端口和域名一致时才叫同源，三者有任一不一致就叫跨域。
ps;同源策略可以帮助阻隔恶意文档，减少可能被攻击的媒介。提高安全性。
解决跨域的方法
使用vue-cli脚手架搭建项目时proxyTable解决跨域问题
打开config/index.js，在proxyTable中添加如下代码
proxyTable: {
  '/api': {   //使用‘/api’来代替‘源地址’
     target: 'www.ba]]></description><category></category></item><item><title><![CDATA[[前端bug词典]Already included file name ‘文件路径‘]]></title><link>https://blog.youkuaiyun.com/belloc_li/article/details/124140134</link><guid>https://blog.youkuaiyun.com/belloc_li/article/details/124140134</guid><author>belloc_li</author><pubDate>Wed, 13 Apr 2022 09:22:36 +0800</pubDate><description><![CDATA[vsCode中写vue项目出现的已包含文件名报错问题]]></description><category></category></item><item><title><![CDATA[[前端bug词典]The “xxx“ component has been registered but not used vue/no-unused-components]]></title><link>https://blog.youkuaiyun.com/belloc_li/article/details/124133762</link><guid>https://blog.youkuaiyun.com/belloc_li/article/details/124133762</guid><author>belloc_li</author><pubDate>Tue, 12 Apr 2022 21:02:57 +0800</pubDate><description><![CDATA[bug现象
在用vsCode写vue项目时有可能会出现这样的报错：“xxx”组件已注册，但未使用

bug原因
eslint代码监测到注册组件未使用
解决方法

删除未使用的注册组件
使用该组件
修改rules的设定（如果你只希望不报错，不使用也不删除组件）

解决步骤


删除未使用的注册组件
根据编译器的报错提示找到未使用的组件，把它删掉


使用该组件
根据编译器的报错提示找到未使用的组件，使用它


修改rules的设定

在项目中packge.json文件中找到eslintConfig
给其中的“]]></description><category></category></item><item><title><![CDATA[[前端bug词典]The project seems to require yarn but it‘s not installed.]]></title><link>https://blog.youkuaiyun.com/belloc_li/article/details/124062171</link><guid>https://blog.youkuaiyun.com/belloc_li/article/details/124062171</guid><author>belloc_li</author><pubDate>Sat, 09 Apr 2022 20:21:09 +0800</pubDate><description><![CDATA[在用脚手架创建的项目中使用yarn serve启动服务后出现的报错
]]></description><category></category></item><item><title><![CDATA[[前端bug词典]‘vue‘不是内部或外部命令，也不是可运行的程序或批处理文件]]></title><link>https://blog.youkuaiyun.com/belloc_li/article/details/124043980</link><guid>https://blog.youkuaiyun.com/belloc_li/article/details/124043980</guid><author>belloc_li</author><pubDate>Fri, 08 Apr 2022 16:11:41 +0800</pubDate><description><![CDATA[前端开发强者之路——bug收集]]></description><category></category></item><item><title><![CDATA[[前端bug词典]命令窗口提示@vue/cli新版本安装成功，vue -V却还是旧版本]]></title><link>https://blog.youkuaiyun.com/belloc_li/article/details/124043052</link><guid>https://blog.youkuaiyun.com/belloc_li/article/details/124043052</guid><author>belloc_li</author><pubDate>Fri, 08 Apr 2022 15:46:32 +0800</pubDate><description><![CDATA[前端开发强者之路——bug收集]]></description><category></category></item><item><title><![CDATA[[前端bug词典]TypeError: defineConfig is not a function]]></title><link>https://blog.youkuaiyun.com/belloc_li/article/details/124042646</link><guid>https://blog.youkuaiyun.com/belloc_li/article/details/124042646</guid><author>belloc_li</author><pubDate>Fri, 08 Apr 2022 15:32:48 +0800</pubDate><description><![CDATA[前端强者之路-——bug收集]]></description><category></category></item><item><title><![CDATA[什么是vue脚手架, 如何安装和初始脚手架项目]]></title><link>https://blog.youkuaiyun.com/belloc_li/article/details/124025483</link><guid>https://blog.youkuaiyun.com/belloc_li/article/details/124025483</guid><author>belloc_li</author><pubDate>Thu, 07 Apr 2022 21:09:48 +0800</pubDate><description><![CDATA[前提：
前置知识：js，node.js
vue脚手架
脚手架是为了保证施工过程顺利进行而搭设的工作平台，在代码里的体现, 就是一套固定标准的, 文件夹+文件+webpack配置。
安装
在电脑中像生成项目的任意路径输入cmd打开黑窗口,输入如下代码全局安装。

yarn global add @vue/cli

安装进程结束后，在黑窗口输入如下代码查验是否安装成功,如果有版本号出现就是已经安装成功了
vue -V   //注意  这里是大写的V，不是小写v

初始化项目

创建项目

继续在黑窗口中输入如下]]></description><category></category></item><item><title><![CDATA[js递归求1-100的和]]></title><link>https://blog.youkuaiyun.com/belloc_li/article/details/123945364</link><guid>https://blog.youkuaiyun.com/belloc_li/article/details/123945364</guid><author>belloc_li</author><pubDate>Sun, 03 Apr 2022 21:48:24 +0800</pubDate><description><![CDATA[今天用递归的方法来求一下1-100的和。
代码如下：
function  fn1(n){
  //跳出条件
  if(n == 1) return 1
  //逻辑  n+n-1 的和
  return n+fn1(n-1)
}

console.log(fn1(100))


]]></description><category></category></item><item><title><![CDATA[【webApi】深入浅出“自定义属性”]]></title><link>https://blog.youkuaiyun.com/belloc_li/article/details/123780459</link><guid>https://blog.youkuaiyun.com/belloc_li/article/details/123780459</guid><author>belloc_li</author><pubDate>Sun, 27 Mar 2022 20:23:25 +0800</pubDate><description><![CDATA[自定义属性，顾名思义就是自己定义的html本身没有的属性。它的作用就是存储数据。
而操作自定义属性，就需要用到attribute语法。
attribute

setAttribute(‘属性名’，属性值):设置属性
getAttribute(‘属性名’)：获取属性
removeAttribute(‘属性名’)：移除属性

接下来看一个案例来看一下attribute的实际应用
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
  &lt;head&gt;
    &lt]]></description><category></category></item><item><title><![CDATA[【Git】手把手教你使用git管理代码 （下）]]></title><link>https://blog.youkuaiyun.com/belloc_li/article/details/123744287</link><guid>https://blog.youkuaiyun.com/belloc_li/article/details/123744287</guid><author>belloc_li</author><pubDate>Fri, 25 Mar 2022 20:15:12 +0800</pubDate><description><![CDATA[在上讲了Git的来由和基本的知识点，以及代码的推送。今天讲讲在工作中的多人协作的用法，
多人协作
管理员角色

创建远程仓库 或 创建本地仓库之后推送到远程仓库

初始化一个项目，git init
添加初始的代码到暂存区 git add .
提交初始的代码到本地仓库 git commit -m “提交了初始的代码”


推送到远程仓库

git remote add origin SSH地址
git push -u origin master


邀请成员
开发（add / commit / pull / ]]></description><category></category></item><item><title><![CDATA[【Git】手把手教你使用git管理代码 （上）]]></title><link>https://blog.youkuaiyun.com/belloc_li/article/details/123720952</link><guid>https://blog.youkuaiyun.com/belloc_li/article/details/123720952</guid><author>belloc_li</author><pubDate>Thu, 24 Mar 2022 22:04:35 +0800</pubDate><description><![CDATA[Git 是一个开源的分布式版本控制系统，是目前世界上最先进、最流行的版本控制系统。可以快速高效地处理从很小到非常大的项目版本管理。
特点：项目越大越复杂，协同开发者越多，越能体现出 Git 的高性能和高可用性！
今天我们从头开始来使用git管理代码。
1.下载并安装Git
https://git-scm.com/downloads
根据自己的操作系统，下载对应的git安装包。
安装包下载好之后：


双击，然后一直下一步安装即可（不要修改安装路径，容易出现乱码）。


不要安装到含有中文的路径中。比如，不要]]></description><category></category></item><item><title><![CDATA[[js案例]tab栏切换]]></title><link>https://blog.youkuaiyun.com/belloc_li/article/details/123341887</link><guid>https://blog.youkuaiyun.com/belloc_li/article/details/123341887</guid><author>belloc_li</author><pubDate>Mon, 07 Mar 2022 22:42:20 +0800</pubDate><description><![CDATA[今天来看一个tab栏切换的小案例
效果如下：

思路分析：

这个效果用到了js中webApi的排他思想，之前的文章中有提到过。
再就是css中display的应用
代码如下：

&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head lang="en"&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;style type="text/css"&gt;
        ]]></description><category></category></item><item><title><![CDATA[[js小品一则] 实现一下倒计时效果]]></title><link>https://blog.youkuaiyun.com/belloc_li/article/details/123214337</link><guid>https://blog.youkuaiyun.com/belloc_li/article/details/123214337</guid><author>belloc_li</author><pubDate>Tue, 01 Mar 2022 20:06:02 +0800</pubDate><description><![CDATA[今天用js的定时器来实现一下倒计时的效果

首先分析一下思路。
开启永久定时器，间隔时间1s
  (1)获取 时h  分m  秒s 文本innerText
  (2)秒自减  s--
  (3)如果 s &lt; 0 :  s = 59 , m--
  (4)如果 m &lt; 0 :  m = 59, h--
  (5)如果 m h s 小于10，则补0
  (6)将计算之后的h m s 重新赋值给页面元素innerText
  (7)如果 h == 0 &amp;&amp; m == 0 &amp;&a]]></description><category></category></item><item><title><![CDATA[【js案例】讲一下webApi中的核心的“排他思想”算法]]></title><link>https://blog.youkuaiyun.com/belloc_li/article/details/123169080</link><guid>https://blog.youkuaiyun.com/belloc_li/article/details/123169080</guid><author>belloc_li</author><pubDate>Sun, 27 Feb 2022 20:14:42 +0800</pubDate><description><![CDATA[如果有同一组元素，我们想要某一个元素实现某种样式， 需要用到循环的排他思想算法：

所有元素全部清除样式（干掉所有人）
给当前元素设置样式 （只复活自己）
注意顺序不能颠倒，首先干掉其他人，再复活（设置）自己

接下来看案例
案例一：

这一排5个按钮，只有在我点到哪个的时候哪个才变红，其他的都是默认样式。要实现这个效果，用css也可以实现，但今天我们用js中“排他思想”算法来实现它。
代码如下：
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
  &lt;head]]></description><category></category></item><item><title><![CDATA[【js案例】webApi实现隔行变色]]></title><link>https://blog.youkuaiyun.com/belloc_li/article/details/123154838</link><guid>https://blog.youkuaiyun.com/belloc_li/article/details/123154838</guid><author>belloc_li</author><pubDate>Sat, 26 Feb 2022 19:56:22 +0800</pubDate><description><![CDATA[今天用js中的webApi来实现隔行变色的效果。




目的是 点击btn 修改所有li元素颜色（单行：橙色  双行：粉色）


单行和双行和可以使用if判断，


步骤：
1.获取元素
2.注册事件
3.事件处理
代码如下：
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;

&lt;head&gt;
  &lt;meta charset="UTF-8" /&gt;
  &lt;meta name="viewport" content="wi]]></description><category></category></item></channel></rss>