<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[self_challenge的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/self_challenge</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; self_challenge]]></copyright><item><title><![CDATA[vue 竖向纵向仿表格 动态渲染表头表格 根据id填充单元格]]></title><link>https://blog.youkuaiyun.com/self_challenge/article/details/111354431</link><guid>https://blog.youkuaiyun.com/self_challenge/article/details/111354431</guid><author>self_challenge</author><pubDate>Fri, 18 Dec 2020 14:04:13 +0800</pubDate><description><![CDATA[关于布局这里不多说，上篇为此发过一篇，因需求布局稍微改动一下。移步至布局篇。如产品所说，一些数据是已封装好的，最后不要轻易动，既然这样、原本简单的需求必须由多接口返回数据，前端进行拼接并填充。后端提供3个接口供提取数据，分别是顶部任务对象，左侧树形结构，中间填充区域。
加粗样式

...]]></description><category></category></item><item><title><![CDATA[js倒计时]]></title><link>https://blog.youkuaiyun.com/self_challenge/article/details/111036437</link><guid>https://blog.youkuaiyun.com/self_challenge/article/details/111036437</guid><author>self_challenge</author><pubDate>Fri, 11 Dec 2020 15:34:00 +0800</pubDate><description><![CDATA[&lt;html&gt;  
  &lt;head&gt;  
      &lt;meta charset="UTF-8"&gt;  
      &lt;title&gt;js简单时分秒倒计时&lt;/title&gt;  
 &lt;/head&gt;  
 &lt;body onload="countTime()" &gt;  
     &lt;div&gt;  
         &lt;span id="_d"&gt;00&lt;/span&gt;  
         &lt;span id]]></description><category></category></item><item><title><![CDATA[vue竖向表格 - 利用element实现解决纵向循环仿表格布局]]></title><link>https://blog.youkuaiyun.com/self_challenge/article/details/111029179</link><guid>https://blog.youkuaiyun.com/self_challenge/article/details/111029179</guid><author>self_challenge</author><pubDate>Fri, 11 Dec 2020 09:56:49 +0800</pubDate><description><![CDATA[实现效果图

需求是完成纵向显示数据，支持表格分组、表头数据均可动态渲染
&lt;template&gt;
    &lt;div class="box"&gt;
        &lt;div class="tableHead"&gt;
            &lt;template v-for="(i,j) in tableHead"&gt;
                &lt;el-row :key="j"&gt;
                    &lt;el-col :span="i.]]></description><category></category></item><item><title><![CDATA[js+jq实现简单分割线分页器]]></title><link>https://blog.youkuaiyun.com/self_challenge/article/details/110822322</link><guid>https://blog.youkuaiyun.com/self_challenge/article/details/110822322</guid><author>self_challenge</author><pubDate>Mon, 07 Dec 2020 17:00:43 +0800</pubDate><description><![CDATA[分享这篇博文完全是因为懒得用插件…实现一些小功能，不过代码也确实简单，毫无技术可言，算是记录一下吧。路过的大神忍不住轻喷~
&lt;span class="btn"&gt;
     &lt;span id="first_page"&gt;首页&lt;/span&gt;
     &lt;span id="prev_page"&gt;上一页&lt;/span&gt;
        &lt;span&gt;
           &lt;span id="current_page"&gt;1&lt;/spa]]></description><category></category></item><item><title><![CDATA[微信小程序传值]]></title><link>https://blog.youkuaiyun.com/self_challenge/article/details/106933860</link><guid>https://blog.youkuaiyun.com/self_challenge/article/details/106933860</guid><author>self_challenge</author><pubDate>Wed, 24 Jun 2020 21:24:54 +0800</pubDate><description><![CDATA[1、页面跳转传值
&lt;button bindtap="byValueFun"&gt;点击传值&lt;/button&gt;

// 点击函数
byValueFun: function () {//点击事件
	wx.navigateTo({
	url: '../xxx?id=xxx'//传值
})

// 页面创建时获取数据
onLoad: function (options) {
	console.log('data',options)
}


...]]></description><category></category></item><item><title><![CDATA[微信小程序路由跳转]]></title><link>https://blog.youkuaiyun.com/self_challenge/article/details/106934059</link><guid>https://blog.youkuaiyun.com/self_challenge/article/details/106934059</guid><author>self_challenge</author><pubDate>Wed, 24 Jun 2020 00:12:23 +0800</pubDate><description><![CDATA[wx.switchTab()
跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
wx.reLaunch()
关闭所有页面，打开到应用内的某个页面（包括 tabBar页面）
wx.redirectTo()
关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
wx.navigateTo()
保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层
wx.navigateBac.]]></description><category></category></item><item><title><![CDATA[微信小程序生命周期]]></title><link>https://blog.youkuaiyun.com/self_challenge/article/details/106912145</link><guid>https://blog.youkuaiyun.com/self_challenge/article/details/106912145</guid><author>self_challenge</author><pubDate>Mon, 22 Jun 2020 23:36:01 +0800</pubDate><description><![CDATA[什么是生命周期？通俗来说比如像是一个人的生老病死，换成微信小程序的角度来看就是创建、开始、暂停、唤起、停止、销毁的一个过程。
1、应用生命周期

当用户首次打开小程序，触发 onLaunch()    这个全局中只触发一次
onShow() 监听小程序显示 当小程序启动，或者从后台进入前台显示，都会触发 onShow
onHide () 监听小程序隐藏 当小程序从前台进入后台，会触发 onHide

App({
  onLaunch: function (options) {
    console.log]]></description><category></category></item><item><title><![CDATA[js判断当前浏览器是否是在移动端]]></title><link>https://blog.youkuaiyun.com/self_challenge/article/details/106865694</link><guid>https://blog.youkuaiyun.com/self_challenge/article/details/106865694</guid><author>self_challenge</author><pubDate>Fri, 19 Jun 2020 23:46:41 +0800</pubDate><description><![CDATA[判断当前浏览器是否是在移动端
if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
  // console.log('移动端');
  this.isPc=false;
} else {
  // co]]></description><category></category></item><item><title><![CDATA[JS数组与字符串之间相互转换]]></title><link>https://blog.youkuaiyun.com/self_challenge/article/details/106845121</link><guid>https://blog.youkuaiyun.com/self_challenge/article/details/106845121</guid><author>self_challenge</author><pubDate>Thu, 18 Jun 2020 23:08:46 +0800</pubDate><description><![CDATA[toString()	将数组转换成一个字符串
toLocalString()	把数组转换成本地约定的字符串
join()	将数组元素连接起来以构建一个字符串


toString()
数组中 toString() 方法能够把每个元素转换为字符串，然后用逗号连接输出显示。

var a = [1,2,3,4,5,6,7,8,9,0];
var s = a.toString();  //把数组转换为字符串
console.log(s);  //返回字符串“1,2,3,4,5,6,7,8,9,0”
consol.]]></description><category></category></item><item><title><![CDATA[js时钟代码]]></title><link>https://blog.youkuaiyun.com/self_challenge/article/details/106821121</link><guid>https://blog.youkuaiyun.com/self_challenge/article/details/106821121</guid><author>self_challenge</author><pubDate>Thu, 18 Jun 2020 00:10:21 +0800</pubDate><description><![CDATA[html
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
&lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
&lt;title&gt;独家自制&lt;/title]]></description><category></category></item><item><title><![CDATA[js实现随机文字大小及颜色]]></title><link>https://blog.youkuaiyun.com/self_challenge/article/details/106797149</link><guid>https://blog.youkuaiyun.com/self_challenge/article/details/106797149</guid><author>self_challenge</author><pubDate>Tue, 16 Jun 2020 22:43:06 +0800</pubDate><description><![CDATA[&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;

&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
    &lt;title&gt;Do]]></description><category></category></item><item><title><![CDATA[vue后台管理系统用户的修改和删除]]></title><link>https://blog.youkuaiyun.com/self_challenge/article/details/106773236</link><guid>https://blog.youkuaiyun.com/self_challenge/article/details/106773236</guid><author>self_challenge</author><pubDate>Mon, 15 Jun 2020 23:06:49 +0800</pubDate><description><![CDATA[在CustomerDetails.vue的详情页面添加删除和修改按钮，删除的逻辑比较简单，直接通过按钮的click事件来请求网络完成删除，而编辑事件需要我们去新建一个Edit.vue组件来完成，Edit.vue和Add.vue很像，仿照来写就好
CustomerDetails.vue
&lt;template&gt;
  &lt;div class="details container" &gt;
    &lt;router-link to="/" class="btn btn-default"&gt;返]]></description><category></category></item><item><title><![CDATA[vue中axios封装思路]]></title><link>https://blog.youkuaiyun.com/self_challenge/article/details/106757031</link><guid>https://blog.youkuaiyun.com/self_challenge/article/details/106757031</guid><author>self_challenge</author><pubDate>Mon, 15 Jun 2020 10:06:01 +0800</pubDate><description><![CDATA[第一步安装
npm install axios; // 安装axios

第二步引入
我会在项目的src目录中，新建一个http文件夹，在里面新建一个request.js和一个api.js文件以及port.js。request.js文件用来封装我们的axios，api.js用来统一管理我们的接口，port.js管理我们请求的路径。
// 在request.js中引入axios
import axios from 'axios'; // 引入axios

设置接口请求前缀
// 环境的切换
if (proce]]></description><category></category></item><item><title><![CDATA[javascript生成随机验证码并验证]]></title><link>https://blog.youkuaiyun.com/self_challenge/article/details/106725812</link><guid>https://blog.youkuaiyun.com/self_challenge/article/details/106725812</guid><author>self_challenge</author><pubDate>Fri, 12 Jun 2020 23:46:34 +0800</pubDate><description><![CDATA[布局
	&lt;span id="code" style="background-color: #ccc"&gt;1010&lt;/span&gt;
    &lt;input type="button" value="刷新" onclick="randomCode()"&gt;&lt;br&gt;
    &lt;input type="text" id="txt" placeholder="请输入验证码"&gt;
    &lt;input type="button" value="提交" onclic]]></description><category></category></item><item><title><![CDATA[给dom元素绑定js事件的三种方式]]></title><link>https://blog.youkuaiyun.com/self_challenge/article/details/106534464</link><guid>https://blog.youkuaiyun.com/self_challenge/article/details/106534464</guid><author>self_challenge</author><pubDate>Wed, 03 Jun 2020 22:40:51 +0800</pubDate><description><![CDATA[在html标签中直接绑定；
js中获取到相应的dom元素后绑定；
使用addEventListener方法实现绑定；

&lt;!--html内直接绑定 --&gt;
    &lt;button onclick="alert('执行了html绑定的方法')"&gt;&lt;/button&gt;

这种写法维护性差，用的很少。
&lt;button class="btn"&gt;dom0级绑定事件&lt;/button&gt;
var btn = document.querySelector('.btn.]]></description><category></category></item><item><title><![CDATA[js的new操作符做了什么操作]]></title><link>https://blog.youkuaiyun.com/self_challenge/article/details/106505841</link><guid>https://blog.youkuaiyun.com/self_challenge/article/details/106505841</guid><author>self_challenge</author><pubDate>Tue, 02 Jun 2020 21:46:41 +0800</pubDate><description><![CDATA[new一个构造函数时，中间有什么过程？

创建了一个空对象obj
将构造函数的prototype赋给对象的__proto__
构造函数对象作用域及this指针指向obj
返回对象

// 定义构造函数
function Person (name='李四', age=20) {
    this.name = name
    this.age = age
    this.action = function () {
        console.log(`${this.name}今年${this.age]]></description><category></category></item><item><title><![CDATA[vue自定义简易封装弹框组件]]></title><link>https://blog.youkuaiyun.com/self_challenge/article/details/106481904</link><guid>https://blog.youkuaiyun.com/self_challenge/article/details/106481904</guid><author>self_challenge</author><pubDate>Mon, 01 Jun 2020 21:43:06 +0800</pubDate><description><![CDATA[&lt;template&gt;
    &lt;div class="box"&gt;
        &lt;div class="shade" v-show="maskLayer"/&gt;
        &lt;div class="showElementBox" @click="closeEvent &amp;&amp; closeTier()"&gt;
            &lt;div class="showElementTier"&gt;
                &lt;slo]]></description><category></category></item><item><title><![CDATA[vue监听指定元素滚动返回顶部]]></title><link>https://blog.youkuaiyun.com/self_challenge/article/details/106415965</link><guid>https://blog.youkuaiyun.com/self_challenge/article/details/106415965</guid><author>self_challenge</author><pubDate>Thu, 28 May 2020 23:37:18 +0800</pubDate><description><![CDATA[&lt;template&gt;
    &lt;div class="box" ref="home"&gt;
        &lt;div class="data"&gt;
            &lt;template v-for="(item,index) in list"&gt;
                &lt;p :key="index"&gt;{{item}}&lt;/p&gt;
            &lt;/template&gt;
        &lt;/div&gt;
 ]]></description><category></category></item><item><title><![CDATA[vue中防抖]]></title><link>https://blog.youkuaiyun.com/self_challenge/article/details/106390964</link><guid>https://blog.youkuaiyun.com/self_challenge/article/details/106390964</guid><author>self_challenge</author><pubDate>Wed, 27 May 2020 21:31:09 +0800</pubDate><description><![CDATA[防抖是我们在开发中很常用优化性能的方式，使用场景文本框输入搜索（避免连续输入时多次去请求接口）

export function antiShake(fn, delay) {
    var delay = delay || 200;
    // 记录上一次触发的定时器
    var timer = null;
    return function () {
        const th = this;
        var args = arguments;
        if (time.]]></description><category></category></item><item><title><![CDATA[vue函数节流]]></title><link>https://blog.youkuaiyun.com/self_challenge/article/details/106366630</link><guid>https://blog.youkuaiyun.com/self_challenge/article/details/106366630</guid><author>self_challenge</author><pubDate>Tue, 26 May 2020 22:34:45 +0800</pubDate><description><![CDATA[写项目时会用到监听scroll滚动条滚动事件 。这个事件触发的很频繁，当监听器的回调函数越多越复杂，对性能影响越来越严重。我们可以利用定时器，让事件的回调函数在监听中按指定的时间间隔触发，而不是每像素移动都触发。

function throttle(fn,delay){
  // 记录上一次函数触发的时间以及定义一个定时器
  var lastTime,timer;
  // 延迟多长时间
  var delay = delay || 200;
  return function() {
    var.]]></description><category></category></item></channel></rss>