ranran_sun的博客

原创 从输入URL网址到页面呈现发生了什么

从两方面分析：网络通信+页面渲染如果想要了解TCP/IP推荐两篇：TCP/IP&&TCP/IPDNS（域名系统【Domain Name System）网络通信部分第一步：DNS解析URL对应的IP（输入URL，可能为域名，可能为IP，如果是域名，要进行DNS解析，解析为该域名对应的IP地址）；DNS解析：客户端先检查host文件里是否有这个网址映射关系，有，...

原创 实现元素垂直水平居中的几种方式

假设：<div class="content-wrap" > <div class="content"> </div></div>第一种：.content-wrap{ width:300px; height:300px; position:relative;}.content{ w...

原创 关于父子组件生命周期的调用顺序

众所周知vue的生命周期，但是父子组件生命周期的顺序是啥样的呢，简单粗暴了撸了个例子父组件<template> <div class="hello"> <v-child :name=name></v-child> <span>msgdddddd</span> {{msg}} </...

原创 再看git

基础官网：https://git-scm.com/国外网友制作的Git Cheat Sheet安装git配置gitgit config --global --listgit config --global user.namegit config --global user.name wangliran删除：git config --global --unset user.n...

原创 nrm 管理npm

nrm 是一个npm源管理器，允许你快速地在npm源间切换。和nvm区分开，nvm是切换node版本的 nrm安装 npm install nrm mac上如果没有权限 执行 sudo npm install nrm 安装好之后 执行nrm ls 查看可切换的npm源 可以添加自己定制的源，一般企业会有自己内部的私有源。，命令 nrm add &lt...

原创 Vue给对象添加新属性未触发页面渲染

做项目过程中踩得一个小坑，写个博客记录一下Vue给对象添加新属性，我开始是直接object.属性=‘默认值’，结果用它来控制状态控制不了，值是在变，但是不起作用，想了用class来做吧，但是这个奇葩的问题总要解决啊，于是乎，想到之前做的demo，回去翻看了一下，额。。。。用Vue.set(Object,'属性名'，默认值)这样设定就好了quotas.forEach(function ...

原创 浏览器渲染过程

浏览器的渲染过程：第一步：html经过HTML Parser['pɑ:sə]解析为DOM tree；第二步：css根据css规则经过css解析器解析为style Rules（CSSOM tree）；第三步：两棵树经过attachment结合为 Render Tree（形成一棵大树,此时它还是一棵迷茫的树，不知道节点的内容和位置）；第四步：render tree经过Layout 计算出DOM的位置以...

原创 神奇的css3

css3的兼容性还不是很好，但是非常的炫酷好用，为了做到兼容，-webkit,-moz，-o,-ms❤css3的圆角边框：border-radius：/* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */ ❤css3的边框阴影：box-shadow：x轴偏移量 y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色 阴影方式（阴影方式只能放在第一个和最后一个位置，默认外阴影，内阴影值为ins...

原创 failed to push some refs to

上传项目报错了解决方法：再传一次就可以了

原创 git以及github的使用

前段时间学好了git，从一个git小白到可以创建仓库，得益于大佬的无私奉献 廖雪峰-git，一步步跟下来，很快就了解了一个听上去看上去都吊炸天的东西，但是时间久了不常用有的指令就忘了，简单记录一下，方便后续使用查找1、安装git（window） 点击打开链接2、使用git命令初始化，创建版本库  $ git init3、将建好的文件添加到版本库中，分两步     ① $ git add filen...

原创 react学习笔记（四）react如何实现”数据双向绑定“的效果以及DOM钩---refs

react单向数据流，怎么做到双向数据绑定使用event.target举个栗子input标签 ，vue实现双向数据绑定v-module就哦了，但是react没有react的实现方法：首先，要初始化状态：this.state={"a":""}置空也可以&lt;input type="text" onInput={this.change} /&gt;chenge事件的event.target指的触发...

原创 react学习笔记（三）生命周期

react的生命周期从组件诞生到移除：组件的生命周期可分成三个状态：❤Mounting：已插入真实 DOM❤Updating：正在被重新渲染❤Unmounting：已移出真实 DOM❤挂载：1、componentWillMount 组件挂载之前被调用2、componentDidMount 在挂载结束被调用，DOM节点初始化操作应该在这里❤更新：1、componentWillReceiveProps...

原创 react学习笔记（二）JSX基本用法

先上基础代码：&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;title&gt;Hello React!&lt;/title&gt; &lt;script src="https://cdn.bootcss.com/react/15

原创 react学习笔记（一）安装

安装react npm install -g create-react-app 创建第一个项目：create-react-app 自动创建的项目是基于 Webpack + ES6 （时间好久，我都打了这么多字了，还没创建完。。。建完。。。。完。。。。。）哎呀，终于完事了，我以为卡死了安装结束：按照提示，启动服务打开：http://localhost:3000/...

原创 闭包

对闭包的概念一直是含糊不清，说不知道吧，还是知道的，说知道吧，却也说不清楚，所以集日月之精华（其实是各种大佬博客以及各种百科各种书籍），写一下学习笔记和想法。参考：http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.htmlhttp://www.cnblogs.com/MuYunyun/p/5930703.html...

原创 ajax(二)笔记

XMLHttpRequest对象发送请求结束，要服务器响应，这里详细介绍：http://www.runoob.com/ajax/ajax-xmlhttprequest-response.html获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性onreadystatechange事件：利用回调函数执行多个ajax任务&lt...

原创 ajax(一)

基本的ajax的介绍可以百度或者到w3school上自行学习学习ajax：XMLHttpRequest 是 AJAX 的基础。所以首先创建XHR对象：基本的语法是var 变量名=new XMLHttpRequest();但是在IE5和6用的是ActiveX对象，所以为了兼容，写一个判断语句即可创建好对象，这个对象是做什么用的呢？是用于和服务器数据交换使用如需将请求发送到服务器,XMLHttpReq...

原创 icon矢量图标

原创 运行vue报错__WEBPACK_IMPORTED_MODULE_2__router__.a is not a constructor

npm运行正常但浏览器报错：解决方法：VueRouter的引入不能用npm安装时自带的“import VueRouter from ‘./router’”，要换成“import VueRouter from ‘vue-router’”

原创 vue创建项目build的文件夹下没有dev-server.js文件了，怎么mock数据？

vue-cli创建完项目，dev-server.js文件丢了，左边是大佬的，右边是我的，什么情况！！！！？？？那我还怎么跟着大佬的项目敲代码啊，dev-server.js里面的数据怎么mock啊T_T~~~~~~各种查找，啊呀，原来是新版本的vue已将dev-server.js与webpack.dev.conf.js合并了..........，上面的操作webpack.dev.co

原创 sass安装报错

初学sass知道了它是依赖于Ruby的，于是乎在网上看了安装教程，挺简单的（看的时候以为），毕竟添加个环境变量再下一步就能完成的工作也难不倒一个小白程序员，我在这里https://rubyinstaller.org/downloads/下载了ruby的最新版，就开始安装了，我是windows系统像安装其他程序一样，双击，安装，我直接安装在c盘了，然后把环境变量加进去，就是下面那个红框前

原创 yahoo军规35

前辈的博客：雅虎军规35条这个博客分类清晰，可以收藏学习，站在巨人的肩膀上~~~自己的理解：第一条：尽量减少Http请求：合并压缩文件，CSS Sprites第二条：使用CDN；分散服务器，缩短物理距离第三条：添加Expire/Cache-Control头：本地缓存机制，在有效期内，可以使用缓存内容尔不必发送http请求；第四条：其中GZip压缩：第五条：将css放

原创 webpack打包报错

学习webpack报错，npm run build正常工作，但是npm start就报错了，以下是package.json文件以及报错信息错误日志：0 info it worked if it ends with ok1 verbose cli [ 'D:\\Program Files\\nodejs\\node.exe',1 verbose cli   '

原创 vue-router路由的配置及用法

1、安装路由：如果在安装vue的时候没有安装路由，要单独安装，在命令行工具里cd到项目路径下输入npm install vue-router --save-dev大概要几十秒的时间，安装完成后2、在main.js中引入路由模块import VueRouter from 'vue-router'3、在main.js使用路由Vue.use(VueRouter)4、配置路由const router=ne...

原创 vue 子组件父组件相互传值

关于子父组件相互传值，做了一个翻译的小demo：https://github.com/ranransun/vue-translate/父组件向子组建传值---props父组件：数据部分：模版引用组件的部分子组件：两个红框框的名字是一样的，笔者在写的时候报过这样的错误props还有更严谨的写法，即传值和传引用是不一样的效果：属性传值可以传具体的值，也可以传引用（Array，object），传引用的时...

原创 小白的vue安装

想学好vue还是要学会安装脚手架的，在用直接引入的方式学习了一些基本的vue操作后，决定搭建一下脚手架，安装过程中也是看了很多文档，本人是windows系统。首先确定依赖的node环境：在命令行工具里面（win+R后输入cmd）可以查看node版本以及npm确认是否安装，npm会随着node一起安装，若没有安装可进入官网nodejs.org安装（选择较新且稳定的版本安装）接下来安装