雾里种花-CSDN博客

原创 React组件添加样式的四种方式

组件中DOM样式第一种：行内样式想给虚拟dom添加行内样式，需要使用表达式传入样式对象的方式来实现：// 注意这里的两个括号，第一个表示我们在要JSX里插入JS了，第二个是对象的括号 <p style={{color:'red', fontSize:'14px'}}>Hello world</p>行内样式需要写入一个样式对象，而这个样式对象的位置可以放在很多地方...

2019-07-12 11:14:34 13940

原创 JSX原理

JSX原理要明白JSX的原理，需要先明白如何用 JavaScript 对象来表现一个 DOM 元素的结构?看下面的DOM结构<div class='app' id='appRoot'> <h1 class='title'>欢迎进入React的世界</h1> <p> React.js 是一个帮助你构建页面 UI 的库 <...

2019-07-12 10:53:29 578

基本使用：// 从 react 的包当中引入了 React。只要你要写 React.js 组件就必须引入React, 因为react里有一种语法叫JSX，稍后会讲到JSX，要写JSX，就必须引入Reactimport React from 'react'// ReactDOM 可以帮助我们把 React 组件渲染到页面上去，没有其它的作用了。它是从 react-dom 中引入的，而不是从 r...

2019-07-11 21:43:36 445 1

原创 React

React的起源和发展React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。React与传统MVC的关系轻量级的视图层库！A JavaScript library for building user interfac...

2019-07-11 20:10:58 226

原创 create-react-app的安装和项目的创建

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...

2019-07-11 19:26:05 2498

原创 cli的搭建

cli概念：cli是vue提供的一个用来快速构建项目环境的一个工具，底层使用的是webpackcli目前有两个版本：cli2和cli3 -----cli3对电脑的配置有一定要求cli的使用1.cli的安装-----npm/cnpm/yarn 都可以使用$ yarn add @vue/cli global //这个是cli3的版本$ yarn add @vue/cli-ini...

2019-07-03 11:17:14 566

原创 Vue的生命周期

生命周期概念：Vue中的生命周期指的是组件从创建到销毁一个过程，在这个过程中，我们在每一个特定的阶段会触发一些方法（这些方法具备一些功能），我们给这些方法起了个名字叫做（生命周期钩子函数/ 组件钩子）用途：因为我们想在生命周期钩子中实现项目功能，那么我们必须知道每一个钩子函数的具体用途Vue的生命周期分为三个阶段，分别为：初始化，运行中，销毁，一共8个钩子函数注意：生...

2019-06-30 23:02:18 845

原创 Vue的组件

Vue的组件前言Vue 是构造器函数Vue.extend() 是 vue用来扩展 vue功能（组件）的Vue决定不进行实例化Vue.extend(),vue借鉴了react,react中组件是以标签的形式使用的，vue 决定组件要以标签的形式呈现为了符合 html / html5的规则，所以组件的标签化使用必须注册，注册说白了就是用来解析这个标签化的组件未html能识别的标签...

2019-06-30 18:48:43 268

原创虚拟dom && diff算法

虚拟dom概念：虚拟dom是一个Object对象模型，用来模拟真实dom节点的结构虚拟dom的使用基本流程：1-获取数据（ ajax fetch ）var data = { id: 1, name: '张三' }2-创建vdom<div class = "box"> <ul> &l...

2019-06-28 22:18:24 135

原创 Vue组件通信的方式

组件通信组件可以说是一个具有独立功能的整体，但是当我们要将这些组件拼接在一起时，这些组件相互之间要建立联系，这个联系我们就称之为通信。组件通信的方式父子组件通信-----props1.在父组件的模板中将数据用单项数据绑定的形式，绑定在子组件身上<Son :money = "money"/>2.在子组件的配置项中可以使用一个props配置项来接收这个数据，接收时，pro...

2019-06-27 21:40:49 162

原创 Vue的指令及其用法

指令指令是绑定在dom属性上的这种属性绑定的形式就是为了操作dom，我们给这种属性起了一个好听的名字Vue 1.0 叫它属性指令（借鉴Angular来的）Vue 2.0 统称为 ‘指令’指令是用一个 v-xxx 表示指令是用来操作domVue中不允许直接操作dommustache语法 — 属性写法的属性值是直接写数据的，不需要使用 {{ }}v-html可以...

2019-06-23 22:16:02 3413

原创 watch侦听属性

watch作用用来监听data中定义的数据，当data中定义的数据发生了变化，那么watch中的key就会触发watch是一个对象watch: {}watch中可以设置多个类型的键值使用方式（重点）方法watch: { fn () {} }对象：（深度监听）watch: { fn: { handle...

2019-06-23 20:52:15 1244

原创 Vue框架型获取数据的两种常用方式axios/fetch

第一种：axios1.获取模拟假数据（mock-json）----get获取//先引入axios和V的cdn或是安装对应的模块//https://www.bootcdn.cn/<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script><script src="https://cdn.bo...

2019-06-21 21:15:08 728

原创如何用Node.js流（stream）来生成压缩包

业务：利用Node.js流来生成压缩包const fs = require( 'fs' );const zlib = require( 'zlib' );//制作压缩包的模块//创建可读的流const readStream = fs.createReadStream('./xxx.txt')//需要压缩的文件// 创建空压缩包const gzib = zlib.create...

2019-06-21 16:56:18 923

原创一段代码看懂v-html和v-text的区别

先引入vue.js的cdnhttps://www.bootcdn.cn/或是进行一个vue的模块的下载//模块化安装 npm/cnpm/yarn i vue -D<body> <div id="app"> <p v-html = "msg"></p> <p v-text = "msg"...

2019-06-19 17:42:22 1891 1

转载什么是前端开发规范？

前端的开发规范本文主要从以下几个方面来概述前端的开发规范目录构建规范前端命名规范前端工作规范开发文档的书写规范1. 前端目录构建规范我们从命名原则、根目录、业务逻辑等方面进行目录构建1.1 命名原则：简洁明了（如下：）* src 源代码* img 图片资源* js JavaScript脚本* dep 第三方依赖包（development package...

2019-06-18 11:49:54 305

原创 Node.js中中文乱码有中文字符的情况及解决的方式

第一种：设置请求头response.writeHead( 200, { 'Content-Type': 'text/html;charset=UTF8' // 小写也可以 utf8 })const http = require( 'http' )const port = 8001const host = 'localhost'const serv...

2019-06-13 23:10:04 1221

原创 web服务器渲染数据发送前台

web（静态）服务器渲染数据发送前台服务器：可以运行在服务端的一个网站（站点）服务器种类：①web服务器（静态服务器）可以运行在浏览器中的服务器②api服务器（后端接口）后端语言暴露一个数据接口，用于前端数据请求（ajax,fetch）Node.js中原生创建web服务器(静态服务器)基本步骤：引入http模块createServer( callback ) 创建服务器，ca...

2019-06-13 23:05:57 370

原创 http爬虫

http爬虫http模块的数据请求： get,post,request爬虫：爬去数据，但并不是所有网站都能爬取的，有反爬虫流程：后端数据请求 —> 数据分析 —> 数据清洗 ----> 数据前台发送 const http = require( 'http' )//引入http模块 const cheerio = require( 'cheerio' )//引入che...

2019-06-13 23:00:17 639

原创 express创建api服务器（接口）

express创建api接口首先，我们在终端打开，用命令创建一个文件夹$ npx express -e port // 创建一个port文件夹如果你的npm版本不是5.2+以上，那么建议你可以先全局安装express再创建$ npm i express-generator -g$ cnpm i express-generator -g$ yarn add express-...

2019-06-13 21:06:33 3419

原创什么是前端异步流程(工具)？

前端异步流程工具1.传统原生异步回调函数事件2.使用异步流程工具（别人封装好的东西）-es6 PromisePromise 是异步编程的一种解决方案，比传统的解决方案–回调函数和事件－－更合理和更强大。它由社区最早提出和实现，ES6将其写进了语言标准，统一了语法，原生提供了Promise所谓Promise ，简单说就是一个容器，里面保存着某个未来才回结束的事件(通常是一个...

2019-06-12 19:25:42 436

原创什么是前端模块化？

前端模块化模块化：是具有特定功能的一个对象（广义理解）模块定义的流程：1.定义模块（对象）2.导出模块3.引用模块好处：可以存储多个独立的功能块，复用性高种类：AMD（ require.js）CMD ( sea.js )Common.jsCommonJs用在服务器端，AMD和CMD用在浏览器环境三者的一个详细介绍：https://www.jianshu.com/p...

2019-06-11 18:30:16 5133

原创自定义组件（插件）自定义指令自定义的事件 cli

1. 自定义组件（插件）案例：封装一个 Loading 组件Loading是用来做什么的？基于用户体验loading使用方式很多第三方的ui库/组件库自定义封装过程：创建一个目录文件夹，称之为Loading在loading中创建一个叫做component目录，用来放模板在Loading目录下创建一个index.js~ import Vue from 'vue' ...

2019-05-29 21:51:57 435

原创 vue中的过渡&动画动态组件过滤器

vue中的过渡&动画vue中实现过渡或是动画一共提供了这样四种形式：在 CSS 过渡和动画中自动应用 class — 自己写css3动画可以配合使用第三方 CSS 动画库，如 Animate.css – 别人写好了类名，我们用在过渡钩子函数中使用 JavaScript 直接操作 DOM – 自己用原生js来写动画可以配合使用第三方 JavaScript...

2019-05-28 22:47:50 367

原创 vue的组件组件的注册组件的使用组件的嵌套

Vue的组件1. Vue.js通过Vue.extend() 方法来扩展组件的使用2. Vue.extend( options ) 里面的options参数和 Vue(options) 的options参数几乎是一致的3. new Vue出来的 ViewModel( 视图模型 ) 也是一个组件，我们称之为 ‘根实例组件’ ，叫 ‘Root’ 组件4. Vue中组件的表现形式是类似于标签的...

2019-05-28 11:58:53 475

原创数据请求 mixin混入 computed计算属性 watch侦听属性

数据请求数据请求在前端开发中的使用有两种形式使用原生javascript提供的数据请求ajax( 四部曲，一般需要我们结合Promise去封装，使用不是很便利，但是效率很高 )fetch( 本身结合了Promise,并且已经做好了封装，可以直接使用 )使用格式：使用别人封装好的第三方库目前最流行的，使用率最高的是 axiosvue中我们最常使用的vue 1...

2019-05-26 21:50:24 1922

原创 Vue的事件事件的修饰符按键的修饰符双向数据绑定

Vue的事件1.指令：v-on2.格式：v-on:eventType = “事件处理程序名称”3.简写：@eventType = ‘事件处理程序名称’如果我的参数中需要事件对象解决：在方法调用的时候，使用一个叫做 $event的作为实际参数<body> <div id="app"> <h3> 普通事件 </h3> &...

2019-05-26 21:07:39 174

原创模板语法 mustache语法双大括号语法条件渲染

模板语法 mustache语法双大括号语法条件渲染Vue的两大核心：指令和组件今天来讲一讲指令 —>作用：是用来操作DOM的，指令就是绑定在DOM身上的一个属性，这个属性具备一定的功能，这个功能用来操作DOM以后我们不在像以前一样，先获取DOM，在操作了，我们现在可以直接使用指令来操作DOM这个指令需要模板语法的支持，所以我们采用jsx语法糖模板语法模板语法...

2019-05-26 20:50:34 1242

原创 Vue.js

Vue.js什么是框架？什么是库其实框架是有一套自己的生态系统的（vue.js）而库是没有自己的生态系统的，它就是一个工具（jQuery）查看vue.js的源代码使用的是全局变量形式jsx( javascript + xml )使用script标签引入Vue.js实例化全局暴露的变量Vue构造器函数得到一个实例配置Vue构造器函数中的配置项，一个配置项一个功能...

2019-05-22 21:59:18 196

原创 api接口暴露

api接口的暴露首先呢，我们要测试接口是否正常，我们可以使用测试工具：postman / insomniaBE: BackEnd 后端express中一个路由即一个接口api接口暴露的方式有两种：第一种：使用模板进行暴露，但是要将数据做字符串转换，然后使用ejs的非转义输出 router.get('/',function( req,res,next ) { res.re...

2019-05-21 22:02:05 2795

原创 mongoose模块

mongoose模块什么是Mongoose呢？Mongoose库简而言之就是在node环境中操作MongoDB数据库的一种便捷的封装，一种对象模型工具，Mongoose将数据库中的数据转换为JavaScript对象以供你在应用中使用。官方文档：https://www.npmjs.com/package/mongoosehttp://mongoosejs.com/Mongoose的操作流程...

2019-05-21 21:20:43 743

原创 MongoDB下载与安装

MongoDB下载与安装MongoDB官网地址：https://www.mongodb.com/MongoDB下载地址：https://www.mongodb.com/download-center#community下载的界面选择适合自己系统的版本进行下载：根据你的系统下载 32 位或 64 位的 .msi 文件，下载后双击该文件，按操作提示安装即可安装过程如下：勾选同意协议选择...

2019-05-20 22:57:23 513

转载 Node.js服务器

Node.js服务器Node.js服务器有两种web服务器（静态服务器）api服务器（动态服务器）数据接口Node.js web服务器（静态服务器） var http = require( 'http' ); var port = 8080 ; var hostname = '127.0.0.1' var path = require( 'path'...

2019-05-19 19:39:50 240

原创什么是Node.js？

问题： js中如何实现异步操作解决： 1. 回调函数 √ 2. Promise 3. gengator函数 4. async函数 5. Node.js自带的 nextTick setImmediate 6. 别人封装的 async.js 库

2019-05-15 22:23:11 115

ThisOnly的博客