- 博客(36)
- 收藏
- 关注
RSS订阅原创 vue-cli3开发中的环境配置
创建项目vue create projectName环境配置的主要体现BASE_URL不同（如果是一个很大的项目，则在.env.命令名的文件中配置DOMAIN目录）打包方式不同，在默认的打包配置下，webpack会根据NODE_ENV的值进行不同的打包主要运行环境参数(process.env)process.env.BASE_URL 项目根路径process.env.NOD...
2019-10-28 11:19:00
324
原创 react生命周期
生命周期存在于有状态的组件（类组件中）因为生命周期存在于React.Component中，而类组件继承了它类组件中必须定义render函数生命周期的实现就是重写这些钩子函数初始化阶段（挂载阶段）即当组件实例被创建并插入DOM中时static defaultProps实例初始化之前调用（constructor）一次并缓存对象因为组件未初始化，所以不能使用this作用：保证t...
2019-06-17 20:41:23
145
原创 react组件通信和事件
ref链组件通信ref = ‘child’ref = { el => this.girl = el }使用：父级组件中：charaChange = () => { this.girl.charaHandler()}父组件传给别子组件<Child change = { this. charaChange }</Child>在别的子组件中...
2019-06-17 20:40:49
310
原创 React项目创建以及结构
react是什么React是一个声明式，高效且灵活的用于构建用户界面的JavaScript组件库，使用react可以将一些简短，独立的代码片段合成复杂的UI界面，这些代码片段被称作组件react介绍facebook公司的开源项目 2013年5月 开源（Angar2012年开源，vue2016年开源）js框架（MVC框架，专注于V）能够构建大型应用vue面向中小型应用市场项目（饿...
2019-06-17 20:38:53
572
原创 vue自定义:directive自定义指令，自定义事件，自定义组件
自定义指令指令指令是用来操作DOM的指令的使用形式：属性自定义指令方式：全局注册指令Vue.directive（指令的名称，指令的配置项）局部注册指令directives:{ ‘指令名称’ : 指令的配置项 }指令的配置项指令的配置项提供了5个钩子函数这些钩子函数中的参数为 el，binding，vnode，oldVnodeel：指令绑定...
2019-05-30 20:25:10
1920
原创 vue组件通信
组件通信是单向的父子组件通信父组件将自己的数据传递给子组件父组件将自己的数据通过属性绑定的形式传递给子组件子组件在自己的配置项中通过 props 来接收这个属性Vue.component(‘Son’,{template: ‘#son’,// props: [‘aa’],props: {// 属性： 属性的数据类型 给数据做属性验证，验证数据类型‘aa’: Nu...
2019-05-30 20:18:57
99
原创 vuejs生命周期概述以及使用
生命周期当前组件在创建到销毁经历的一系列过程，称之为生命周期初始化阶段钩子函数描述数据真实DOM项目中使用beforeCreate表示组件创建前的准备工作， 为事件的发布订阅 和 生命周期的开始做初始化无无项目中一般不使用created表示组件创建结束有无异步数据请求， 然后可以进行一次默认数据的修改beforeMount表示组件装载前...
2019-05-28 19:48:17
789
原创 slot插槽、transition动画、filter过滤器、动态组件和keep-alive缓存
slot（插槽）因为在组件嵌套时，子组件的内容被绑定的模板覆盖了，使得在子组件中写html无效。解决：引入标签,在子组件的模板中使用，相当于一个站位符，把html放到slot标签处具名插槽用一个slot标签来表示全部的html内容，明显无法满足开发的需求解决：通过给slot设置name属性，再让html中的标签通过slot = ‘slotName’实现具体绑定。<div...
2019-05-28 17:52:37
329
原创 vue组件化开发（component）
组件说明Vuejs通过Vue.extend（options） 方法来扩展组件的使用options参数和 Vue(options) 的options参数几乎是一致的new Vue出来的 ViewModel( 视图模型 ) 也是一个组件，我们称之为 ‘根实例组件’ ，叫 ‘Root’ 组件Vue中组件的表现形式是类似于标签的，要想像标签一样使用，就必须得符合 h5 的规则，也就是必须要进行组...
2019-05-27 19:20:07
313
原创 vuejs的使用-组件
vue的使用：组件组件就是vue实例中的配置项配置项 elvar vm = new Vue({ el: '#app', })//el为一个挂载点，绑定一个DOM元素，相当于把DOM元素放到Vue实例中，可以使用通过指令，mustache语法来操作它//另一种写法为new Vue({}).$mount("#app")配置项...
2019-05-23 22:11:06
109
原创 vuejs的使用-指令
vue指令的使用<div id="app"> <p> {{ this.$data.msg }}//使用vm上的$data属性 //{{ }}的语法叫mustache语法 //在DOM结构中使用js语法，这个类型称之为jsx语法糖 </p> <p> {{ thi...
2019-05-23 22:10:15
121
原创 Vuejs原理
vuejs源码的结构组成：匿名函数 + 严格模式1.没有名字，那么无法再外部通过函数名使用或是操作这个函数，那么相对来说比较稳定，安全2.严格模式使用，让这个匿名函数的语法更加的标准和严格格式function(形参1,,形参2...){})(实参1，实参2...)(function ( global , factory ) { //严格模式 'use strict'...
2019-05-23 22:09:04
966
1
原创 通过express实现restfulapi
在express中给router设置不同的请求接口实现restful规范express实现后端渲染app.js配置routerrouter通过api传数据给ejs渲染模板ejs实现静态和动态的页面渲染router通过api传数据前端请求方式getpostputdeleteheadall以上的请求方式统称为： restful api通过restful api...
2019-05-17 21:15:13
1036
原创 前端异步流程工具
传统异步处理回调函数事件计时器流行的异步处理PromiseGenerator 函数Async 函数Nodejs 自带多大的异步处理工具 nextTick,setimmidate第三方 async.js 库Promiseconst p2 = new Promise(function(resolve, reject) {setTimeout(function() {...
2019-05-16 12:03:42
90
原创 nodejs内置模块深入学习
使用时按照nodejs官网使用httpcreateServer(callback（req,res）)用于创建静态服务器用法//设置响应头信息，防止中文乱码response.writeHead(200, {'Content-type': 'text/html;charset=utf8'})响应输出res.write（data）响应结束res.end([ d...
2019-05-15 23:06:09
344
原创 nodejs初识模块化
前端模块化AMD （require.js）CMD （sea.js）Common.js （module.export rerquire）es6 模块化 （export import）nodejs模块化Common.js规范Node.js使用了Common.js规范Node.js中Common.js规范有三种使用类型：内置模块 path url fs pr...
2019-05-14 20:35:50
145
原创 nodejs简介以及nodejs包管理
什么是nodejsnodejs是一门后端语言基于Chrome v8引擎的js运行环境（其他引擎：单片机（嵌入式），actionscript（flash））nodejs有两大特征事件驱动事件的定义（发布）事件的触发（订阅）非阻塞式I/O 模型非阻塞 ： 执行一个任务时，不需要等待这个任务执行完成，就可以去执行其他任务I/O： 磁盘文件操作 / 数据库数据操作...
2019-05-13 19:18:03
456
原创 vue-cli安装方法
vue-cli安装别名 脚手架作用：快速构建vue项目，底层配置使用的就是webpack版本cli2 cli3包管理工具优先级：yarn>cnpm>npm （npm安装的东西可以被cnpm和yarn的安装覆盖）安装cli3npm install @vue/cli -g cli3的版本npm install vue-cli -g cli...
2019-04-25 19:21:14
99
原创 前端工程化工具webpack
webpack前端工程化工具grunt （2015）资源打包单元测试gulp（2016 2018-4.0）流式操作工具资源打包broserify（webpack的前身 只能解决js文件）webpack（主流 3.0之后能解决除了js文件之外的文件 目前4.30.0）资源打包工具，比如：js文件打包压缩，img打包压缩。。可以解决模块化依赖问题es6模块化...
2019-04-25 08:24:37
220
原创 动态组件、异步组件以及一些不常用指令
动态组件&异步组件动态组件<component is = 'A'></component>//组件是A实现动态切换<button @click='type = type ==="A"?"A":"B"'>切换</buttton><component :is = 'type'></component>ne...
2019-04-24 13:57:06
102
原创 vuejs组件的生命周期
组件的生命周期1、组件有那几个阶段初始化阶段运行中阶段销毁阶段2、初始化阶段分为两个大阶段，每一个大阶段包含两个生命周期钩子函数----生命周期–》人的一生 钩子函数—》（人在某个阶段做得一些事情，这些事情是自动触发）有四个钩子函数，（一个都不能少）beforeCreate表示组件创建前的准备工作，为事件的发布订阅和生命周期的开始做准备组件未创建，所有没有this...
2019-04-23 22:20:14
349
原创 vuejs中虚拟DOM及diff算法
虚拟DOM及diff算法虚拟DOM（virtual dom）用一个简单的对象去代替复杂的dom对象，存储了对应dom的一些重要参数，在改变don之前，会先比较相应虚拟dom的数据，如果需要改变，才会将改变应用到真实dom上Diff算法（差异算法）Diff算法（差异算法）：可以用新渲染的对象树去和旧的树进行对比，记录这两棵树差异，记录下来的不同就是我们需要对页面真正的DOM操作，然后把...
2019-04-23 21:58:19
388
原创 Vuejs的属性验证、过滤器以及自定义指令
属性验证 props在组件通信时，作为接收值得容器（数组，当这个值要进行属性验证时要写成对象形式）props接收的值可以在该组件中直接使用props:{ 'money':Number }问题：不能对数据的取值范围进行判断解决：validator props:{ key:{ validator（value）{ return value的条件 ...
2019-04-23 21:57:13
356
原创 vuejs组件通信
组件通信所有的组件通信都是单向的父子组件通信A:邦定的是简单数据类型1、父组件中定义数据，通过单向数据绑定属性把父组件的数据绑定在子组件身上，属性是自定属性2、子属性通过配置项中的props接收数据，props可以是一个数组，数组中放的是自定义属性3、这个自定义属性可以像data的属性一样直接使用4、父组件中数据一旦修改，子组件中的通信数据也会改变（单向数据邦定） &...
2019-04-22 17:00:29
103
原创 vuejs小案例
实现简易的todolist安装 $ cnpm install -g vue-cli $ vue # 回车，若出现vue信息说明表示成功 # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # 这里需要进行一些配置，默认回车即可 This will install Vue 2.x ver...
2019-04-17 11:52:55
609
原创 开发文档规范
开发文档规范前端的开发规范1. 目录构建的规范命名原则：简洁比如： src 源代码 img 图片资源 js JavaScript脚本 dep 第三方依赖包不使用复数比如： 不使用 imgs docs根目录（root）结构按职能划分比如：src 源代码（逻辑）srccommon 公共资源imglogo.pngsprites.pngcssreset.css...
2019-04-17 11:42:11
984
原创 vuejs的初步使用
vue的构成指令（操作dom元素）组件（vue实例中的属性）mustauch 语法糖 {{ }} 模板语法 支持js语法模板语法 window中的一些方法不能用 alert console.logif要以三元运算表达式使用方法要使用匿名函数（模板语法中只能使用一句语句） （使用定义好的函数要写在methods属性中）指令：v-循...
2019-04-17 11:25:26
136
原创 vuejs的源代码分析
vuejs 源代码由一个匿名函数包裹源代码 （安全性高，减少函数命名冲突）（function(形参){}）（实参，即运行该函数）底层代码封装 匿名函数作用 确定vuejs这个库的使用方法， 使用的导出方式 exports 或 module.exports 使用amd中的define模块化 把vue变成全局对象（把vue挂在了window对象...
2019-04-17 11:23:13
209
原创 异步处理
Promise通过new Promise()参数是一个回调函数， 回调函数中有两个参数 （resolve reject）resolve也是一个函数， 函数中接收参数， 参数为任务resolve 中任务主线程 ， 而then中任务是放在异步队列中的，执行在主线程之后Promise对象的apithen(callback)catch(cb)all raceall([value...
2019-04-15 17:09:58
61
原创 RMVC与mongoose
server1. webServer2. apiServer( 后端工程师， 前端写接口 ) ---》 测试工具（postman insomina ） 1. express 1. express中一个路由就是一个接口 2. koa架构思想需求： 将express框架 ---》 RMVC框架RMVC（把route.js中的接口分离，只留下路由中间件）R ...
2019-04-12 08:44:39
243
原创 MongoDB
koa(扩展知识， 建议学习)1. koa是express超集（进阶版）前后端分离和耦合概念介绍1. 面向过程 -》 面向对象 --》 面向服务数据库 Node.js mongodb(bson json的超集)分类： 关系型数据库： MySql 非关系型数据库: MongoDBMongoDB安装1. 环境变量设置2. 系统服务添加有问题3. 安装 系...
2019-04-11 08:38:35
132
原创 MongoDB
koa(扩展知识， 建议学习)1. koa是express超集（进阶版）前后端分离和耦合概念介绍1. 面向过程 -》 面向对象 --》 面向服务数据库 Node.js mongodb(bson json的超集)分类： 关系型数据库： MySql 非关系型数据库: MongoDBMongoDB安装1. 环境变量设置2. 系统服务添加有问题3. 安装 系...
2019-04-10 20:18:48
45
原创 nodejs express服务器框架
linux命令mkdir 创建文件夹vim 简写 vi 创建文件的rm -rf 文件名称 删除递归删除find ./ -name ‘文件名称’ -print -exec rm -rf {} ;举例： find ./ -name ‘node_modules’ -print -exec rm -rf {} ;cat 文件名称 查看某个文件的内容前端渲染 vs 后端渲染前端拿到数据...
2019-04-10 20:16:49
139
原创 nodejs 模块化
1. vs code 里面如何切换自定义终端？1.crtl+shift+p 输入setting打开json文件，把"terminal.integrated.shell.windows": "C:\WINDOWS\System32\cmd.exe"改成需要安装的终端的路径2. 浏览器 vs node异：1. node里面没有 BOM DOM2. node多了很多自带的api同：1. 都...
2019-04-10 20:15:03
80
原创 nodejs的初步使用方法
1. vs code 里面如何切换自定义终端？2. 浏览器 vs node异：node里面没有 BOM DOMnode多了很多自带的api同：都是chrome v8都支持js都支持 ECMA Script3. 需求： sum这个方法， 我想三个参数 ， 计算三个参数值？Node.js 命令行有时候用起来不方便解决： 我们使用文件 .jsNode.js命令行退出t...
2019-04-09 08:25:13
121
原创 npm学习
1. vs code 里面如何切换自定义终端？2. 浏览器 vs node异：node里面没有 BOM DOMnode多了很多自带的api同：都是chrome v8都支持js都支持 ECMA Script3. 需求： sum这个方法， 我想三个参数 ， 计算三个参数值？Node.js 命令行有时候用起来不方便解决： 我们使用文件 .jsNode.js命令行退出t...
2019-04-08 20:52:56
73
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人