yangyanqin2545的博客

WARN Possible Unhandled Promise Rejection (id: 1):TypeError: undefined is not an object (evaluating ‘config.cancelToken’)throwIfCancellationRequested@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.shop_cli

详细记录本人学习react-native的过程：本人最近两天去了新单位，之后单位用的开发框架和之前接触的完全不一样，所以学习到了react-native1、首先安装软件（1）要安装的时候，大家一定要按照官网一步一步来才可以，不然特别容易出错，具体的安装细节，直接观看官网（2）Yarn的安装Yarn是Facebook提供的代替npm的工具，可以加速node模块的下载npm install yarn -g检查是否安装成功yarn -V2、react-native的一些目录结构在这个文件中与我

1、uni-app中request请求封装(1)我们将http进行一个封装import config from './config.js'let http = (options={})=>{ // 返回一个promise对象 return new Promise((resolve,reject)=>{ // 在这里发起请求 uni.request({ url:config.baseUrl+options.url, //我们请求的服务器端的地址 data:

1、在第一次将代码运行在微信开发者工具的时候，应该进行如下的配置:（1）将微信开发者工具路径进行配置；（2）在微信开发者工具中的设置里面==》安全设置==》服务端口打开；[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Bzh7R0kn-1620118485475)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210503192954564.png)]2、全局配置：（1

一、svg 绘图1.svg 概念​ SVG 是使用 XML 来描述二维图形和绘图程序的语言。可伸缩矢量图，图像在放大或改变尺寸的情况下其图形质量不会有所损失。命名空间：http://www.w3.org/2000/svg2.svg 引入及基本操作2.1svg 引入 <!-- 默认宽300*150 --> <svg id="mySvg" width="400" height="400">3.svg常见绘图标签<rect> 绘制矩形

一、数据可视化1.概念数据可视化Data Visualization:就是指将结构或非结构数据转换成适当的可视化图表，然后将隐藏在数据中的信息直接展现于人们面前。2.常见使用场景(1)媒体大屏适合展会、媒体访问等公众场合，是企业形象、品牌展示的窗口；(2)接待大屏适用企业内部宣传专区，用于接待来访领导、客户或投资。(3)监控大屏针对企业运营或运维监控需求，比较适用内部指挥监控等；(4)科技大屏滴滴出行大数据、天猫双十一交易数据、茅台数博会大屏等;3.数据可视化工具3.1绘图容器c

一、购物车列表1.总价钱和总数量和全选状态的获取 computed:{ // 总数量 totalNum(){ let totalNum = 0 this.cartLists.map(item=>{ item.checked == 1 ? totalNum += item.num :"" }) return totalNum }, // 总价钱 totalPrice(){ let totalPrice=0

一.获取一级分类下所有商品1.页面跳转 传参index.vue // 2.一级分类 切换选项卡 changeIndex(index,fid){ this.activeIndex = index uni.navigateTo({ url:"../product/product?fid="+fid }) },2.获取数据参数：参数名说明fid一级分类id,必填page请求页码，必

项目【小U商城】一、项目初始化安装步骤1.打开数据库服务 wampserve 2.新建数据库 导入shop_db root 没有密码3.打开后台数据接口 shop_api npm install npm start4.打开后台管理系统 shop_vue_admin npm install npm start admin 123123 5.导入静态页面 运行 h5 微信小程序二、封装网络请求1.封装config.js 管理常量//

一、订单详情0.跳转到详情页面index.js // 跳转到详情页面 _toDetailPage(e){ let id = e.currentTarget.dataset.id wx.navigateTo({ url: '../detail/detail?id='+id, }) }1.获取菜谱详情数据功能分析：1.获取菜谱数据 res.data2.通过菜谱 openid去用户表中查询发布人信息3.通过

一、个人中心1.选项卡操作功能分析：1.点击切换选项 上边样式 active ===>activeIndex 下边内容 控制显示隐藏 hidden ===>acitveIndex代码案例： <!-- 导航栏 --> <view class="menu"> <view data-index="0" bindtap="changeIndex" class="{{activeIndex == 0? 'active' : ''}}">

一、个人中心1.检测当前是否登录代码案例： // （1）判断 微信登录 onShow() { wx.checkSession({ // 1.1）登录有效 success: (res) => { // 获取用户信息 let userInfo = wx.getStorageSync('userInfo') this.setData({ isLogin: true, userI

一.uni-app 框架1.框架介绍概述是一个使用vue语法去开发所有前端应用的前端开发框架 一套代码，发布为微信小程序，支付宝小程序，app（ios，android）h5等vue语法： 数据绑定，列表渲染v-for，条件渲染，事件绑定小程序语法： 组件 + api(uni.)2.官方网址https://dcloud.io/ https://uniapp.dcloud.io/ uni-app官方网址二、项目创建1.使用工具创建（推荐）1.1下载工具https://

一、weui组件库一套基于样式库weui-wxss开发的小程序扩展组件库，同微信原生视觉体验一致的UI组件库，由微信官方设计团队和小程序团队为微信小程序量身设计，令用户的使用感知更加统一。1.安装1.1 npm 安装安装步骤及使用：1.npm init -y 生成package.json文件2.npm install weui-miniprogram 安装weui库3.点击菜单栏-工具-构建npm4.点击设置-勾

一、模块化操作1.common.js规范config,js// 统一管理所有常量const url = "http://localhost"const port = "3000"// 导出// commonjs module.exports = { url,port }页面使用//引入//commonjslet config = require('../../utils/config')console.log(config);2.es6规范1、export //

一、组件1.基础组件概念组件是视图层的基本组成单元。组件自带一些功能与微信风格一致的样式。一个组件通常包括 开始标签 和 结束标签，属性 用来修饰这个组件，内容 在两个标签之内。公共属性： 每一个组件都有的属性 id class style hidden bind* catch* data-* 特殊属性： 组件都有各自私有的属性，可以对该组件的功能或样式进行修饰2.基础内容组件text 文本组件<!-- 文本 user-select 文本是否可选

一、小程序逻辑层1.概述在 JavaScript 的基础上，我们增加了一些功能，以方便小程序的开发：增加 App 和 Page 方法，进行程序注册和页面注册。增加 getApp 和 getCurrentPages 方法，分别用来获取 App 实例和当前页面栈。提供丰富的 API，如微信用户数据，扫一扫，支付等微信特有能力。提供模块化能力，每个页面有独立的作用域。注意：小程序框架的逻辑层并非运行在浏览器中，因此 JavaScript 在 web 中一些能力都无法使用，如 window，doc

一、微信公众平台微信公众平台（微信小程序，订阅号，服务号等），微信开放平台(常见的api)1.平台概述微信公众平台：（简称公众号），主要是开发者为用户提供咨询服务的一个平台官网地址：https://mp.weixin.qq.com2.账号分类1.订阅号： 为媒体和个人提供一种新的信息传播方式，主要功能是在微信侧给用户传达资讯；（功能类似报纸杂志，提供新闻信息或娱乐趣事） 适用人群：个人、媒体、企业、政府或其他组织。 群发次数：订阅号（认证用户、非认证用户）1天内可群发1条

call、apply以及bind的之间的相同点以及区别1、call方法（1）可以调用函数；（2）可以改变函数内的this指向（主要作用可以实现继承）；function Father(uname,age,sex){this.uname = uname;this.age = age;this.sex = sex;}function Son(uname,age,sex){Father.call(this,uname,age,sex);}2、apply方法apply ()方法调用一个函数

前端页面优化1、html加载顺序:css放head里面(用户看到顺畅页面)，js放尾部（会阻塞dom渲染，且dom树没搭建好时，js里面的dom操作会有问题）减少页面请求：合并img,合并css，避免使用@import方式引入css文件减少文件大小：主要减少img文件大小，选用合适的格式并且用工具进行压缩(ImageOptim,ImageAlpha,JPEGmini)，删除不必要的标签2、css选择器：越简单越短越好,同样的样式进行选择器合并css值缩写：margin等，值为0的省略单位

跨域1、什么事跨域​ 跨域是指从一个域名的网页去请求另一个域名的资源。比如从www.baidu.com 页面去请求 www.google.com 的资源。跨域的严格一点的定义是：只要 协议，域名，端口有任何一个的不同，就被当作是跨域2、为什么限制跨域访问​ 如果一个网页可以随意地访问另外一个网站的资源，那么就有可能在客户完全不知情的情况下出现安全问题。3、跨域处理方式（1）利用script标签请求使用script标签请求前，先进行回调函数的申明调用<script> fun

回流、 重绘1、概念页面的显示过程的几个阶段：生成DOM树(包括display:none的节点)在DOM树的基础上根据节点的集合属性(margin,padding,width,height等)生成render树(不包括display:none，head节点，但是包括visibility:hidden的节点)在render树的基础上继续渲染颜色背景色等样式回流：当render树的一部分或者全部因为大小边距等问题发生改变而需要重建的过程。重绘：当诸如颜色背景等不会引起页面布局变化，而只需要重新

闭包1、变量作用域​ 变量的作用域分两种：全局变量和局部变量。​ javascript语言的特别之处就在于：函数内部可以直接读取全局变量，但是在函数外部无法读取函数内部的局部变量2、什么是闭包function f1(){　　　　var n=999;　　　　function f2(){　　　　　　alert(n); // 999　　　　}　　}let hello = f1();hello();​ 函数f2就被包括在函数f1内部，这时f1内部的所有局部变量，对f2都是可见的。但

promise1、为什么使用promise避免界面冻结同步：假设你去了一家饭店，找个位置，叫来服务员，这个时候服务员对你说，对不起我是“同步”服务员，我要服务完这张桌子才能招呼你。那桌客人明明已经吃上了，你只是想要个菜单，这么小的动作，服务员却要你等到别人的一个大动作完成之后，才能再来招呼你，这个便是同步的问题：也就是“顺序交付的工作1234，必须按照1234的顺序完成”。异步：则是将耗时很长的A交付的工作交给系统之后，就去继续做B交付的工作，。等到系统完成了前面的工作之后，再通过回调或者事件，继续

BFCBFC（Block Formatting Context）即块级格式化上下文表示页面中一个独立的块级渲染区域，只有块级盒子参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。1、渲染规则内部的元素会在垂直方向上一个接一个的放置 （块自上而下排列）垂直方向上的距离由margin决定，属于同一个BFC的两个相邻元素的margin会发生重叠内部每个元素的左外边距与包含块的padding盒左边界相接触（从左向右），即使浮动也是如此。封闭性（结界）计算BFC的高度时，浮动子元素也

一、图片下间隙问题解决方案：方法一：img{vertical-align:middle;} 不改变图片本身内联块的特性方法二：img{display:block}将图片显示为块（改变了图片本身内联块的特点）方法三：img父级{font-size:0}隐患：由于字号可继承，需要重新定义其它后代元素的字号二、图片水平居中方法一：作为行内块img父级{text-align:center;}方法二：作为块img{display:block;margin-left:auto;margin

定位1、position（1）static:静态定位（默认值）；（2）relative：相对定位；（3）absolute：绝对定位；（4）fixed：固定定位；2、相对定位（1）相对于元素本身原来位置进行定位；（2）不定义偏移量对元素本身基本没有影响；（3）提升元素层级；（4）通常配合绝对定位使用（作为定位父级）；（5）不脱离文档流（原来位置仍然占位）；3、绝对定位（1）脱离文档流；（2）提升元素层级；（3）通常配合相对定位使用（作为定位子元素）；（4）没有定位父级时，相对于

1、文本属性的简写：（1）书写顺序：字体风格 字体加粗 字号/行高 字体（不需要的值直接省略）；（2）以上之间都是空格隔开；（3）简写至少在字号和字体同时存在时有效；2、text-decoration：文本装饰（1）none—无；（2）underline—下划线；（3）line-through–中划线；（4）overline–上划线；3、transparent：代表透明色4、背景属性：（1）背景图片：background-color默认绘制到边框区域：即是border区域以内的位置；

浮动1、float:（1）left:左浮动（从左向右排列）；（2）right：右浮动（从右向左排列）；（3）none：不浮动；（4）浮动可以使元素按照指定的方向排列，直到遇到父元素的边界或者另一个浮动元素【停止】；（5）浮动会使元素脱离文档流；（6）文档流：所有可见元素在文档中的排列占位（块级从上向下排，行内元素从左向右排列）；2、浮动产生的问题：（1）浮动脱离文档流，使父元素高度塌陷（无法撑开父元素）；（2）影响浮动元素之后的布局；3、清浮动（解决浮动产生的问题）：（1）给父元素固

todolist实现过程，完整代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

响应拦截和请求拦截：1、请求拦截器请求拦截器的作用是在请求发送前进行一些操作，例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易。关于拦截，这里只说原理，前端的请求，最终还是离不开 ajax，像vue 的 vue-resource 、axios，都只是对ajax进行了统一的封装，它暴露出来的拦截器，其实就是写了一个方法，把ajax写在这个方法里面，（我们先说请求拦截器）在执行这个方法的时候，先将请求时要添加给请求头的那些数据（token、后端要的加密码…具体要看实际情况）先执行一遍，

等高布局实现的两种方式：第一种方式：（1）利用padding-bottom和margin-bottom相抵消（2）利用paddig-bottom 撑开显示更多的背景；margin-bottom的负值抵消padding的占位；代码的实现如下：<style> .box{ width: 600px; min-height: 400px; overflow: hidden; }

浅谈css百分比都是相对于谁来计算：1、首先我们看一下，在普通文档流：.parent { width: 500px; height: 300px; padding:50px; background: #999; margin-left:50px; font-size: 15px; line-height:30px;

说出至少4种vue当中的指令和它的用法？（1）{{}} 、v-html 和v-text ==》 非表单元素{{}}：以{{data的属性名}}的方式直接使用在标签之间例如： {{name}}{{}}不能解析data中属性值中的标签当vue.js没有加载出来时，页面中显示{{}}一类的数据，不利于用户 体验解决闪屏问题：通过指令v-cloak实现：v-cloak绑定在作用于vue实例的标签上，当vue.js没有加载完成时，设置[v-cloak]的样式为：diplay： none，当vue.js加载

vue单页面应用及其优缺点有哪些？原生页面：实现页面之间跳转，就是真实的页面挑战（N个.HTML）单页面：实现页面跳转，通过路由实现优点：用于体验更优，用户跳转页面时，基本通过ajax请求数据；做前后端分类，后端提供HTTP协议接口，前端通过api请求数据；缺点：不利于SEO优化，因为使用单页面应用，所有的资源文件（eg:css,js,img）统一放在一个文件中，一旦文件非常大时，页面加载速度会变得非常慢；首屏加载速度慢；...

面试题目之：mvvm框架是什么？它与其他框架（jquery）的区别是什么？哪些场景适合？（1）mvvm框架是什么？MVVM是Model-View-ViewModel的简写Model：模型View：视图ViewModel：视图模型，连接view和model的桥梁通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel 也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定

面试题目之：为什么要选vue？与其他框架对比的优势和劣势？（1）vue：优点：数据的双向绑定；组件化开发；采用virtual DOM；轻量高效；动画系统；virtual Dom则是虚拟DOM的英文，简单来说，它就是一种可以预先通过js进行各种计算，把最终的DOM操作计算出来并优化，由于这个这个DOM操作处理属于预处理操作，并没有真实的操作DOM，所以叫做虚拟DOM，最后在计算完毕才真正将DOM操作提交，将DOM操作变化反应在DOM树上缺点：不支持IE8及以下版本；生态不太成熟，例如编辑

1、vue的特点以及优势所在：（1）轻量级；（2）双向数据绑定；（3）指令；（4）组件化；（5）客户端路由；（6）状态管理在这里需要注意的是：vue必须在ES5版本以上的环境使用，一些不支持ES5的就浏览器中无法运行vue;2、vue中基本指令（1）v-text（2）v-html:如果在页面中展示的内容包含html标签时，用文本插值语法或者v-text指令都会在页面中原样输出内容，不会解析成正常的HTML语法，此时可以使用v-html来解析HTML标签；====》这里需要注意的是：在网站

一.redux1.下载安装cnpm i redux --save2.核心StorecreateStoreimport { createStore } from 'redux';//得到store对象const store = createStore(fn);Stateconst state = []/得到状态数据const state = store.getState();ActionState 的变化，会导致 View 的变化。但是，用

美团1.创建项目create-react-app 项目名称npm startnpm i react-router-dom --save 路由插件2.项目清空工作src App.jsx index.js3.项目目录src assets #静态资源文件 pages #你的代码 utils #工具 store #做状态管理(flux redux) App.jsx index.js4.项目配置在index.js文件中 // 1.引入重置样式 import '

一.路由1.路由模式HashRouterHashRouter 访问 http://localhost:3000/#/ReactDOM.render( <HashRouter> <App /> </HashRouter> , document.getElementById('root'));BrowserRouterBrowserRouter 访问 http://localhost:30

一.组件通信1.父组件向子组件传递数据父组件: 通过自定义属性传递数据子组件:通过this.props接收数据父组件:import React, { Component } from 'react'import Child from './Child'export default class Parent extends Component { constructor(){ super() this.state = { name

一.介绍react是facebook公司中由前端开发团队进行开发和维护定义.用于构建用户界面的JavaScript库特点:react是基于组件进行开发数据驱动和视图渲染相结合来构建单页面应用react中没有基本指令,计算属性,过滤器,监听器等等react中没有数据双向绑定React是react.js的核心Reactdom是react-dom.js的核心二.下载安装方式一: <script src="https://unpkg.com/react@16/umd/reac

小U商城项目一.项目搭建1.vue init webpack umall 创建项目2.cnpm i 安装依赖项3.cnpm i axios qs vant vuex --save 安装依赖项二.项目清空工作assets 目录清空components 目录清空router/index.js 有关helloWord删除App.vue 根组件只留模板main.js 唯一入口文件三.页面布局一级路由出口 login register index goodsL

一.配置ts编译文件配置项目1.新建目录 demots2.tsc --init 初始化tsconfig.json文件3.修改tsconfig.json文件 { "compilerOptions":{ "outDir":"./dist" }, "include":['./src'] }4.新建 dist src5.tsc -p tsconfig.json -watch1.接口(interface)定义// 接口定义// 关键字 interfaceinterfa

一.ssr(服务端渲染)1.定义server side render:简称服务端渲染.即将组件或者页面通过服务端渲染,最后生成HTML字符串,发送给浏览器,浏览器再将字符串展示为客户端所识别的应用程序.2.ssr的利弊优势1.利于SEO优化,用户体验好2.首屏加载速度快缺点1.增加服务端的压力2.基于node.js核心页面或者组件通过服务端解析,生成HTML字符串.发送给浏览器3.使用步骤:1.新建目录demossr2.进入demossr目录.新建文件app.

1.商品管理goods.vue<template> <div> <el-button type="success" @click="add">添加</el-button> <!-- 添加子组件 --> <v-add :info="info" ref="add"></v-add> <!-- 列表子组件 --> <v-list @edit="edit">&l

1.index.vue(遍历菜单) <!-- 遍历菜单 --> <template v-for="item in user.menus"> <!-- 判断是否包含有children,如果有就是目录 --> <!-- 此处遍历的是有目录 --> <el-submenu :index="item.id" :key="item.id" v-if="item.chil

1.角色管理role.vue<template> <div> <el-button type="primary" @click="add">添加</el-button> <!-- 添加组件 --> <v-add :info="info" ref="add"></v-add> <!-- 角色列表组件 --> <v-list @edit="edit">&l

一.建库建表1.开启mysql服务2.打开navicat,创建数据库名: 见图1所示; 打开doc命令,创建数据名. create database shop1102 use shop1102 source 文件路径建库建表完成. 二.开启服务端shop_admin/config/global.js// 数据库连接参数exports.dbConfig = { host: 'localhost', //数据库主机名 user: 'root',//用户名 p

1、安全性上，HTTPS是安全超文本协议，在HTTP基础上更强的安全性。简单来说，HTTPS是使用TLS/SSL加密的HTTP协议2、申请证书上HTTPS需要使用ca申请证书；3、传输协议上，HTTP是超文本传输协议，明文传输；HTTPS是更具有安全性的SS加密传输协议4、连接方式和端口上：HTTP的连接简单，是无状态的，端口是80；https是在http基础上使用ssl协议进行加密阐述，端口是443...

1. 模板引擎​ EJS 是一套简单的模板语言，在NodeJS后端利用ejs模板引擎, 生成 HTML 页面优点​ 纯 JavaScript​ 快速开发​ 执行迅速​ 语法简单: 可以直接在HTML中书写JS代码​ 同时支持前后端环境​ 相比pug, 更贴近于我们现使用的HTML标签语法/*什么是模板引擎 模板引擎就是说 我们NodeJS中的数据和代码不能直接嵌入到html中 我们从数据库中获取的数据 无法分配给htnl 那么 我们可以创建一

一.vuex1.定义Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化2.安装cnpm i vuex --save3.使用import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ //存储状态数据 state:{}, mutations:{}, act

一.数据请求1.axios定义名称:爱可信,爱可信基金会axios是基于Promise的ajax模块.通过http发起客户端请求.2.安装npm i axios --save3.配置代理(跨域)方式一:config/index.js// 设置跨域请求 proxyTable: { "/api":{ target:"http://localhost:3000", changeOrigin:true,//是否跨域, path

三.全局过滤器main.js // 全局过滤器的封装 import comFilters from './filters' for(let i in comFilters){ Vue.filter(i,comFilters[i]) } filters priceFilter.js export default (e)=>{ // e:值要过滤的对象 return e.toFixed(

一.美团项目1.项目搭建1.vue init webpack meituan2.在安装项目过程选择安装路由即可.如果项目中没有路由: npm i vue-router --save3.启动: npm run dev2.清空工作assets: logo.png 删除components: helloWord删除App.vue 内容清空写vue模板router/index.js 将有关helloWord的内容删除main.js3.项目目录划分src: assets: 静态资

一.路由1.定义node中的路由:web服务器根据用户输入的不同url地址,来返回不同的页面.vue中路由:路由是vue.js中的一个路由组件,需要结合组件来实现单页面应用.2.路由的使用(一级路由)2-1.安装项目vue init webpack 项目名称npm run dev2-2.清空工作assest: logo.png删除components: helloWord.vue 删除App.vue : 内容清空main.js2-3.新建三个组件新建logi

一.父传子分析:1.父组件传值给子组件,需要先找两个组件之间的关联2.找关联为:组件的调用:<v-child></v-child> <!-- 1.父传子: 父变,子变,子变,父不变.并且报错 --> <input type="text" v-model="name"> <div>name的值为:{{name}}</div> <!-- 2.解决父传子: 父变,子变,子变,父变. 需要传递一个Jso

一.组件介绍和注册1.定义:组件是组成完整页面常用功能模块的封装简单来讲:组件就是组成页面的零部件2.组件的组成部分视图(html)样式(css)逻辑(js)3.作用提高开发效率(提高代码的复用率)提高代码的可维护性4.注册全局注册书写格式Vue.component('组件的名称',{ template:'要渲染到页面中的内容'})eg: // 全局注册组件Vue.component('one',{ template:'<div>

1.$set往对象或者数组对象中添加新的属性使得该属性必须赋予get和set方法,才能在视图中渲染,往对象中添加新的属性的方式，在这里我们是在挂载完成的时候添加:局部设置: 1.this.$set(操作的对象,'添加新的属性名','新的属性值') 2.Vue.set(操作的对象,'添加新的属性名','新的属性值')全局设置 3.vm.$set(操作的对象,'添加新的属性名','新的属性值')2.侦听器1-1.定义又名:监听器1-2.作用当数据发生改变时,及时作出相应1-3.普通监

1.表单+表格案例https://www.bootcss.com/<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-

1.vue简介目的:快速开发,简单官网地址:https://cn.vuejs.org/1-1.vue介绍作者:尤雨溪优点易用只要会HTML.css.JavaScript就可以直接使用灵活不断繁荣的生态系统(vue Router,vuex,服务端渲染)通过script连接一个vue.js库直接开发即可通过安装vue框架实现快速项目开发高效20kB min+gzip 运行大小超快虚拟 DOM浏览器解析一个网页的步骤:1.解析HTML,生成HTML树

1. 渲染静态页面const http = require('http');const fs = require('fs');const url = require('url');const path = require('path');http.createServer((request,response)=>{ // 将请求的路由取出来 不携带参数 let requestUrl = url.parse(request.url).pathname; // 如果是

1. 文件操作流式写入 createWriteStream​ 流式操作和我们之前的哪三种写入方式都不同 其他三种方式（同步写入，异步写入，简单写入）虽然很常用​ 但是在某些特定的时候无法使用 以为容易造成数据泄露​ 在大批量文件写入操作的时候 前三种方式都不适合 流失操作 虽然使用的不是很多 但是适合大批量文件写入操作​ 在使用的时候 我们首先应该创建一个可写的流​ 使用createWriteStream创建一个可写的流 内置两个参数​ 第一个参数是文件的路径 先

1. 事件驱动概念​ node核心API构建用的是异步事件驱动架构 其中某些类型的对象又称触发器（emitter） 会触发命名事件来调用函数，又称监听器​ 所有能触发的事件对象都是EventEmitter类的实例 EventEmitter里存储在events模块中 他是一个核心模块 不需要我们下载 也不需要​ 我们定义 直接引入使用就可以 他是NodeJS安装的时候自带的 这些对象有一个 eventEmitter.on(函数)用于一个或这个多事件绑定到​ 命名事件中 even

1. 字符串的扩展includes ： 查看字符串是否包含字符串startsWith ： 查看字符串是否以某个字符或者字符串开头endsWith ： 查看字符串是否以某个字符或者字符串结尾repeat ： 重复字符串指定的次数let str = "abcdefg";// 查看字符串中是否包含某个字符或者某个字符串console.log(str.includes('a')); // trueconsole.log(str.includes('s')); // falseco

1. Promisepromise中的all方法​ promise中的all方法 不是我们所说的使用promise对象定义的方法 它是使用Promise构造方法定义的方法​ 它是一个可以执行多个Promise的一种方式 all方法 执行全部的promise​ Promise.all() 方法 内置一个参数 参数是一个数组 数组中的每一个元素 都是Promise​ 他们都会一起执行let p1 = new Promise((resolve,reject)=>{

1. rest参数​ rest参数是我们在ES6中新增的语法格式 它可以解析任何数据类型 比如说数组 对象 以及我们后面学的集合​ 在我们使用rest参数的时候 我们需要在前面加上… 虽然知识点的名字叫做rest 但是名字我们自定义​ 我们使用rest解开数组或者对象let arr = [11,22,33,55,99];console.log(arr);// 使用...arr 将这三个点放在数组的前面 等于把数组中的元素取出console.log(...arr);

1.ES5回顾严格模式​ 严格模式 是为了避免JS中出现的混杂模式 其实就是常规模式​ 比如说 变量不用声明 等一些混杂模式需要处理​ 在JS中定义严格模式只需要在代码前面设定一个字符串 ‘use strict’​ 严格模式和普通模式之间的区别​ 1.严格模式中 变量必须使用变量修饰符进行声明 var let​ 2、在严格模式中 八进制必须使用0o开头​ 3、eval函数 拥有独立的作用域​ 4、严格模式中 this不能指向window

jQuery事件代理把事件绑定在父元素上, 父元素做代理监听事件, 当子元素触发事件时, 事件默认冒泡给父元素,父元素响应事件, jQuery的事件处理函数中的this就是触发事件的子元素.jQuery对象.on(事件类型, 子元素, 事件处理函数);$("ul").on('click', 'li', function () { // console.log($(this)); $(this).css('background', 'blue');});// 后添加

$.each()$.each()可以遍历jQuery对象, 也可以遍历原生的数组和对象.$.each(arr, function (index, item) {});// - $.each()可以遍历jQuery对象, 也可以遍历原生的数组和对象.// - `$.each(arr, function (index, item) {});`// console.log($('li'));var s = $.each($('li'), function (index, item) { c

jQueryjQuery是JavaScript库, 创建于2006年的开源项目. jQuery极大的简化了HTML文档操作, 事件处理, 动画和ajax等. https://www.jquery.com开源轻量级强大的选择器对DOM操作的封装事件处理机制完善的ajax浏览器的兼容链式操作隐式迭代丰富的插件支持完善的文档<!-- 引入线上的jQuery代码 --><script src="https://code.jquery.com/jquery-1.12.

移动端事件ontouchstart: 手指按下事件ontouchmove: 手指移动事件ontouchend: 手指抬起事件移动端比PC响应快点透问题: 当上层元素发生点击事件, 在300ms内如果上层元素隐藏或者消失, 下层元素也能接受到事件, 下层元素不要使用具有点击特性的元素.var box = document.getElementById("box");box.addEventListener('touchstart', function () { console.log

项目 - 音视频播放项目中获取视频的时长以及显示实时的播放时长视频标签相关的API知识点：① oncanplay：当浏览器可以开始播放视频或者音频的时候所触发的事件。语法结构：视频.oncanplay = function(){ }② 视频的播放以及暂停功能播放：视频.play()暂停：视频.pause()③ ontimeupdate：在视频播放时间改变的时候触发的事件语法结构：视频.ontimeupdate = function(){ }④ currentTime：

一、获取表单元素通过 form.name 可以获取到相对应的表单元素。<form action="#" method="post" id="form"> <p>用户名: <input type="text" name="username" /></p> <p>密码:<input type="password" name="userpass" /></p> <p>性别:<input

ajaxAJAX即“Asynchronous Javascript And XML”（异步javaScript和XML），是指一种创建交互式网页应用的网页开发技术,可以用于创建快速动态网页的技术，通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。刚好解决了传统方法的缺陷。异步：浏览器在请求数据的过程中，不会一直等待，这段时间还可以做其他的操作。同步：浏览器在请求数据的过程中，会一直等待事件的响应，直到返回

正则表达式正则表达式: 是对字符串操作的一种逻辑公式, 就是用事先定义好的一些特殊字符以及这些特殊字符的组合,组成一个’规则字符串’, 这个字符串用来表达对字符串的一个过滤的逻辑. 简单来说就是规定文本检索的内容, 通常用来检索, 替换文本.正则表达式的创建:构造函数创建: new RegExp('检索字符', '修饰符');字面量创建: /检索字符/修饰符var reg1 = new RegExp('abc');console.log(reg1); // /abc/console.

面向对象类: 对象的类型模板.对象(实例): 是根据类创建的具体的对象.对象由属性和方法组成.属性: 对象的特征描述, 比如姓名, 年龄.方法: 对象的行为, 比如吃饭, 睡觉, 撸代码.面向对象三大特征: 封装, 继承, 多态.创建对象字面量创建对象: 使用json形式创建对象, 适用于创建单个对象.// 字面量创建对象: 使用json形式创建对象, 适用于创建单个对象.// json: js对象表示法, 由键值对组成, 每一个键值对之间使用冒号连接, 每一对键值对之间使用逗号

滚轮事件当鼠标滚轮滚动时，JavaScript可以监听到，称之为滚轮事件Chrome，IE：DOM0级事件 onmousewheel wheelDelta 120表示向上 -120表示向下Firefox：DOM2级事件 DOMMouseScroll detail 3表示向下 -3表示向上// 当鼠标滚轮滚动时，JavaScript可以监听到，称之为滚轮事件。// Chrome，IE：DOM0级事件 `onmousewheel` wheelDelta 120表示向上 -120表示向下//

事件事件: 可以被JavaScript监听到的行为. 元素可以产生某些可以触发JavaScript函数的事件.事件函数: 当事件触发时调用的函数.事件对象: 当事件触发时, 浏览器会把本次事件相关的所有信息封装在一个事件对象中, 包含事件类型, 事件触发对象, 位置信息等.box.onclick = function (event) { event = event || window.event; // 标准浏览器默认第一个参数为事件对象,低版本IE需要window.event获取事件对

BOMBOM：Browser Object Model 浏览器对象模型。BOM的核心是window对象。window：可以用来访问浏览器功能的接口，ECMAScript中的Global对象。window对象在全局有定义，声明的全局变量和函数都是window的属性和方法。window的方法或者属性在使用时一般省略window。系统对话框alert(): 警告框，在页面中弹出警告框，阻断式。confirm(): 带有确认和取消的对话框，确认-true，取消-false。prompt():

DOMJavaScript由 ECMAScript，DOM，BOM 组成。DOM：Document Object Model 文档对象模型。加载HTML页面时，web浏览器生成一个树状结构，用来表示页面内部结构，称之为DOM树。DOM树由节点组成。子节点父节点.children：返回子元素的集合，是HTMLCollection对象。非标准属性。父节点.childNodes：返回子节点的集合，是NodeList对象。标准属性。// 父节点.children：返回子元素的集合，是HTMLC

String// 使用字面量创建字符串var str1 = 'web';var str2 = "web";console.log(str1, str2);console.log(typeof str1, typeof str2);// 使用构造函数创建字符串var str3 = new String('abc');console.log(str3); // 02-string.html:18 String {"abc"}console.log(typeof str3); // objec

Math对象Math.ceil()：向上取整Math.floor()：向下取整Math.round()：四舍五入Math.abs()：绝对值Math.min()：一组数的最小值Math.max()：一组数的最大值Math.pow(num, power)：num的power次幂Math.sqrt()：平方根Math.random()：随机数 [0, 1)// 从a到b的随机数var a = 20;var b = 50;var r = parseInt(Math.random()

预解析（声明提升）JavaScript的代码在执行的过程中分为两个过程：预解析，逐行执行。预解析：声明提升，JavaScript代码在执行之前会把变量和函数的声明提升到代码的最前面，赋值部分不会提升。// console.log(a); // undefined// var a = 10;// 上面两行代码相当于// console.log(a); // undefined// var a;// a = 10;// js有预解析过程：把声明提升带最前面// var a;// c

thisthis可以存储在任意位置，在不同的位置代表不同的对象。代表的是函数调用时函数的拥有者。全局下的this是window对象普通函数中，this表示window对象。在事件处理函数中，this表示触发事件的元素/*this可以存储在任意位置，在不同的位置代表不同的对象。*/// 全局下的this是window对象console.log(this);// 普通函数中，this表示window对象。function fun () { console.log(this);

for循环循环：让特定的代码块执行规定的次数。/*for (初始化循环变量①; 条件②; 更新循环变量④) { 循环体③}执行过程： 1.执行①，初始化循环变量，这条语句只会执行一次 2.判断条件②是否成立 2.1.条件成立，执行③ 2.2.条件不成立，结束循环 3.执行循环体③ 4.更新循环变量④ 5.重复2,3,4操作*/for (var i = 0; i < 10; i++) { conso

流程控制顺序结构：按照代码顺序执行条件选择结构（分支语句）：if-else，switch-case循环结构：for，while，do-while其他语句：break，continue条件选择结构（分支语句）ifif会提供条件，如果满足条件就执行对应的代码。语法：if (条件) { 条件成立时的执行 }如果if条件满足时只有一句代码，可以省略{}，称之为单行if。// if会提供条件，如果满足条件就执行对应的代码。语法：`if (条件) { 条件成立时的执行 }`// 如果if条件

JavaScript数据类型数据类型的分类JavaScript中的数据类型分为两大类：简单数据类型（基本数据类型），复杂数据类型（引用数据类型）简单（基本）数据类型：Number，String，Boolean，Null，Undefined复杂（引用）数据类型：Object，Array，Functiontypeof操作符：检测变量的数据类型； 语法： typeof(变量)/typeof 变量NumberNumber：数字类型，主要功能用于存储数据，参与数学运算。number类型包括：整数

JavaScript初识前端三层HTML：超文本标记语言，从语义的角度描述页面的结构。CSS：层叠样式表，从审美的角度装饰页面。JavaScript：简称js，从交互的角度提升用户体验。JavaScript的历史网景公司（Netscape）发布了Navigator浏览器，历史上第一款成熟的网络浏览器。为了解决表单验证问题，1995年聘请了布兰登艾奇，借鉴了Java的管理机制，c语言的函数，开发了JavaScript这门语言。最初Mocha，后改名为livescript，最终改名为JavaS

网格布局（Grid）Flex 布局是轴线布局，只能指定”项目”针对轴线的位置，可以看作是【一维布局】。Grid 布局则是将容器划分成”行”和”列”，产生单元格，然后指定”项目所在”的单元格，可以看作是【二维布局】。Grid 布局远比 Flex 布局强大。基本概念容器采用网格布局的区域，称为"容器"（container）。项目容器内部采用网格定位的子元素，称为"项目"（item）。行和列容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）。单元格行和

响应式一套页面适配多个终端响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。响应式实现三步曲1.viewport设置<meta name="viewport" content="width=device-width, initial-scale=1.0">2.页面布局（流式布局）布局无宽布局、百分比布局padding,margin四个方向都是相对于父元素的宽度进行计算浮动

vw布局vw单位viewport’width 的简写相对于视口宽度的的相对单位100vw = 视口宽度1.直接使用vw单位布局以设计稿为基准，使用px进行布局将px转换为vw单位100vw = 视口宽度 = 设计稿的宽度 750 1vw = 7.5pxpx to vw在设置中，定好视口宽度[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Spn0CKFG-1606552592937)(…/AppData/Roaming/Typ

移动端相关处理1.去除高亮框去除android下a/button/input标签被点击时产生的边框 &去除ios下a标签被点击时产生的半透明灰色背景(默认都会在激活状态时，显示高亮框)a,input,textarea,select{ -webkit-tap-highlight-color: rgba(0,0,0,0);}[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Wo46MFjO-1606551879660)(…/AppData/Roamin

移动端布局运行在移动设备的浏览器的web页面（H5页面、微网页、WAP页）移动端浏览器基于webkit内核viewport设置viewport即视口相当于PC端的浏览器窗口，可以设备尺寸大，也可以比设备尺寸小，允许开发者自定义<meta name="viewport" content="具体设置">默认常规大小 980-1024px保证 PC 页面在移动浏览器上面的可视性移动端开发中视口视觉视口用户通过屏幕真实看到的网页的区域。，即屏幕宽度（设备宽度）布局视口布

媒体查询在不改变页面内容的情况下，为不同的设备特性（屏幕尺寸、横竖屏等）定制显示效果语法：样式表内引入（内、外部样式表）@media 媒体类型 and (媒体特性表达式){ //样式}常用媒体类型all 所有screen 屏幕设备常用媒体特性width/height 宽高device-width/height 设备宽高min- / maxmin-width/height横竖屏 orientation：landscapeportrait 竖屏

背景属性线性渐变background-image:linear-gradient(颜色1，颜色2…)颜色节点均匀分布的渐变至少两个颜色linear-gradient(颜色1，颜色2…).box:nth-child(2){ background-image:linear-gradient(#ff0000,blue,rgba(0,255,0,0.5),transparent,yellow);}控制颜色节点linear-gradient(red 颜色节点1,red 颜色节点2,

HTML5HTML标准的最新升级版本HTML5的新变化文档结构简化了字符集<!DOCTYPE html>简化了文档声明<meta charset="UTF-8">语法变化（了解）可以完全省略某些标签html,head,bodythead tfoot tbody可以省略某些标签的结束标签li,p…可以省略布尔值属性的属性值新特性（掌握）新增了语义化标签新增了全局属性新增了表单元素和表单相关属性新增了API（

ps基础【Adobe Photoshop，简称“PS”】，是由【Adobe】 开发和发行的【图像处理软件】。Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以有效地进行图片编辑工作。ps有很多功能，在图像、图形、文字、视频、出版等各方面都有涉及。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mAPHY9Zm-1605793424951)(…/AppData/Roaming/Typora/typora-user-images/image-

常见问题浮动问题margin值塌陷问题图片间隙问题内联块间隙问题常见兼容问题块转内联块问题ie7及以下，块转内联块不在一行显示解决：*display:inline;*zoom:1;子元素相对定位，父元素overflow失效ie7及以下，overflow:hidden/scroll/auto失效解决：父元素{position:relative;}li包含浮动子元素，下间隙问题解决;li{vertical-align:middle;}背景属性值简写缺少空格(语法问题)