<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[ranran_sun的博客]]></title><description><![CDATA[做的到，才配的上]]></description><link>https://blog.youkuaiyun.com/ranran_sun</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; ranran_sun]]></copyright><item><title><![CDATA[从输入URL网址到页面呈现发生了什么]]></title><link>https://blog.youkuaiyun.com/ranran_sun/article/details/104589441</link><guid>https://blog.youkuaiyun.com/ranran_sun/article/details/104589441</guid><author>ranran_sun</author><pubDate>Sun, 01 Mar 2020 18:30:31 +0800</pubDate><description><![CDATA[从两方面分析：网络通信+页面渲染

如果想要了解TCP/IP推荐两篇：TCP/IP&amp;&amp;TCP/IP

DNS（域名系统【Domain Name System）

网络通信部分

第一步：DNS解析URL对应的IP（输入URL，可能为域名，可能为IP，如果是域名，要进行DNS解析，解析为该域名对应的IP地址）；

DNS解析：

客户端先检查host文件里是否有这个网址映射关系，有，...]]></description><category></category></item><item><title><![CDATA[实现元素垂直水平居中的几种方式]]></title><link>https://blog.youkuaiyun.com/ranran_sun/article/details/103982213</link><guid>https://blog.youkuaiyun.com/ranran_sun/article/details/103982213</guid><author>ranran_sun</author><pubDate>Wed, 15 Jan 2020 02:07:00 +0800</pubDate><description><![CDATA[假设：


&lt;div class="content-wrap" &gt;
    &lt;div class="content"&gt;
    &lt;/div&gt;
&lt;/div&gt;

第一种：


.content-wrap{
    width:300px;
    height:300px;
    position:relative;
}
.content{
    w...]]></description><category></category></item><item><title><![CDATA[关于父子组件生命周期的调用顺序]]></title><link>https://blog.youkuaiyun.com/ranran_sun/article/details/103900109</link><guid>https://blog.youkuaiyun.com/ranran_sun/article/details/103900109</guid><author>ranran_sun</author><pubDate>Thu, 09 Jan 2020 00:10:44 +0800</pubDate><description><![CDATA[众所周知vue的生命周期，但是父子组件生命周期的顺序是啥样的呢，简单粗暴了撸了个例子

父组件


&lt;template&gt;
  &lt;div class="hello"&gt;
    &lt;v-child :name=name&gt;&lt;/v-child&gt;
    &lt;span&gt;msgdddddd&lt;/span&gt;
    {{msg}}
  &lt;/...]]></description><category></category></item><item><title><![CDATA[再看git]]></title><link>https://blog.youkuaiyun.com/ranran_sun/article/details/103755831</link><guid>https://blog.youkuaiyun.com/ranran_sun/article/details/103755831</guid><author>ranran_sun</author><pubDate>Sun, 29 Dec 2019 17:49:27 +0800</pubDate><description><![CDATA[基础

官网：https://git-scm.com/
国外网友制作的Git Cheat Sheet
安装git
配置git

git config --global --list
git config --global user.name
git config  --global user.name wangliran
删除：git config  --global --unset user.n...]]></description><category></category></item><item><title><![CDATA[nrm 管理npm]]></title><link>https://blog.youkuaiyun.com/ranran_sun/article/details/95305836</link><guid>https://blog.youkuaiyun.com/ranran_sun/article/details/95305836</guid><author>ranran_sun</author><pubDate>Wed, 10 Jul 2019 09:32:58 +0800</pubDate><description><![CDATA[nrm 是一个npm源管理器，允许你快速地在npm源间切换。

和nvm区分开，nvm是切换node版本的
	nrm安装
	npm install nrm
		mac上如果没有权限 执行 sudo npm install nrm
		
	
	安装好之后
	执行nrm ls 查看可切换的npm源
		
	
	可以添加自己定制的源，一般企业会有自己内部的私有源。，命令
	nrm add &lt...]]></description><category></category></item><item><title><![CDATA[Vue给对象添加新属性未触发页面渲染]]></title><link>https://blog.youkuaiyun.com/ranran_sun/article/details/80920040</link><guid>https://blog.youkuaiyun.com/ranran_sun/article/details/80920040</guid><author>ranran_sun</author><pubDate>Wed, 04 Jul 2018 23:55:58 +0800</pubDate><description><![CDATA[做项目过程中踩得一个小坑，写个博客记录一下

Vue给对象添加新属性，我开始是直接object.属性=‘默认值’，结果用它来控制状态控制不了，值是在变，但是不起作用，想了用class来做吧，但是这个奇葩的问题总要解决啊，于是乎，想到之前做的demo，回去翻看了一下，额。。。。

用Vue.set(Object,'属性名'，默认值)这样设定就好了


quotas.forEach(function ...]]></description><category></category></item><item><title><![CDATA[浏览器渲染过程]]></title><link>https://blog.youkuaiyun.com/ranran_sun/article/details/80249928</link><guid>https://blog.youkuaiyun.com/ranran_sun/article/details/80249928</guid><author>ranran_sun</author><pubDate>Wed, 09 May 2018 13:51:31 +0800</pubDate><description><![CDATA[浏览器的渲染过程：第一步：html经过HTML Parser['pɑ:sə]解析为DOM tree；第二步：css根据css规则经过css解析器解析为style Rules（CSSOM tree）；第三步：两棵树经过attachment结合为 Render Tree（形成一棵大树,此时它还是一棵迷茫的树，不知道节点的内容和位置）；第四步：render tree经过Layout 计算出DOM的位置以...]]></description><category></category></item><item><title><![CDATA[神奇的css3]]></title><link>https://blog.youkuaiyun.com/ranran_sun/article/details/80175217</link><guid>https://blog.youkuaiyun.com/ranran_sun/article/details/80175217</guid><author>ranran_sun</author><pubDate>Thu, 03 May 2018 18:50:30 +0800</pubDate><description><![CDATA[css3的兼容性还不是很好，但是非常的炫酷好用，为了做到兼容，-webkit,-moz，-o,-ms❤css3的圆角边框：border-radius：/* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */ ❤css3的边框阴影：box-shadow：x轴偏移量 y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色 阴影方式（阴影方式只能放在第一个和最后一个位置，默认外阴影，内阴影值为ins...]]></description><category></category></item><item><title><![CDATA[failed to push some refs to]]></title><link>https://blog.youkuaiyun.com/ranran_sun/article/details/80008921</link><guid>https://blog.youkuaiyun.com/ranran_sun/article/details/80008921</guid><author>ranran_sun</author><pubDate>Thu, 19 Apr 2018 18:26:11 +0800</pubDate><description><![CDATA[上传项目报错了解决方法：再传一次就可以了]]></description><category></category></item><item><title><![CDATA[git以及github的使用]]></title><link>https://blog.youkuaiyun.com/ranran_sun/article/details/79798903</link><guid>https://blog.youkuaiyun.com/ranran_sun/article/details/79798903</guid><author>ranran_sun</author><pubDate>Tue, 03 Apr 2018 13:15:33 +0800</pubDate><description><![CDATA[前段时间学好了git，从一个git小白到可以创建仓库，得益于大佬的无私奉献 廖雪峰-git，一步步跟下来，很快就了解了一个听上去看上去都吊炸天的东西，但是时间久了不常用有的指令就忘了，简单记录一下，方便后续使用查找1、安装git（window） 点击打开链接2、使用git命令初始化，创建版本库  $ git init3、将建好的文件添加到版本库中，分两步     ① $ git add filen...]]></description><category></category></item><item><title><![CDATA[react学习笔记（四）react如何实现”数据双向绑定“的效果以及DOM钩---refs]]></title><link>https://blog.youkuaiyun.com/ranran_sun/article/details/79788667</link><guid>https://blog.youkuaiyun.com/ranran_sun/article/details/79788667</guid><author>ranran_sun</author><pubDate>Mon, 02 Apr 2018 15:54:49 +0800</pubDate><description><![CDATA[react单向数据流，怎么做到双向数据绑定使用event.target举个栗子input标签 ，vue实现双向数据绑定v-module就哦了，但是react没有react的实现方法：首先，要初始化状态：this.state={&quot;a&quot;:&quot;&quot;}置空也可以&amp;lt;input type=&quot;text&quot;  onInput={this.change} /&amp;gt;chenge事件的event.target指的触发...]]></description><category></category></item><item><title><![CDATA[react学习笔记（三）生命周期]]></title><link>https://blog.youkuaiyun.com/ranran_sun/article/details/79787418</link><guid>https://blog.youkuaiyun.com/ranran_sun/article/details/79787418</guid><author>ranran_sun</author><pubDate>Mon, 02 Apr 2018 14:14:44 +0800</pubDate><description><![CDATA[react的生命周期从组件诞生到移除：组件的生命周期可分成三个状态：❤Mounting：已插入真实 DOM❤Updating：正在被重新渲染❤Unmounting：已移出真实 DOM❤挂载：1、componentWillMount 组件挂载之前被调用2、componentDidMount 在挂载结束被调用，DOM节点初始化操作应该在这里❤更新：1、componentWillReceiveProps...]]></description><category></category></item><item><title><![CDATA[react学习笔记（二）JSX基本用法]]></title><link>https://blog.youkuaiyun.com/ranran_sun/article/details/79756562</link><guid>https://blog.youkuaiyun.com/ranran_sun/article/details/79756562</guid><author>ranran_sun</author><pubDate>Fri, 30 Mar 2018 15:35:18 +0800</pubDate><description><![CDATA[先上基础代码：&amp;lt;!DOCTYPE html&amp;gt;
&amp;lt;html&amp;gt;
  &amp;lt;head&amp;gt;
    &amp;lt;meta charset=&quot;UTF-8&quot; /&amp;gt; 
    &amp;lt;title&amp;gt;Hello React!&amp;lt;/title&amp;gt;
    &amp;lt;script src=&quot;https://cdn.bootcss.com/react/15]]></description><category></category></item><item><title><![CDATA[react学习笔记（一）安装]]></title><link>https://blog.youkuaiyun.com/ranran_sun/article/details/79755106</link><guid>https://blog.youkuaiyun.com/ranran_sun/article/details/79755106</guid><author>ranran_sun</author><pubDate>Fri, 30 Mar 2018 13:45:10 +0800</pubDate><description><![CDATA[安装react npm install -g create-react-app 创建第一个项目：create-react-app 自动创建的项目是基于 Webpack + ES6 （时间好久，我都打了这么多字了，还没创建完。。。建完。。。。完。。。。。）哎呀，终于完事了，我以为卡死了安装结束：按照提示，启动服务打开：http://localhost:3000/...]]></description><category></category></item><item><title><![CDATA[闭包]]></title><link>https://blog.youkuaiyun.com/ranran_sun/article/details/79395738</link><guid>https://blog.youkuaiyun.com/ranran_sun/article/details/79395738</guid><author>ranran_sun</author><pubDate>Wed, 28 Feb 2018 13:00:01 +0800</pubDate><description><![CDATA[对闭包的概念一直是含糊不清，说不知道吧，还是知道的，说知道吧，却也说不清楚，所以集日月之精华（其实是各种大佬博客以及各种百科各种书籍），写一下学习笔记和想法。参考：http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.htmlhttp://www.cnblogs.com/MuYunyun/p/5930703.html...]]></description><category></category></item><item><title><![CDATA[ajax(二)笔记]]></title><link>https://blog.youkuaiyun.com/ranran_sun/article/details/79385588</link><guid>https://blog.youkuaiyun.com/ranran_sun/article/details/79385588</guid><author>ranran_sun</author><pubDate>Tue, 27 Feb 2018 11:45:38 +0800</pubDate><description><![CDATA[XMLHttpRequest对象发送请求结束，要服务器响应，这里详细介绍：http://www.runoob.com/ajax/ajax-xmlhttprequest-response.html获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性onreadystatechange事件：利用回调函数执行多个ajax任务&amp;lt...]]></description><category></category></item><item><title><![CDATA[ajax(一)]]></title><link>https://blog.youkuaiyun.com/ranran_sun/article/details/79384931</link><guid>https://blog.youkuaiyun.com/ranran_sun/article/details/79384931</guid><author>ranran_sun</author><pubDate>Tue, 27 Feb 2018 11:11:33 +0800</pubDate><description><![CDATA[基本的ajax的介绍可以百度或者到w3school上自行学习学习ajax：XMLHttpRequest 是 AJAX 的基础。所以首先创建XHR对象：基本的语法是var 变量名=new XMLHttpRequest();但是在IE5和6用的是ActiveX对象，所以为了兼容，写一个判断语句即可创建好对象，这个对象是做什么用的呢？是用于和服务器数据交换使用如需将请求发送到服务器,XMLHttpReq...]]></description><category></category></item><item><title><![CDATA[icon矢量图标]]></title><link>https://blog.youkuaiyun.com/ranran_sun/article/details/79288531</link><guid>https://blog.youkuaiyun.com/ranran_sun/article/details/79288531</guid><author>ranran_sun</author><pubDate>Thu, 08 Feb 2018 13:40:33 +0800</pubDate><description><![CDATA[]]></description><category></category></item><item><title><![CDATA[运行vue报错__WEBPACK_IMPORTED_MODULE_2__router__.a is not a constructor]]></title><link>https://blog.youkuaiyun.com/ranran_sun/article/details/79212819</link><guid>https://blog.youkuaiyun.com/ranran_sun/article/details/79212819</guid><author>ranran_sun</author><pubDate>Wed, 31 Jan 2018 09:11:04 +0800</pubDate><description><![CDATA[npm运行正常
但浏览器报错：


解决方法：VueRouter的引入不能用npm安装时自带的“import VueRouter from ‘./router’”，要换成“import VueRouter from ‘vue-router’”]]></description><category></category></item><item><title><![CDATA[vue创建项目build的文件夹下没有dev-server.js文件了，怎么mock数据？]]></title><link>https://blog.youkuaiyun.com/ranran_sun/article/details/79203379</link><guid>https://blog.youkuaiyun.com/ranran_sun/article/details/79203379</guid><author>ranran_sun</author><pubDate>Tue, 30 Jan 2018 13:14:22 +0800</pubDate><description><![CDATA[vue-cli创建完项目，dev-server.js文件丢了，左边是大佬的，右边是我的，什么情况！！！！？？？

那我还怎么跟着大佬的项目敲代码啊，dev-server.js里面的数据怎么mock啊T_T~~~~~~

各种查找，啊呀，原来是新版本的vue已将dev-server.js与webpack.dev.conf.js合并了..........，上面的操作webpack.dev.co]]></description><category></category></item></channel></rss>