weixin_57218747的博客

原创 vue数据双向绑定的原理

vue数据双向绑定的原理一 复习闭包1 闭包含义：当函数嵌套时，内部函数使用了外部函数的变量，就会产生闭包当函数可以记住并访问自己的作用域时，就会产生闭包2 闭包注意点① 队列里的代码执行完毕，同步的已经执行完了② 作用域时js代码解析时创建，关浏览器时销毁③ 作用域是来维护变量的查找规则的④ 一个函数作用域一般对应一个执行上下文，除非函数被递归调用⑤ 执行上下文是函数调用时创建，调用完销毁⑥ 执行上下文是来存函数执行时需要的数据的3 鸡肋闭包// 5.在全局作用域对应的处于活动状

原创 vant-联系人卡片

vanthttps://vant-contrib.gitee.io/vant/#/zh-CN/安装:npm i vant1 使用vant1.1 按需引入组件npm i babel-plugin-import -D1.2 配置babel（新增配置）{ "plugins": [ ["import", { "libraryName": "vant", "libraryDirectory": "es", "style": true }] ]

原创 vuex-辅助函数

vuexVuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化vuex 安装npm i vuex 1 vuex核心概念vuex是存储组件数据的集中式的仓库（如何优雅的读写仓库中的数据）state：仓库内存数据的配置getters:仓库内的计算属性action:操作数据的工具mutation:操作数据的工具仓库每一个 Vuex 应用的核心就是 store（仓库）。“s

原创 vue-promise-axios

1 回调函数1.1 回调函数定义：① 函数是不是你定义的 你定义的② 函数你要有没有调用 你没调用③ 最终函数有没有被执行 最终执行了1.2 回调函数分类：同步的回调：数组api中的回调函数基本都是同步的；promise的执行器是同步的异步的回调：定时器的回调 dom事件的回调 ajax请求的回调遇到异步回调函数需注意以下两点：① 回调什么时候进队列② 回调什么时候被执行内存结构：堆 栈 队列[外链图片转存失败,源站可能有防盗链机制,建议将图片保存

原创 vue-router

vue-router1 介绍Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：嵌套的路由/视图表模块化的、基于组件的路由配置路由参数、查询、通配符基于 Vue.js 过渡系统的视图过渡效果细粒度的导航控制带有自动激活的 CSS class 的链接HTML5 历史模式或 hash 模式，在 IE9 中自动降级自定义的滚动条行为安装脚手架vue init webpack roter-demo安

原创 vue2.0-脚手架-todolist案例

一 vue脚手架2.0安装npm install vue-cli -g查阅一下脚手架可支持的模板 vue list 可以查到 template-name使用脚手架生成项目(以下命令得运行在项目的包裹目录下)vue init webpack projectName启动项目1 进入到项目目录2 启动开发环境：npm run dev 或者 npm start(开发环境)3 启动生产环境：npm run bulid(生产打包)4 自动启动chrom:在dev中加入： --open

原创 webpack

webpack客户端 静态资源服务器 接口服务器​ 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。五个核心概念Entry：入口起点(entry point)指示 webpack

原创 less-postcss

LessLess 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端https://www.bootcss.com/也可以通过编译工具来进行编译，比如考拉:http://koala-app.com/全局安装lessnpm infonpm i less -D lessc -h 查看如何使用lessc 地址.less 编译成.css 进行编译(源文件到目标文件)1 变量@wid

原创 Eslint

EslintESLint 是一个开源的 JavaScript 代码检查工具，由 Nicholas C. Zakas 于2013年6月创建.JavaScript 是一个动态的弱类型语言，在开发中比较容易出错。ESLint 的初衷是为了让程序员可以创建自己的检测规则。一 复习ES6模块化暴露export default { } 暴露的是default代码块，内容是对象export { } 暴露代码块标识：内容要具体分析（函数，对象。。）export const

原创 git-底层-高层指令

一 版本控制版本控制最重要的就是历史记录1 集中化的版本控制系统集中化的版本控制系统诸如 cvs，svn以及 perforce 等，都有一个单一的集中管理的服务器，保存所有文件的修订版本，而协同工作的人们都通过客户端连到这台服务器，取出最新的文件或者提交更新优点：每个人都可以在一定程度上看到项目中的其他人正在做些什么。而管理员也可以轻松掌控每个开发者的权限，并且管理一个集中化的版本控制系统; 要远比在各个客户端上维护本地数据库来得轻松容易缺点：① 中央服务器的单点故障。如果服务器宕机一小时，那么

原创 babel

can i use 兼容性一 复习ES6js:ECMA(babel---ES6转ES5)DOM:（JQ VUE react)BOM:(window.loaction.href)ES6:1 新增语法let const async await 拓展运算符 for of ()=>解构赋值 import export2 新增APIObject.assgin()Promise通病：兼容性不高二 Babel解决ES6的兼容性问题 chr

原创 react-移动端项目

移动端项目一 明确案例的需求需要理解的概念有：手机验证码的登录手机验证码的获取第三方平台的授权登录第三方平台用户信息的获取二 antd的基本使用需要理解的概念有：React的UI框架有哪些https://ant.design/docs/react/introduce-cnhttps://material-ui.com/zh/https://zijieke.com/semantic-ui/https://react-bootstrap.github.io/https://

原创 React-Redux

React-Redux一 React-Redux的应用1.学习文档英文文档: https://redux.js.org/中文文档: http://www.redux.org.cn/Github: https://github.com/reactjs/redux2.Redux的需求状态的集中管理任意页面与组件之间的数据传递状态管理的可预测数据的本地化缓存提升性能随着对JavaScript单页应用程序的要求变得越来越复杂，我们的代码必须比以前更多地处理状态。此状态可以包括服务器响应

原创 React路由

React路由一 对SPA应用的理解需要理解的概念有：什么是SPASPA和MPA的区别实现一个SPA如何给SPA做SEOSPA与MPA网站演示1.什么是SPA单页web应用（single-page application），翻译过来就是单页应用。2） 整个应用只有一个完整的页面3）点击页面中的链接不会刷新页面，只会做页面的局部更新4）数据都需要通过Ajax请求获取，并在前端异步展现2.SPA和MPA的区别上面大家已经对单页面有所了解了，下面来讲讲多页应用。MPA（Mu

原创 react-github案例

github案例一 react脚手架配置代理_方法一需要理解的概念有：axios模块的安装与使用什么是跨域跨域的解决方案有哪些proxy的限制有什么https://cra.docschina.org/docs/proxying-api-requests-in-development测试代理服务器项目：http://qn.chinavanes.com/test_proxy_server.zip在package.json中追加如下配置"proxy":"http://localhost

原创 react-TodoList案例

TodoList案例一 TodoList案例_静态组件需要理解的概念有：根据目标页面进行组件拆分规划样式内容的变化className与style的变化样式文件的拆分App.css以及各个模块的xxx.css样式文件如果是全局样式，可以考虑在public里进行引入todos的静态页面(opens new window)src/App.jsimport Header from './components/Header';import Footer from './components

原创 React脚手架案例

React脚手架一 初始化 react 脚手架需要理解的概念有：脚手架的作用是什么脚手架的支持技术是什么？webpack（入口、出口、加载器、模式、插件）脚手架将会做哪些工作JSX的预解析编译等模块化、组件化、工程化reac脚手架xxx脚手架：用来帮助程序员快速创建一个基于xxx库的模板项目包含了所有需要的配置（语法检查、jsx编译、devServer…）下载好了所有相关的依赖可以直接运行一个简单效果react提供了一个用于创建react项目的脚手架库: create-rea

原创 react-生命周期

生命周期-核心一 引出生命周期需要理解的概念有：React生命周期的版本React新旧生命周期的主要内容大体印象生命周期钩子函数一定执行的生命周期钩子函数render生命周期钩子函数的必须调用与执行1次[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QjNx3MAR-1622556427205)(http://qn.chinavanes.com/qiniu_picGo/react%E7%94%9F%E5%91%BD%E5%91%A8%E6%9

原创 react-事件相关

事件相关一 React 中的事件处理需要理解的概念有：React事件的原理React事件的命名规则，驼峰式需要传入函数作为事件处理函数，不是字符串。并且传入函数不需要加小括号，因为不是调用而是指向React中的事件不能通过return来阻止默认事件，必须preventDefault阻止官网了解一下什么是合成事件事件绑定this指向可以在事件绑定处利用bind可以在构造函数处利用bind可以利用箭头函数定义可以在事件绑定处利用箭头函数onClick={()=>{ this.f

原创 react-ref指向

react属性：ref指向:reference(目录，手册)一 字符串类型的 ref需要理解的概念有：React能否以真实DOM的操作方式处理对象什么时候使用ref为什么字符串形式设置ref已经过时不设ref还可以通过event获取到对象内容为什么event参数绝大多数属性都是null1.React以真实DOM的操作方式处理对象 <div id="test"></div> <script type="text/babel"> //定义组件

原创 react-props属性

react属性-props属性一 props 的基本使用需要理解的概念有：React中属性的传递方式，与class类的属性设置的差异区别React中属性的接收方式解构赋值的处理操作属性定义传递，属性使用，属性设置（组件标签），属性接收（prop） <div id="test"></div> <div id="test2"></div> <script type="text/babel"> //定义Person组件 cl

原创 css-浮动-定位-行内或行内快特点

原创 css-选择器

原创 react-state状态

react属性-state状态一 对state的理解(20)需要理解的概念有：人->状态->行为与组件->状态->驱动视图之间的比较理解通过查看this，确认实例对象的属性内容主要包括的部分理解组件包括的三大核心属性：state、props、refs理解响应式数据与普通数据之间的差异 <!-- 准备好一个容器 --> <div id="test"></div> <script type="text/bab

原创 css盒子模型

在这里插入图片描述

原创 HTML知识点

原创 初步了解react-babel-虚拟DOM-JSX-类组件-函数式组件

一 初步了解React需要理解的概念有：什么是六何分析法？利用六何分析法剖析 React如何查看哪些项目是用 reactjs 进行开发的学习 ReactJs 常用的 JavaScript 语法内容1.什么是六何分析法？5W1H（WWWWWH）分析法也叫六何分析法，是一种思考方法，也可以说是一种创造技法 (opens new window)。它在 1932 年，由美国政治学家拉斯维尔提出“5W 分析法 (opens new window)”，后经过人们的不断运用和总结，逐步形成了一套成熟的“

原创 git-github

1 Git 介绍Git 是一款开源免费的版本控制系统，是一个应用程序1.1 Git 作用版本控制系统在项目开发中作用重大，主要的功能有以下几点代码备份版本回退协作开发权限控制1.2 下载安装下载地址 https://git-scm.com/ ，安装方式与 QQ 安装相同，一路下一步，中间可以设置软件的安装路径2 Linux 常用命令Linux 是一套开源免费的操作系统，它与 Windows 属于同一类型的事物，但是操作方式却与 windows 不同。Windows 为图形化操作形

原创 webpack快速入门教程

webpack快速入门教程1、webpack 介绍什么是webpackhttps://www.webpackjs.com/Webpack是一个模块打包器(bundler)在Webpack看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理它将根据模块的依赖关系进行静态分析，生成对应的静态资源五个核心概念Entry：入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始Output：output 属

原创 Bootstrap

Bootstrap1 起步1.1 概念Bootstrap 是 Twitter 开发的 UI框架， 快速的制作WEB页面，BootStrap 中包含写好的样式、写好的JS。BootStrap 依赖于 jQuery。类似于 Bootstrap 这样的 UI 框架很多很多 …1.2 BootStrap 的版本2.x.x 3.x.x4.x.x1.3 目录结构|- css|---- bootstrap.css|- js|---- bootstrap.js|- fonts 字体文件

原创 node-包管理工具 npm

NPM介绍全称：Node Package Manager , Node 的包管理器，也是一个应用程序。包是什么Node.js 的包基本遵循 CommonJS 规范，将一组相关的模块组合在一起，形成一个完整的工具CommonJS 规范，​ 导入 require​ 导出 module.exports 工具包：依赖，模块，模组。 内置模块、第三模块（npm）、自定义模块作用通过 NPM 可以对 Node 的工具包进行搜索、下载、安装、删除、上传。借助别人写好的包，可以让我们的开发更加方便。安

原创 node-gulp插件

gulp介绍gulp是一个基于 Nodejs 的自动化构建工具，中文主页: http://www.gulpjs.com.cn/能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的合并、压缩、检查、监听文件变化、浏览器自动刷新、测试等任务使用步骤：安装 nodejs。保证 node 是 6 以上的版本。C:\Users\AppData\Roaming\npm创建一个简单的应用 gulp_test，文件结构如下：|- gu

原创 axios-引入-常用语法-源码

axios1 axios的引入1.1. axios是什么?前端最流行的ajax请求库react/vue官方都推荐使用axios发ajax请求文档: https://github.com/axios/axios1.2. axios特点基于xhr + promise的异步ajax请求库浏览器端/node端都可以使用支持请求／响应拦截器支持请求取消请求/响应数据转换批量发送多个请求1.3 axios引入引入：npm init -y安装：npm install

原创 axios从入门到源码分析 -http-xhr

axios从入门到源码分析1 HTTP相关1.1.MDN文档https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Overview1.2. HTTP请求交互的基本过程[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e9jqRug7-1621944040739)(file:///C:\Users\王秀\AppData\Local\Temp\ksohtml3944\wps1.jpg)]前台应用从浏览器端向服务器发送HTT

原创 AJAX-跨域

AJAX1 原生AJAX1.1 AJAX 简介AJAX 全称为Asynchronous Javascript And XML，就是异步的 JS 和 XML。通过AJAX可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。1.2 XML简介XML 可扩展标记语言。XML 被设计用来传输和存储数据。XML和HTML类似，不同的是HTML中都是预定义标签，而XML中没有预定义标签，全都是自定义标签，用来表示一些数

原创 MongoDB-数据库-mongoose-图形化操作

MongoDB1 简介MongoDB 是为快速开发互联网Web应用而设计的数据库系统，官方地址 https://www.mongodb.com/数据库（DataBase）是按照数据结构来组织、存储和管理数据的仓库。是一个应用程序.数据库：用于存储数据。可以通过命令操作数据。关系型数据库（结构型数据库） ： sql server mysql库表行 列商品信息表 goodsId goodsName goodsPrice createTime 用户信息表非关系型数据库（非结构数

原创 Express-静态资源-路由-ajax-session

node -Express课程1 Express简介1.1 Express的介绍Express 是一个基于 Node.js 平台的极简、灵活的 web 应用开发框架，它提供一系列强大的特性，帮助你快速创建各种 Web 和移动设备应用。简单来说Express就是运行在node中的用来搭建服务器的模块。 ejs1.2 Express的使用1.2.1 下载下载模块：https://www.npmjs.com/npm:node package managenpm i express --save

原创 http :请求响应报文-web服务-ajax-cors跨域

node：http 协议:请求响应报文-web服务-url与对象的转化-ajax-cors跨域1 梳理重点1.1搭建服务注意：① 站点创建完成后，需要通过node命令启动② 创建站点的代码如果发生变化，需要重启服务③ 当用户输入域名：端口号/a/b,会请求到createServer接收的回调函数，回调函数需要给予响应，如果没有响应那么会一直请求下去④ response.end():end 传入的信息全部在该对象内const http = require("http");// 内置模块con

原创 Node.js-json-模块化-全局对象-fs-服务-Buffer

Node.js-json-模块化-全局对象-fs-服务-Buffer1 node基础知识点1.1介绍Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，是一个应用程序。官方网址 https://nodejs.org/en/，中文站 http://nodejs.cn/node:是一个运行JS的环境。1.2 作用解析运行 JS 代码操作系统资源，如内存、硬盘、网络1.3 应用场景APP 接口服务 一个接口就是一个地址网页聊天室。动态网站, 个人博

原创 jQuery-选择器-筛选器-元素增加删除-属性样式-事件-动画-插件

jQuery一 jQuery 的基础1.1 jQuery 的版本不同的开发版本jquery.js 开发版（不压缩）jquery.min.js 产品版（压缩过）jquery.slim.js 简化版（去掉了动画功能和ajax功能）https://www.bootcdn.cn/版本号1.x.x 兼容IE6~IE82.x.x 和 3.x.x 需要 IE9 以上浏览器支持1.2 如何使用 jQuery需要把 jQuery 文件导入到 html 中，自己写的 js 代码需要在 jQuery