<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[ThisOnly的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/ThisOnly</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; ThisOnly]]></copyright><item><title><![CDATA[React组件添加样式的四种方式]]></title><link>https://blog.youkuaiyun.com/ThisOnly/article/details/95599338</link><guid>https://blog.youkuaiyun.com/ThisOnly/article/details/95599338</guid><author>ThisOnly</author><pubDate>Fri, 12 Jul 2019 11:14:34 +0800</pubDate><description><![CDATA[组件中DOM样式
第一种：行内样式
想给虚拟dom添加行内样式，需要使用表达式传入样式对象的方式来实现：
// 注意这里的两个括号，第一个表示我们在要JSX里插入JS了，第二个是对象的括号
 &lt;p style={{color:'red', fontSize:'14px'}}&gt;Hello world&lt;/p&gt;

行内样式需要写入一个样式对象，而这个样式对象的位置可以放在很多地方...]]></description><category></category></item><item><title><![CDATA[JSX原理]]></title><link>https://blog.youkuaiyun.com/ThisOnly/article/details/95597510</link><guid>https://blog.youkuaiyun.com/ThisOnly/article/details/95597510</guid><author>ThisOnly</author><pubDate>Fri, 12 Jul 2019 10:53:29 +0800</pubDate><description><![CDATA[JSX原理
要明白JSX的原理，需要先明白如何用 JavaScript 对象来表现一个 DOM 元素的结构?
看下面的DOM结构
&lt;div class='app' id='appRoot'&gt;
  &lt;h1 class='title'&gt;欢迎进入React的世界&lt;/h1&gt;
  &lt;p&gt;
    React.js 是一个帮助你构建页面 UI 的库
  &lt;...]]></description><category></category></item><item><title><![CDATA[React的组件和用法]]></title><link>https://blog.youkuaiyun.com/ThisOnly/article/details/95524260</link><guid>https://blog.youkuaiyun.com/ThisOnly/article/details/95524260</guid><author>ThisOnly</author><pubDate>Thu, 11 Jul 2019 21:43:36 +0800</pubDate><description><![CDATA[基本使用：
// 从 react 的包当中引入了 React。只要你要写 React.js 组件就必须引入React, 因为react里有一种语法叫JSX，稍后会讲到JSX，要写JSX，就必须引入React
import React from 'react'
// ReactDOM 可以帮助我们把 React 组件渲染到页面上去，没有其它的作用了。它是从 react-dom 中引入的，而不是从 r...]]></description><category></category></item><item><title><![CDATA[React]]></title><link>https://blog.youkuaiyun.com/ThisOnly/article/details/95514398</link><guid>https://blog.youkuaiyun.com/ThisOnly/article/details/95514398</guid><author>ThisOnly</author><pubDate>Thu, 11 Jul 2019 20:10:58 +0800</pubDate><description><![CDATA[React的起源和发展
React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。
React与传统MVC的关系
轻量级的视图层库！A JavaScript library for building user interfac...]]></description><category></category></item><item><title><![CDATA[create-react-app的安装和项目的创建]]></title><link>https://blog.youkuaiyun.com/ThisOnly/article/details/95508858</link><guid>https://blog.youkuaiyun.com/ThisOnly/article/details/95508858</guid><author>ThisOnly</author><pubDate>Thu, 11 Jul 2019 19:26:05 +0800</pubDate><description><![CDATA[create-react-app
全局安装create-react-app
$ npm install -g create-react-app

如果不想全局安装，可以直接使用npx
$ npx create-react-app your-app	//也可以实现相同的效果

创建一个项目
$ create-react-app your-app 注意命名方式

Creating a new Reac...]]></description><category></category></item><item><title><![CDATA[cli的搭建]]></title><link>https://blog.youkuaiyun.com/ThisOnly/article/details/94491624</link><guid>https://blog.youkuaiyun.com/ThisOnly/article/details/94491624</guid><author>ThisOnly</author><pubDate>Wed, 03 Jul 2019 11:17:14 +0800</pubDate><description><![CDATA[cli
概念：
cli是vue提供的一个用来快速构建项目环境的一个工具，底层使用的是webpack
cli目前有两个版本：cli2和cli3    -----cli3对电脑的配置有一定要求
cli的使用
1.cli的安装-----npm/cnpm/yarn 都可以使用
$ yarn add @vue/cli global  //这个是cli3的版本

$ yarn add @vue/cli-ini...]]></description><category></category></item><item><title><![CDATA[Vue的生命周期]]></title><link>https://blog.youkuaiyun.com/ThisOnly/article/details/94361007</link><guid>https://blog.youkuaiyun.com/ThisOnly/article/details/94361007</guid><author>ThisOnly</author><pubDate>Sun, 30 Jun 2019 23:02:18 +0800</pubDate><description><![CDATA[生命周期
概念：
Vue中的生命周期指的是 组件  从创建到销毁一个过程，在这个过程中，我们在每一个特定的阶段会触发一些方法（ 这些方法具备一些功能），我们给这些方法起了个名字叫做（ 生命周期钩子函数/ 组件钩子 ）
用途：
因为我们想在生命周期钩子中实现项目功能，那么我们必须知道每一个钩子函数的具体用途
Vue的生命周期分为三个阶段，分别为： 初始化，运行中， 销毁，一共8个钩子函数
注意： 生...]]></description><category></category></item><item><title><![CDATA[Vue的组件]]></title><link>https://blog.youkuaiyun.com/ThisOnly/article/details/94346388</link><guid>https://blog.youkuaiyun.com/ThisOnly/article/details/94346388</guid><author>ThisOnly</author><pubDate>Sun, 30 Jun 2019 18:48:43 +0800</pubDate><description><![CDATA[Vue的组件
前言
Vue 是构造器函数
Vue.extend() 是  vue用来扩展  vue功能（ 组件 ）的
Vue决定不进行实例化Vue.extend(),vue借鉴了react,react中组件是以标签的形式使用的，vue 决定组件要以标签的形式呈现
为了符合 html / html5的规则，所以组件的标签化使用必须注册，
注册说白了就是用来解析这个标签化的组件未html能识别的标签
...]]></description><category></category></item><item><title><![CDATA[虚拟dom &&  diff算法]]></title><link>https://blog.youkuaiyun.com/ThisOnly/article/details/94054910</link><guid>https://blog.youkuaiyun.com/ThisOnly/article/details/94054910</guid><author>ThisOnly</author><pubDate>Fri, 28 Jun 2019 22:18:24 +0800</pubDate><description><![CDATA[虚拟dom
概念：虚拟dom是一个Object对象模型，用来模拟真实dom节点的结构
虚拟dom的使用基本流程：

1-获取数据（ ajax   fetch ）

var data = {
      id: 1,
      name: '张三'
    }


2-创建vdom

&lt;div class = "box"&gt;
        &lt;ul&gt;
          &l...]]></description><category></category></item><item><title><![CDATA[Vue组件通信的方式]]></title><link>https://blog.youkuaiyun.com/ThisOnly/article/details/93914288</link><guid>https://blog.youkuaiyun.com/ThisOnly/article/details/93914288</guid><author>ThisOnly</author><pubDate>Thu, 27 Jun 2019 21:40:49 +0800</pubDate><description><![CDATA[组件通信
组件可以说是一个具有独立功能的整体，但是当我们要将这些组件拼接在一起时，这些组件相互之间要建立联系，这个联系我们就称之为通信。
组件通信的方式

父子组件通信-----props

1.在父组件的模板中将数据用单项数据绑定的形式，绑定在子组件身上
&lt;Son :money = "money"/&gt;

2.在子组件的配置项中可以使用一个props配置项来接收这个数据，接收时，pro...]]></description><category></category></item><item><title><![CDATA[Vue的指令及其用法]]></title><link>https://blog.youkuaiyun.com/ThisOnly/article/details/93410433</link><guid>https://blog.youkuaiyun.com/ThisOnly/article/details/93410433</guid><author>ThisOnly</author><pubDate>Sun, 23 Jun 2019 22:16:02 +0800</pubDate><description><![CDATA[指令
指令是绑定在dom属性上的
这种属性绑定的形式就是为了操作dom，我们给这种属性起了一个好听的名字
Vue 1.0 叫它 属性指令（ 借鉴Angular来的 ）
Vue 2.0 统称为 ‘指令’
指令是用一个  v-xxx   表示
指令是用来操作dom
Vue中不允许直接操作dom
mustache语法   —  属性写法 的属性值是直接写数据的，不需要使用 {{ }}
v-html
可以...]]></description><category></category></item><item><title><![CDATA[watch侦听属性]]></title><link>https://blog.youkuaiyun.com/ThisOnly/article/details/93406711</link><guid>https://blog.youkuaiyun.com/ThisOnly/article/details/93406711</guid><author>ThisOnly</author><pubDate>Sun, 23 Jun 2019 20:52:15 +0800</pubDate><description><![CDATA[watch

作用


用来监听data中定义的数据，当data中定义的数据发生了变化，那么watch中的key就会触发
watch是一个对象
watch: {}
watch中可以设置多个类型的键值


使用方式（ 重点 ）


方法

watch: {
      fn () {}
    }


对象： （ 深度监听 ）

watch: {
      fn: {
        handle...]]></description><category></category></item><item><title><![CDATA[Vue框架型获取数据的两种常用方式axios/fetch]]></title><link>https://blog.youkuaiyun.com/ThisOnly/article/details/93232796</link><guid>https://blog.youkuaiyun.com/ThisOnly/article/details/93232796</guid><author>ThisOnly</author><pubDate>Fri, 21 Jun 2019 21:15:08 +0800</pubDate><description><![CDATA[第一种：axios
1.获取模拟假数据（mock-json）----get获取
//先引入axios和V的cdn或是安装对应的模块
//https://www.bootcdn.cn/
&lt;script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"&gt;&lt;/script&gt;
&lt;script src="https://cdn.bo...]]></description><category></category></item><item><title><![CDATA[如何用Node.js流（stream）来生成压缩包]]></title><link>https://blog.youkuaiyun.com/ThisOnly/article/details/93205352</link><guid>https://blog.youkuaiyun.com/ThisOnly/article/details/93205352</guid><author>ThisOnly</author><pubDate>Fri, 21 Jun 2019 16:56:18 +0800</pubDate><description><![CDATA[业务： 利用Node.js流来生成压缩包
const fs = require( 'fs' );

const zlib = require( 'zlib' );//制作压缩包的模块

//创建可读的流

const readStream = fs.createReadStream('./xxx.txt')//需要压缩的文件

// 创建空压缩包

const gzib = zlib.create...]]></description><category></category></item><item><title><![CDATA[一段代码看懂v-html和v-text的区别]]></title><link>https://blog.youkuaiyun.com/ThisOnly/article/details/92839519</link><guid>https://blog.youkuaiyun.com/ThisOnly/article/details/92839519</guid><author>ThisOnly</author><pubDate>Wed, 19 Jun 2019 17:42:22 +0800</pubDate><description><![CDATA[先引入vue.js的cdn

https://www.bootcdn.cn/

或是进行一个vue的模块的下载
//模块化安装 
npm/cnpm/yarn i vue -D

&lt;body&gt;
    &lt;div id="app"&gt;
        &lt;p v-html = "msg"&gt;&lt;/p&gt;  
        &lt;p v-text = "msg"...]]></description><category></category></item><item><title><![CDATA[什么是前端开发规范？]]></title><link>https://blog.youkuaiyun.com/ThisOnly/article/details/92774346</link><guid>https://blog.youkuaiyun.com/ThisOnly/article/details/92774346</guid><author>ThisOnly</author><pubDate>Tue, 18 Jun 2019 11:49:54 +0800</pubDate><description><![CDATA[前端的开发规范
本文主要从以下几个方面来概述前端的开发规范

目录构建规范
前端命名规范
前端工作规范
开发文档的书写规范

1. 前端目录构建规范
我们从命名原则、根目录、业务逻辑等方面进行目录构建
1.1 命名原则：

简洁明了（如下：）
* src 源代码
* img  图片资源
* js  JavaScript脚本
* dep 第三方依赖包     （development package...]]></description><category></category></item><item><title><![CDATA[Node.js中中文乱码有中文字符的情况及解决的方式]]></title><link>https://blog.youkuaiyun.com/ThisOnly/article/details/91905958</link><guid>https://blog.youkuaiyun.com/ThisOnly/article/details/91905958</guid><author>ThisOnly</author><pubDate>Thu, 13 Jun 2019 23:10:04 +0800</pubDate><description><![CDATA[第一种：设置请求头
response.writeHead( 200, {
        'Content-Type': 'text/html;charset=UTF8'  // 小写也可以  utf8
      })


const http = require( 'http' )

const port = 8001

const host = 'localhost'

const serv...]]></description><category></category></item><item><title><![CDATA[web服务器渲染数据发送前台]]></title><link>https://blog.youkuaiyun.com/ThisOnly/article/details/91905611</link><guid>https://blog.youkuaiyun.com/ThisOnly/article/details/91905611</guid><author>ThisOnly</author><pubDate>Thu, 13 Jun 2019 23:05:57 +0800</pubDate><description><![CDATA[web（静态）服务器渲染数据发送前台
服务器： 可以运行在服务端的一个网站（站点）
服务器种类：
①web服务器（静态服务器） 可以运行在浏览器中的服务器
②api服务器（后端接口） 后端语言暴露一个数据接口，用于前端数据请求（ajax,fetch）
Node.js中原生创建web服务器(静态服务器)
基本步骤：
引入http模块
createServer( callback ) 创建服务器，ca...]]></description><category></category></item><item><title><![CDATA[http爬虫]]></title><link>https://blog.youkuaiyun.com/ThisOnly/article/details/91905135</link><guid>https://blog.youkuaiyun.com/ThisOnly/article/details/91905135</guid><author>ThisOnly</author><pubDate>Thu, 13 Jun 2019 23:00:17 +0800</pubDate><description><![CDATA[http爬虫
http模块的数据请求： get,post,request
爬虫： 爬去数据，但并不是所有网站都能爬取的，有反爬虫
流程： 后端数据请求 —&gt; 数据分析 —&gt; 数据清洗 ----&gt; 数据前台发送
 const http = require( 'http' )//引入http模块
 const cheerio = require( 'cheerio' )//引入che...]]></description><category></category></item><item><title><![CDATA[express创建api服务器（ 接口 ）]]></title><link>https://blog.youkuaiyun.com/ThisOnly/article/details/91895770</link><guid>https://blog.youkuaiyun.com/ThisOnly/article/details/91895770</guid><author>ThisOnly</author><pubDate>Thu, 13 Jun 2019 21:06:33 +0800</pubDate><description><![CDATA[express创建api接口
首先，我们在终端打开，用命令创建一个文件夹
$ npx express -e  port   // 创建一个port文件夹    如果你的npm版本不是5.2+以上，那么建议你可以先全局安装express再创建

$ npm i express-generator -g
$ cnpm i express-generator -g
$ yarn add express-...]]></description><category></category></item></channel></rss>