<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[kun_moon的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/kun_moon</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; kun_moon]]></copyright><item><title><![CDATA[vue基础]]></title><link>https://blog.youkuaiyun.com/kun_moon/article/details/102863876</link><guid>https://blog.youkuaiyun.com/kun_moon/article/details/102863876</guid><author>kun_moon</author><pubDate>Fri, 01 Nov 2019 20:14:49 +0800</pubDate><description><![CDATA[一、Vue初步
1.1 Vue简单认识
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vfue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
vue.js、Angular.j...]]></description><category></category></item><item><title><![CDATA[关于mui轮播图的相关问题及解决]]></title><link>https://blog.youkuaiyun.com/kun_moon/article/details/102809768</link><guid>https://blog.youkuaiyun.com/kun_moon/article/details/102809768</guid><author>kun_moon</author><pubDate>Tue, 29 Oct 2019 22:18:07 +0800</pubDate><description><![CDATA[直接引入文档，轮播图只能手动切换，不能自动轮播，是初始化代码有问题
mui写的实例，div代码块
&lt;div id="slider" class="mui-slider" &gt;
    &lt;div class="mui-slider-group mui-slider-loop" id="stul"&gt;
        &lt;!-- 额外增加的一个节点(循环轮播：第一个节点是最后一...]]></description><category></category></item><item><title><![CDATA[响应式布局和自适应布局]]></title><link>https://blog.youkuaiyun.com/kun_moon/article/details/102712389</link><guid>https://blog.youkuaiyun.com/kun_moon/article/details/102712389</guid><author>kun_moon</author><pubDate>Wed, 23 Oct 2019 22:25:25 +0800</pubDate><description><![CDATA[注：响应式布局等于流动网格布局，而自适应布局等于使用固定分割点来进行布局。
自适应布局给了你更多设计的空间，因为你只用考虑几种不同的状态。而在响应式布局中你却得考虑上百种不同的状态。虽然绝大部分状态差异较小，但仍然也算做差异。它使得把握设计最终效果变得更难，同样让响应式布局更加的难以测试和预测。但同时说难，这也算是响应式布局美的所在。在考虑到表层级别不确定因素的过程中，你也会因此更好的掌握一些基础...]]></description><category></category></item><item><title><![CDATA[express]]></title><link>https://blog.youkuaiyun.com/kun_moon/article/details/102690047</link><guid>https://blog.youkuaiyun.com/kun_moon/article/details/102690047</guid><author>kun_moon</author><pubDate>Tue, 22 Oct 2019 20:32:44 +0800</pubDate><description><![CDATA[基本结构
先回顾一下 express 使用的的过程，首先是把模块倒入，然后当做方法执行，在返回值中调用 use 处理路由，调用 listen 监听端口。
const express = require('express')
const app = express()
app.use('/home', (req, res) =&gt; {
  res.end('home')
})
app.liste...]]></description><category></category></item><item><title><![CDATA[npm]]></title><link>https://blog.youkuaiyun.com/kun_moon/article/details/102671491</link><guid>https://blog.youkuaiyun.com/kun_moon/article/details/102671491</guid><author>kun_moon</author><pubDate>Mon, 21 Oct 2019 20:38:24 +0800</pubDate><description><![CDATA[npm 包管理工具
1. 什么是 npm ?
npm是 Node 的包管理工具 ，是全球最大的开源库生态系统
官网 https://www.npmjs.com/
2. 常见命令
初始化项目
    $ npm init
    $ npm init --yes 默认配置
 
下载命令:
    npm init						 初始化包管理文件
    npm install 包名				  	下载
...]]></description><category></category></item><item><title><![CDATA[rem使用]]></title><link>https://blog.youkuaiyun.com/kun_moon/article/details/102654617</link><guid>https://blog.youkuaiyun.com/kun_moon/article/details/102654617</guid><author>kun_moon</author><pubDate>Sun, 20 Oct 2019 22:08:03 +0800</pubDate><description><![CDATA[rem概念
rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过rem计算的规则是依赖根元素,em是依赖父元素计算。
首先，先说一个常识，浏览器的默认字体大小都是16px。...]]></description><category></category></item><item><title><![CDATA[nodejs基础]]></title><link>https://blog.youkuaiyun.com/kun_moon/article/details/102633320</link><guid>https://blog.youkuaiyun.com/kun_moon/article/details/102633320</guid><author>kun_moon</author><pubDate>Fri, 18 Oct 2019 23:02:07 +0800</pubDate><description><![CDATA[Nodejs简介
1.简单的说 Node.js 就是运行在服务端的 JavaScript。
2.Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。
3.Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。
Nodejs的应用场景
由于Nodejs目前还不够成熟，因此一般不会用作独立开发，它的主要用途如下
1.中间层
通常在开发应用时，...]]></description><category></category></item><item><title><![CDATA[BootStrapValidate 简单使用]]></title><link>https://blog.youkuaiyun.com/kun_moon/article/details/102574587</link><guid>https://blog.youkuaiyun.com/kun_moon/article/details/102574587</guid><author>kun_moon</author><pubDate>Tue, 15 Oct 2019 20:45:57 +0800</pubDate><description><![CDATA[首先需要引入 以下文件
bootstrapValidator.css //可不引入
jquery-2.1.0.min.js
bootstrap.min.js
bootstrapValidator.js
下面是校验方式 其中校验的两个文本框的name属性为 loginName和 password （切记文本框一定要用name属性 否则校验无效）
function validate(){
      ...]]></description><category></category></item><item><title><![CDATA[Bootstrap栅格系统以及排版]]></title><link>https://blog.youkuaiyun.com/kun_moon/article/details/102539839</link><guid>https://blog.youkuaiyun.com/kun_moon/article/details/102539839</guid><author>kun_moon</author><pubDate>Mon, 14 Oct 2019 00:00:36 +0800</pubDate><description><![CDATA[Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中
网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，...]]></description><category></category></item><item><title><![CDATA[vscode常用插件]]></title><link>https://blog.youkuaiyun.com/kun_moon/article/details/102410550</link><guid>https://blog.youkuaiyun.com/kun_moon/article/details/102410550</guid><author>kun_moon</author><pubDate>Tue, 08 Oct 2019 20:51:55 +0800</pubDate><description><![CDATA[1 文件图标 vscode-icons
插件名称：vscode-icons
插件地址：https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons
首先为了我们在编码时有一个高效、易用的界面，我们需要对一些不明了的组件做一些美化。
vscode-icons 插件可以实现对各种文件类型的文件前的图标进...]]></description><category></category></item><item><title><![CDATA[less复习]]></title><link>https://blog.youkuaiyun.com/kun_moon/article/details/102331277</link><guid>https://blog.youkuaiyun.com/kun_moon/article/details/102331277</guid><author>kun_moon</author><pubDate>Mon, 07 Oct 2019 22:57:21 +0800</pubDate><description><![CDATA[less
less是一种动态样式语言，属于css预处理器的范畴，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。

LESS 既可以在 客户端 上运行 ，也可以借助Node.js在服务端运行。
less中的注释
以//开头的注释，不会被编译到css文件中；
以/**/包裹的注释会被编译到css文件中。
less中的变量
使用@来声明一个变量，如：
@myCo...]]></description><category></category></item><item><title><![CDATA[cookie]]></title><link>https://blog.youkuaiyun.com/kun_moon/article/details/101168276</link><guid>https://blog.youkuaiyun.com/kun_moon/article/details/101168276</guid><author>kun_moon</author><pubDate>Sun, 22 Sep 2019 19:20:37 +0800</pubDate><description><![CDATA[cookie工作的原理
Cookie是由服务器端生成，发送给User-Agent（一般是浏览器），浏览器会将Cookie的key/value保存到某个目录下的文本文件内，下次请求同一网站时就发送该Cookie给服务器（前提是浏览器设置为启用cookie）。
Cookies最典型的应用是判定注册用户是否已经登录网站，用户可能会得到提示，是否在下一次进入此网站时保留用户信息以便简化登录手续，这些都是C...]]></description><category></category></item><item><title><![CDATA[媒体查询]]></title><link>https://blog.youkuaiyun.com/kun_moon/article/details/101082415</link><guid>https://blog.youkuaiyun.com/kun_moon/article/details/101082415</guid><author>kun_moon</author><pubDate>Fri, 20 Sep 2019 22:49:29 +0800</pubDate><description><![CDATA[响应式布局可以看作是流式布局和自适应布局设计理念的融合。其目标是确保一个页面在所有终端上（各种尺寸的PC、手机）都能显示出令人满意的效果，搭配媒体查询技术分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。
响应式布局依赖媒体查询，而前端枚举的媒体查询是有限的，只能适应主流的宽高，要匹配足够多的屏幕大小，UI和前端的工作量都不小；通常应用响...]]></description><category></category></item><item><title><![CDATA[模板引擎]]></title><link>https://blog.youkuaiyun.com/kun_moon/article/details/100998384</link><guid>https://blog.youkuaiyun.com/kun_moon/article/details/100998384</guid><author>kun_moon</author><pubDate>Wed, 18 Sep 2019 21:14:05 +0800</pubDate><description><![CDATA[实现思路：
定义好模板，用id拿到模板内容的字符串，用正则去匹配双花括号，找到之后使用定义好的对象属性进行替换
1.定义模板
&lt;script id="contentTemplate" type="text/html"&gt;
    &lt;h1&gt;{{title}}&lt;/h1&gt;
    &lt;ul&gt;
        {{each list}}
            ...]]></description><category></category></item><item><title><![CDATA[js获取节点]]></title><link>https://blog.youkuaiyun.com/kun_moon/article/details/100942036</link><guid>https://blog.youkuaiyun.com/kun_moon/article/details/100942036</guid><author>kun_moon</author><pubDate>Tue, 17 Sep 2019 22:16:20 +0800</pubDate><description><![CDATA[一、JS获取节点的兄弟,父级,子级元素的方法
原生js
var s= document.getElementById(“test”);
del_ff(s);    //清理空格
var chils= s.childNodes;  //得到s的全部子节点
var par=s.parentNode;   //得到s的父节点
var ns=s.nextSbiling;   //获得s的下一个兄弟节点
v...]]></description><category></category></item><item><title><![CDATA[bootstrap]]></title><link>https://blog.youkuaiyun.com/kun_moon/article/details/100902042</link><guid>https://blog.youkuaiyun.com/kun_moon/article/details/100902042</guid><author>kun_moon</author><pubDate>Mon, 16 Sep 2019 21:34:56 +0800</pubDate><description><![CDATA[一、什么是bootstrap?
bootstrap是一个前端开发时使用的框架。前端开发主要写HTML5、css3、JavaScript。而bootstrap框架主要为我们提供两个最重要的文件：bootstrap.min.css和bootstrap.min.js。为什么没有.min.html呢？不知道，或许有一天会有吧~
在bootstrap4.x版本中，bootstrap.min.js需要依赖两个...]]></description><category></category></item><item><title><![CDATA[css3动画效果]]></title><link>https://blog.youkuaiyun.com/kun_moon/article/details/100869714</link><guid>https://blog.youkuaiyun.com/kun_moon/article/details/100869714</guid><author>kun_moon</author><pubDate>Mon, 16 Sep 2019 00:51:26 +0800</pubDate><description><![CDATA[animation动画
是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
语法格式：
animation:动画名称 动画时间 运动曲线  何时开始  播放次数  是否反方向;

(除了名字，动画时间，延时有严格顺序要求其它随意)
@keyframes 动画名称 {
  from{ 开始位置 }  /*0%*/
  to{  结束  }  /*...]]></description><category></category></item><item><title><![CDATA[移动端 touch事件]]></title><link>https://blog.youkuaiyun.com/kun_moon/article/details/100751168</link><guid>https://blog.youkuaiyun.com/kun_moon/article/details/100751168</guid><author>kun_moon</author><pubDate>Wed, 11 Sep 2019 22:18:41 +0800</pubDate><description><![CDATA[移动端首先要书写meta标签
&lt;meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0

移动端touch事件 和 鼠标点击事件
移动端的事件是新增的，touch事件也叫触摸事件。因为手指的行为叫触摸。...]]></description><category></category></item><item><title><![CDATA[flex布局]]></title><link>https://blog.youkuaiyun.com/kun_moon/article/details/100708984</link><guid>https://blog.youkuaiyun.com/kun_moon/article/details/100708984</guid><author>kun_moon</author><pubDate>Tue, 10 Sep 2019 19:14:41 +0800</pubDate><description><![CDATA[伸缩布局(CSS3)
CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。
主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向
侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的
方向：默认主轴从左向右，侧轴默认从上到下
主轴和侧轴并不是固定不变的，通过flex-direction可以互换。
Flex...]]></description><category></category></item><item><title><![CDATA[canvas动画制作]]></title><link>https://blog.youkuaiyun.com/kun_moon/article/details/100672004</link><guid>https://blog.youkuaiyun.com/kun_moon/article/details/100672004</guid><author>kun_moon</author><pubDate>Mon, 09 Sep 2019 19:23:05 +0800</pubDate><description><![CDATA[绘制图片

drawImage()

三个参数drawImage(img,x,y)

img 图片对象、canvas对象、video对象
x,y 图片绘制的左上角


五个参数drawImage(img,x,y,w,h)

img 图片对象、canvas对象、video对象
x,y 图片绘制的左上角
w,h 图片绘制尺寸设置(图片缩放，不是截取)


九个参数drawImage(img,x,y,w...]]></description><category></category></item></channel></rss>