- 博客(24)
- 收藏
- 关注
RSS订阅原创 使用react+swiper实现简单的banner效果
React + swiper 的 bannerimport React from 'react'import Swiper from 'swiper'const Item = ( props ) => { //props.item.src //props.src return ( <div className="swiper-slide"> ...
2019-06-17 22:23:20
1330
原创 React生命周期
React生命周期初始化在组件初始化阶段会执行constructor通过super来继承父类身上传递过来的属性，让后当前组件通过this.props接收用来初始化一个状态用来初始化绑定一个方法，将this传递给这个方法注意：不写方法的触发（ 订阅 ）不写具有副作用的代码（ 比如： 计时器 ）static getDerivedStateFromProps()17版本...
2019-06-17 22:21:49
114
原创 vue-router进阶
vue-router 进阶动态路由 & 路由传参 & 路由接参动态路由：url中路由是改变的，但是改变路由公用一个组件举例：localhost:3000/detail/001?a=1&b=2localhost:3000/detail/002?a=2&b=3detailvue cli3 配置反向代理在根目录下面新建一个 vue.c...
2019-05-31 23:39:01
138
原创 vue-router基础
RouterSPA （ single page App ） 单页面应用多页面应用有多个html文件，通过a标签的连接联通各个页面缺点开发起来太冗余，编译、压缩很耗时间页面之间的跳转速度太慢单页面应用不需要刷新页面，因为它就是一个页面这个页面内容在切换单页面内容之间的切换要想实现我们就是用路由了如今我们的app主要的开发形式就是spavue路由功能...
2019-05-31 23:37:46
80
原创 cli3的使用方法
clicli是什么？cli是vue提供的一个快速（自动化） 构建项目的一个脚手架 ，类似于我们之前所学的 express-generatorcli的版本目前最新 3.x老版本是 2.xcli的底层的自动化工具是： webpackcli的安装npm/cnpm/yarn 都可以使用$ yarn add @vue/cli global 这个是cli3的版本...
2019-05-31 23:36:03
1246
原创 cli的安装
clicli是什么？cli是vue提供的一个快速（自动化） 构建项目的一个脚手架 ，类似于我们之前所学的 express-generatorcli的版本目前最新 3.x老版本是 2.xcli的底层的自动化工具是： webpackcli的安装npm/cnpm/yarn 都可以使用$ yarn add @vue/cli global 这个是cli3的版本...
2019-05-29 21:09:28
334
原创 自定义（组件、指令、事件）和组件通信
1. 自定义组件（ 插件 ）案例： 封装一个 Loading 组件Loading是用来做什么的？提升用户体验loading使用方式很多第三方的ui库/组件库自定义封装过程：创建一个目录文件夹，称之为Loading在loading中创建一个叫做component目录，用来放模板在Loading目录下创建一个index.js~ import Vue from 'vue' ...
2019-05-29 21:08:25
232
原创 swiper的使用和优化
swiper开源、免费、强大的触摸滑动插件swiper使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">...
2019-05-28 23:28:35
1324
1
原创 过滤器和生命周期
过滤器vue 1.x内部提供提供了 10 个过滤器， 这10个过滤器是针对 数字 纸币符号 日期 大小写 小数位数等的格式化什么叫过滤器？格式化数据的一个工具举例：12.22225 —> 12.2Tue May 28 2019 10:15:08 GMT+0800 (China Standard Time) – > 2019/05/28过滤器一样也有两种声明形...
2019-05-28 23:27:47
712
原创 slot和transition动画
slotslot 插槽作用： 可以让我们在组件中书写内容transition动画vue中实现过渡或是动画一共提供了这样四种形式：- 在 CSS 过渡和动画中自动应用 class — 自己写css3动画- 可以配合使用第三方 CSS 动画库，如 Animate.css – 别人写好了类名，我们用- 在过渡钩子函数中使用 JavaScript 直接操作 DOM – 自己用原...
2019-05-28 23:26:41
295
原创 Vue中组件使用方式
组件组件化组件化是当今最为流行的一种可复用性增加的方法，随着当今前端开发的复杂度更加，这个组件化变得越来越流行组件的基础组件是一个具备html css img js …等的一个聚合体组件的表现形式就类似一个标签组件至少得有模板注册组件Vue.js通过Vue.extend() 方法来扩展 组件的 使用Vue.extend( options ) 里面的options参...
2019-05-27 22:21:07
337
原创 Vue基础属性
computedcomputed 计算属性案例： 为什么vue中要使用计算属性？比如： 让一个字符反向分析： <p> {{ msg.split('').reverse().join('') }} </p> 上面代码的写法，有些违背关注点分离，而且会让我们的DOM结构看起来不简洁解决方案：从上面的案例得出两个结论：1. 我们的使用结...
2019-05-24 22:14:56
459
原创 Vue中数据请求
数据请求数据请求在前端开发中的使用有两种形式使用原生javascript提供的数据请求- ajax( 四部曲，一般需要我们结合Promise去封装，使用不是很便利，但是效率很高 )- fetch( 本身结合了Promise,并且已经做好了封装，可以直接使用 )使用格式：使用别人封装好的第三方库目前最流行的，使用率最高的是 axiosvue中我们最常使用的vue 1...
2019-05-24 22:09:58
195
原创 Vue基础事件
事件指令v-on格式v-on:eventType = “事件处理程序名称”简写@eventType = ‘事件处理程序名称’参数如果参数中需要事件对象，在方法调用的时候，使用一个叫做 $event的作为实际参数事件修饰符修饰符事件的修饰符格式： v-on:click.xxx = ‘handler’xxx指的是修饰符的名称问题： 修饰符使用有什么好处...
2019-05-23 22:48:01
224
原创 Vue基础指令
指令格式：v-xxx = “mustache语法”v-xxx = “msg”v-xxx = “{{msg}}” ×v-html 将一个数据展示在一个DOM内容中， innerHTML( html属性 )- 防止脚本攻击 xss CSRFv-bind 单项数据绑定- 使用技巧： 凡是 DOM 的属性要和数据进行绑定，那么我们就可以使用 v-bind- 格式...
2019-05-23 22:46:10
123
原创 模板语法 mustache语法 （双大括号语法）
模板语法 mustache语法 双大括号语法指令Vue指令组件作用： 是用来操作DOM的，指令就是绑定在DOM身上的一个属性，这个属性具备一定的功能，这个功能用来操作DOM以后我们不在像以前一样，先获取DOM，在操作了，我们现在可以直接使用指令来操作DOM这个指令需要模板语法的支持，所以我们采用jsx语法糖模板语法模板语法支持性还是很高的，数据类型都是支持的，但是不支持...
2019-05-23 22:38:39
1236
原创 前端发展史+初识Vue
1. 前端框架的发展历史前端工程师（ 攻城狮 ）12年： html css + div13年： js 加入 jquery14年： MVC angular1.0 react16年： vue 微信小程序2. Vue.js第一次使用什么是框架？什么是库框架是有一套自己的生态系统的库是没有自己的生态系统的， 它就是一个工具查看vue.js的源代码目前学习使用的是全局...
2019-05-22 21:26:23
257
原创 MongoDB数据库
MongoDB关系型数据库概念，常用的数据库有哪些？Access，mySql，SqlServer，oracle，db2等非关系型数据库概念，常用数据库MongoDB，Redis，HBase，CouchDB等mongodb 和 sql区别sql 是关系型数据库由表和行组成NoSql 是非关系型数据库由集合和文档组成bson是mongodb的数据存储格式文档型数据这个名...
2019-05-20 23:14:49
89
原创 前端三种通信形式
通信前端三种通信形式一种是基于后端的基于net模块的socket示例：客户端 /* socket 1. 创建一个socket,然后连接server( url ) net.Socket() 2. 发送信息给服务器 3. socket通信 client可以进行数据的编写和发送 ...
2019-05-20 23:13:28
1954
原创 原生JS提供的数据请求及repress中间件的使用
前端原生js提供的数据请求有两种ajaxfetchgulp 4.x多任务执行串行并行前端渲染 vs 后端渲染前端渲染是通过ajax请求数据，然后通过js语法将数据展示到页面中，称之为前端渲染后端渲染是通过后端语言 + 后端模板( ejs ) 将 页面整个发送给前端后端模板ejspug( jade )art-template现在流行的： ...
2019-05-20 23:10:33
284
原创 前端异步流程工具
前端异步流程工具Promise const p1 = new Promise ( function ( resolve, reject ) { resolve( '任务一' ) }) .then ( function ( data ) { console.log( data ) }) const p2 = new Promise ( function ( r...
2019-05-20 23:04:17
73
原创 NodeJS的方法、原生路由
NodeJS的方法、原生路由querystring功能：核心方法parse：将String – > Object var str = 'http://www.baidu.com:8080/001?a=1&b=2#hash=20' var obj = qs.parse( str,'?','&' )stringify：将Object -> ...
2019-05-15 22:33:42
580
原创 NodeJS模块化
用Node.js创建一个静态服务器,然后将项目部署在这个服务器中源代码：var http = require( 'http' );var port = 8080 ;var hostname = '127.0.0.1'var path = require( 'path' ) // 磁盘路径处理的模块var fs = require( 'fs' ) // 操作文件、目录的模块...
2019-05-14 19:36:57
168
原创 Node.js入门
什么是Node.js?Node.js是一门后端语言基于Chrome v8引擎的js运行环境除此之外：还有其他的引擎： 单片机、actionscriptNode.js有两大特征事件驱动事件的定义（发布）事件的触发（订阅）非阻塞式 I/O 模型非阻塞 ： 执行一个任务时，不需要等待这个任务执行完成，就可以去执行其他任务I/O： 磁盘文件操作 / 数据库数据操作...
2019-05-14 08:37:16
76
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人