<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[IKUN__的博客]]></title><description><![CDATA[]]></description><link>https://blog.csdn.net/IKUN__</link><language>zh-cn</language><generator>https://blog.csdn.net/</generator><copyright><![CDATA[Copyright &copy; IKUN__]]></copyright><item><title><![CDATA[vue中如何自定义指令directive]]></title><link>https://blog.csdn.net/IKUN__/article/details/118292702</link><guid>https://blog.csdn.net/IKUN__/article/details/118292702</guid><author>IKUN__</author><pubDate>Mon, 28 Jun 2021 09:14:44 +0800</pubDate><description><![CDATA[自定义指令的理解
.我们看到的v-开头的行内属性，都是指令，不同的指令可以完成或实现不同的功能，对普通 DOM元素进行底层操作，这时候就会用到自定义指令。除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令
如何自定义指令
注册一个自定义指令有全局注册与局部注册
全局注册注册主要是用过Vue.directive方法进行注册
Vue.directive第一个参数是指令的名字（不需要写上v-前缀），第二个参数可以是对象数据，也可以是一个指令函数
// 注册一个全局自定义]]></description><category></category></item><item><title><![CDATA[vm.$nextTick 是干什么用的？为什么用？]]></title><link>https://blog.csdn.net/IKUN__/article/details/118092453</link><guid>https://blog.csdn.net/IKUN__/article/details/118092453</guid><author>IKUN__</author><pubDate>Mon, 21 Jun 2021 18:54:14 +0800</pubDate><description><![CDATA[简单粗暴的回答
this.$nextTick是一个回调函数，这个回调函数会在下次 DOM 更新结束之后执行。
Vue的数据更新是采用延迟异步更新的，就是说当我们修改了数据之后，页面并不会马上就更新,如果这个时候我们通过DOM操作来获取数据的话，获取的还是之前的旧的数据，这个时候我们就可以使用$nextTick方法，因为这个方法知道什么时候DOM更新完成。
使用场景
Vue的生命周期函数created()执行的时候DOM 其实并未进行任何渲染,这个时候我们可以要进
行DOM操作的代码放到Vue.nextTic]]></description><category></category></item><item><title><![CDATA[vue中data为什么是一个函数]]></title><link>https://blog.csdn.net/IKUN__/article/details/118086287</link><guid>https://blog.csdn.net/IKUN__/article/details/118086287</guid><author>IKUN__</author><pubDate>Mon, 21 Jun 2021 14:40:56 +0800</pubDate><description><![CDATA[vue中的data是一个对象类型，对象类型的数据是按引用传值的，这就会导致所有组件的实例都共享同一份数据，这是不对的，我们要的是每个组件实例都是独立的
为了解决对象类型数据共享的问题，我们需要将 data 定义成一个函数，每个实例需要通过调用函数生成一个独立的数据对象
总结
根实例对象data可以是对象也可以是函数（根实例是单例），不会产生数据污染情况
组件实例对象data必须为函数，目的是为了防止多个组件实例对象之间共用一个data，产生数据污染。采用函数的形式，initData时会将其作为工厂函数都会返]]></description><category></category></item><item><title><![CDATA[函数防抖和函数节流]]></title><link>https://blog.csdn.net/IKUN__/article/details/118013374</link><guid>https://blog.csdn.net/IKUN__/article/details/118013374</guid><author>IKUN__</author><pubDate>Fri, 18 Jun 2021 07:50:38 +0800</pubDate><description><![CDATA[使用节流防抖函数(性能优化)
那么在 vue 中怎么使用呢：
在公共方法中（如 untils.js 中），加入函数防抖和节流方法
// 防抖
export function _debounce(fn, delay) {
    var delay = delay || 200;
    var timer;
    return function () {
        var th = this;
        var args = arguments;
        if (timer) {
  ]]></description><category></category></item><item><title><![CDATA[双向数据绑定原理]]></title><link>https://blog.csdn.net/IKUN__/article/details/117964965</link><guid>https://blog.csdn.net/IKUN__/article/details/117964965</guid><author>IKUN__</author><pubDate>Wed, 16 Jun 2021 19:34:13 +0800</pubDate><description><![CDATA[vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。

具体步骤：
第一步： 需要observer的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter
这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化
第二步： compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并.]]></description><category></category></item><item><title><![CDATA[iframe优缺点]]></title><link>https://blog.csdn.net/IKUN__/article/details/117911030</link><guid>https://blog.csdn.net/IKUN__/article/details/117911030</guid><author>IKUN__</author><pubDate>Mon, 14 Jun 2021 18:45:29 +0800</pubDate><description><![CDATA[iframe的优点：


iframe能够原封不动的把嵌入的网页展现出来。


如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。


网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。


如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。


iframe的缺点：


会产生很多页面，不容易管理。


iframe框架结构有时会让人感到迷惑，如果框架个数多]]></description><category></category></item><item><title><![CDATA[项目中如何修改element-ui的默认样式]]></title><link>https://blog.csdn.net/IKUN__/article/details/117789719</link><guid>https://blog.csdn.net/IKUN__/article/details/117789719</guid><author>IKUN__</author><pubDate>Thu, 10 Jun 2021 19:21:52 +0800</pubDate><description><![CDATA[项目中如何修改element-ui的默认样式？


原因是因为我们在使用vue编写css样式时,会在style添加scoped属性


添加了scoped的组件无法修改的样式，去掉scoped就可以了。


vue中的scoped属性的效果主要通过PostCSS转译实现，


那么有没有办法在不改变原来写好的css样式的情况，修改默认的element-ui样式呢？
解决方法

在样式外新增一个样式不添加scoped

&lt;style&gt;
	.my{
		margin: 20px;
	}
	.my .]]></description><category></category></item><item><title><![CDATA[Vue之ElementUI Form表单校验]]></title><link>https://blog.csdn.net/IKUN__/article/details/117673109</link><guid>https://blog.csdn.net/IKUN__/article/details/117673109</guid><author>IKUN__</author><pubDate>Mon, 07 Jun 2021 20:08:25 +0800</pubDate><description><![CDATA[表单校验是前端开发过程中最常用到的功能之一，根据个人的工作经验总结在此对表单校验功能的基础用法进行整理说明

首先对el-form标签中的几个关键属性进行说明，


ref: 当前表单的唯一标识


model: 表单绑定的对象


rules: 字段校验规则



而最关键的一点是el-form-item标签中的prop属性，属性值必须与绑定的字段名称保持一致。



rules字段用来定义各个字段具体的校验规则，用法请查阅开篇的demo示例，其中required标识字段是否必填，message为校验提.]]></description><category></category></item><item><title><![CDATA[Nginx的安装以及访问]]></title><link>https://blog.csdn.net/IKUN__/article/details/117653305</link><guid>https://blog.csdn.net/IKUN__/article/details/117653305</guid><author>IKUN__</author><pubDate>Mon, 07 Jun 2021 11:30:28 +0800</pubDate><description><![CDATA[参考文章: https://www.runoob.com/w3cnote/nginx-setup-intro.html.
序言


Nginx是lgor Sysoev为俄罗斯访问量第二的rambler.ru站点设计开发的。从2004年发布至今，凭借开源的力量，已经接近成熟与完善。


Nginx功能丰富，可作为HTTP服务器，也可作为反向代理服务器，邮件服务器。支持FastCGI、SSL、Virtual Host、URL Rewrite、Gzip等功能。并且支持很多第三方的模块扩展。


Nginx的稳定性]]></description><category></category></item><item><title><![CDATA[webpack打包优化]]></title><link>https://blog.csdn.net/IKUN__/article/details/117563501</link><guid>https://blog.csdn.net/IKUN__/article/details/117563501</guid><author>IKUN__</author><pubDate>Fri, 04 Jun 2021 16:00:08 +0800</pubDate><description><![CDATA[webpack打包原理

把所有依赖打包成一个 bundle.js 文件，通过代码分割成单元片段并按需加载。

webpack的优势
(1) webpack 是以 commonJS 的形式来书写脚本滴，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。
(2)能被模块化的不仅仅是 JS 了。
(3) 开发便捷，能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等。
(4)扩展性强，插件机制完善
webpack优化方法：
1.移除插件某些包，减少插件体积

比如说通用]]></description><category></category></item><item><title><![CDATA[使用keep-alive缓存项目]]></title><link>https://blog.csdn.net/IKUN__/article/details/117528262</link><guid>https://blog.csdn.net/IKUN__/article/details/117528262</guid><author>IKUN__</author><pubDate>Thu, 03 Jun 2021 16:54:03 +0800</pubDate><description><![CDATA[缓存整个项目
在 App.vue 里面
如果需要缓存整个项目，则如下设置(直接包裹根router-view即可)：
&lt;template&gt;
  &lt;div id="app"&gt;
  	&lt;keep-alive&gt;
      &lt;router-view/&gt;
    &lt;/keep-alive&gt;
  &lt;/div&gt;
&lt;/template&gt;使用keepAlive后生命周期发生了哪些变化



&lt;script&gt;
export defa]]></description><category></category></item><item><title><![CDATA[vant-ui的按需引用]]></title><link>https://blog.csdn.net/IKUN__/article/details/117526412</link><guid>https://blog.csdn.net/IKUN__/article/details/117526412</guid><author>IKUN__</author><pubDate>Thu, 03 Jun 2021 16:21:32 +0800</pubDate><description><![CDATA[首先安装vant-ui插件

如果你想按需引入一定要安装按需加载的配置

#先安装vant-ui
cnpm install vant-ui --save	

# 再安装按需引入的插件
cnpm i babel-plugin-import -D


babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式

在babel.config.js中添加配置
plugins: [
    ['import', {
      libraryNa]]></description><category></category></item><item><title><![CDATA[axios拦截，api统一管理]]></title><link>https://blog.csdn.net/IKUN__/article/details/117513248</link><guid>https://blog.csdn.net/IKUN__/article/details/117513248</guid><author>IKUN__</author><pubDate>Thu, 03 Jun 2021 15:17:29 +0800</pubDate><description><![CDATA[简介
axios的封装和api接口的统一管理，其实主要目的就是在帮助我们简化代码和利于后期的更新维护。
在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。他有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。所以我们的尤大大也是果断放弃了对其官方库vue-resource的维护，直接推荐我们使用axios库
axios封装步骤
1.安装axios
    npm install axi]]></description><category></category></item><item><title><![CDATA[多环境变量配置]]></title><link>https://blog.csdn.net/IKUN__/article/details/117474314</link><guid>https://blog.csdn.net/IKUN__/article/details/117474314</guid><author>IKUN__</author><pubDate>Wed, 02 Jun 2021 17:05:12 +0800</pubDate><description><![CDATA[package.json 里的 scripts 配置 serve stage build，通过 --mode xxx 来执行不同环境

通过 npm run serve 启动本地 , 执行 development
通过 npm run stage 打包测试 , 执行 staging
通过 npm run build 打包正式 , 执行 production

"scripts": {
  "serve": "vue-cli-service serve --open",
  "stage": "vue-cli]]></description><category></category></item><item><title><![CDATA[去哪儿项目开发流程]]></title><link>https://blog.csdn.net/IKUN__/article/details/117459963</link><guid>https://blog.csdn.net/IKUN__/article/details/117459963</guid><author>IKUN__</author><pubDate>Wed, 02 Jun 2021 13:52:52 +0800</pubDate><description><![CDATA[1. 确定项目技术栈
vue2.0 + vue-cli3/4 + vue-router + axios + vuex + vant + rem + sass + webpack
2. 搭建项目

yarn，npm(cnpm) 包管理工具
yarn add axios -S
cnpm install axios -S
-S: --save-dev 生产环境的依赖 （dependencies）
-D: --dev 开发环境的依赖 （devDependencies）

2.1 从0搭建

指令

vue crea]]></description><category></category></item><item><title><![CDATA[css中过渡transition]]></title><link>https://blog.csdn.net/IKUN__/article/details/117450221</link><guid>https://blog.csdn.net/IKUN__/article/details/117450221</guid><author>IKUN__</author><pubDate>Tue, 01 Jun 2021 19:43:56 +0800</pubDate><description><![CDATA[定义
过渡transition是一个复合属性，包括transition-property、transition-duration、transition-timing-function、transition-delay这四个子属性。通过这四个子属性的配合来完成一个完整的过渡效果

transition-property: 过渡属性(默认值为all)
transition-duration: 过渡持续时间(默认值为0s)
transiton-timing-function: 过渡函数(默认值为ease函数)
t]]></description><category></category></item><item><title><![CDATA[keep-alive缓存]]></title><link>https://blog.csdn.net/IKUN__/article/details/117449508</link><guid>https://blog.csdn.net/IKUN__/article/details/117449508</guid><author>IKUN__</author><pubDate>Tue, 01 Jun 2021 19:02:53 +0800</pubDate><description><![CDATA[概念
keep-alive 是vue的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和transition相似，keep-alive 是一个抽象组件：它自身不会渲染成一个DOM元素，也不会出现在父组件链中
作用
在组件切换过程中把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验。
原理
在 created钩子函数调用时将需要缓存的 VNode 节点保存在 this.cache 中／在 render（页面渲染） 时，如果 VNode 的 name 符]]></description><category></category></item><item><title><![CDATA[js中的事件委托]]></title><link>https://blog.csdn.net/IKUN__/article/details/117374020</link><guid>https://blog.csdn.net/IKUN__/article/details/117374020</guid><author>IKUN__</author><pubDate>Fri, 28 May 2021 20:51:57 +0800</pubDate><description><![CDATA[一张图看懂事件委托

概念

事件委托，又名事件代理。事件委托就是利用事件冒泡，就是把子元素的事件都绑定到父元素上。如果子元素阻止了事件冒泡，那么委托也就没法实现了。

为什么要用事件委托：

一般来说，dom需要有事件处理程序，我们都会直接给它设事件处理程序就好了，那如果是很多的dom需要添加事件处理呢？比如我们有100个li，每个li都有相同的click点击事件，可能我们会用for循环的方法，来遍历所有的li，然后给它们添加事件，那这么做会存在什么影响呢？



在JavaScript中，添加到页面上的]]></description><category></category></item><item><title><![CDATA[js中闭包知识点]]></title><link>https://blog.csdn.net/IKUN__/article/details/117372287</link><guid>https://blog.csdn.net/IKUN__/article/details/117372287</guid><author>IKUN__</author><pubDate>Fri, 28 May 2021 19:42:58 +0800</pubDate><description><![CDATA[如何产生闭包（closure）


上传代码：
// 函数作为返回值
function create() {
    const a = 100
    return function () {
        console.log(a)
    }
}

const fn = create()
const a = 200
fn() // 100

// 函数作为参数被传递
function print(fn) {
    const a = 200
    fn()
}
const a = 100
fu]]></description><category></category></item><item><title><![CDATA[js中let、const、var的区别]]></title><link>https://blog.csdn.net/IKUN__/article/details/117371387</link><guid>https://blog.csdn.net/IKUN__/article/details/117371387</guid><author>IKUN__</author><pubDate>Fri, 28 May 2021 18:55:57 +0800</pubDate><description><![CDATA[在ES5中，声明变量只有var和function两种形式。但是因为var声明的变量会有一定的缺点，ES6提出了使用let和cinst声明变量，弥补了ES5中var的缺点
1.是否存在变量提升？


var声明的变量存在变量提升(将变量提升到当前作用域的顶部)。即变量可以在声明之前调用，值为undefined


let 和 const不存在变量提升。即它们所声明的变量一定要在声明后使用，否则报ReferenceError错


console.log(f) //undefined
var f = 1 ;

]]></description><category></category></item></channel></rss>