lazylYYY的博客

原创 3.ts的类修饰符abstract抽象类。interface接口。属性修饰符：public，private，protected。ts的get和set。readOnly只读；

同一个接口可以重复声明，内部属性可以累积）：用来定义一个类结构，用来定义一个类中应该包含哪些属性和方法，同时也可以当成类型声明去使用另外：比如我们想在接口中规定一个方法，方法不能有实际值，只能是:void();如下。...

原创 1.TypeScript变量和编译选项

1.以JavaScript为基础构建的语言2.一个JavaScript的超集3.可以在任何支持JavaScript的平台执行，但是TS不能被JS解析器直接执行，需要中间商（）先将TS编译成JS4.TS扩展了JS，并添加了类型。

原创 8.①配路由跳转页面（前进和后退）②配置首页

前进一：安装vue-router二：在router/index.js下配置以下//1.引入vue-routerimport VueRouter from 'vue-router';//2.定义routes路由的集合，数组类型const routes = [ { path: '/sharefriend', name: 'ShareFriend', component: () => import ('@/views/my-visit/S

原创 7.案例：todolist注意事项

注意事项一：filter遍历每一项筛选过滤把符合真假条件的赋值给新数组二：localStorage深度监视存储todos数据（永久存储，关闭和刷新浏览器，数据不会丢失）①localStorage是h5新增的一种本地存储数据方式，本质是一个对象，是一个小型的数据库，存储到localStorage当中的东西都会自动转化为字符串②localStorage当中有4个Api localStorage.setItem('键',值) //给localStorage存储数据...

原创 1.ECharts基本使用

一：使用方法 官网1.安装 cnpm install echarts --save-dev2.引入到main.js中import * as echarts from 'echarts'Vue.prototype.$echarts = echarts3.使用

原创 1.vant、PostCSS适配配置

一：介绍Vant 是一套轻量、可靠的移动端组件库。通过 Vant，可以快速搭建出风格统一的页面，提升开发效率。二：网址

原创 2.Echarts复用组件不报错也不渲染是因为两个组件共用了一个id

解决办法，在父组件里面同时调用两个子组件时，分别给两个子组件传递两个不同的变量，用于在子组件上面动态的更改id，此时两个子组件id不同，可同时渲染

原创 6.①拆分组件②Vue脚手架的安装③组件化开发案例：对vue的评论④组件之间传值：props通信组件，this.$emit

目录四：Vue脚手架安装1.基本配置： 安装Node.js 安装淘宝镜像源 安装Vue Cli3脚手架 检查其版本是否正确2.在想创建项目的目录3.修改成项目代码五：comment组件化开发案例：对vue的评论六：props通信组件（通信组件的十种之一）七：自定义事件通信方式一：基本写法 <div id="app"> <school></school&gt...

原创 2.axios的基本使用，获取增删改，常用配置项和axios.create，请求拦截器和响应拦截器，取消请求和axios.all批量发送请求

一：axios的基本使用，获取增删改 1.axios调用的返回值是Promise实例。 2.成功的值叫response，失败的值叫error。 3.axios成功的值是一个axios封装的response对象，服务器返回的真正数据在response.data中 4.携带query参数时，编写的配置项叫做params 5.携带params参数时，就需要自己手动拼在url中,如下按钮5<script s...

原创 5.vue当中添加过渡和动画

官方文档 <style> .a { width: 100px; height: 100px; background-color: springgreen; } .slide-leave { height: 100px; opacity: 1; background-color: spring

原创 4.①条件渲染v-if和v-show以及区别②样式style和类绑定的方法③event事件监听④阻止冒泡⑤阻止超链接跳转⑥监听回车事件⑦自动收集表单数据

目录一：v-if 和 v-show 两个条件渲染的区别二：样式类和style的绑定三：绑定事件监听相关（添加点击事件）1.event事件的绑定，可以传参也可以不传参2.阻止冒泡 直接.stop第一种：@click.stop(参数event，等等)3.阻止超链接跳转4.键盘事件设置回车监听四：自动收集表单数据一：v-if 和 v-show 两个条件渲染的区别 ①v-if条件渲染的时候，条件为真的被渲染，条件为假的不渲染，其实条件为假的元素根本不存在dom上...

原创 3.①循环渲染图片v-for=“(person,index)空格in persons“ :key=“index“②列表过滤筛选：用双向数据绑定v-model和filter和indexOf③列表排序

一：列表渲染二：列表过滤筛选（注意渲染的是遍历后符合筛选条件的数组） <div id="app"> <input type="text" placeholder="请输入过滤条件" v-model="keyword"> <ul> <li v-for="(person,index) in newPersons" :key='person.id'> {.

原创 2.①computed计算属性和watch监视中deep:true深度监视对象内的数据②实现数据双向绑定并实时拼接还有methods③vue的内置指令v-text、v-html、ref

①computed是计算属性：一般是没有这个值的但是想要用这个值，那么要根据已有的去做计算②watch 是监视属性：一般监视属性，监视的数据一定是已经存在并且可以改变的③能用computed的 都能用watch,但是能用watch解决的computed不一定能解决④区别：computed函数当中只能使用同步，而watch当中可以是同步也可以是异步一：computed计算属性 <div id="app"> 姓：<input type="text".

原创 1.①绑定＜a :href=‘url‘＞点＜/a＞＜button @click=‘say‘＞点＜/button＞②双向数据绑定MVVM用v-model③Object.defineProperty()

一：基本语法1.引入 vue.js2.body里面必须有一个挂载点app3.script里面有一个 vm实例化对象，和挂载点进行挂载请求回来的数据，是配置对象里的data二：数据的绑定及事件的添加（跳转和点击事件）及简写1. <a v-bind:href='url'>点我去百度</a>2. <button v-on:click='say'>点击事件绑定</button>...

原创 5.左侧不动,右侧自适应

一:运用BFC的overflow:hidden <style> .left { width: 100px; height: 100px; background-color: aqua; float: left; } .main { background-color: blue; heigh..

原创 1.axios的知识点理解，HTTP，报文请求方式，状态码，API，postman

一：准备1：HTTP相关1.HTTP请求基本过程①浏览器端向服务器发送HTTP请求(请求报文)②后台服务器接收到请求后，处理请求, 向浏览器端返回HTTP响应(响应报文)③浏览器端接收到响应, 解析显示响应体或调用回调函数2.HTTP请求报文①请求行：...

原创 2.①Promise回调地狱②链式调用③中断promise链④catch错误穿透⑤升级版ES7async（异步）和await（异步等待成功结果）

Promise的链式调用回调地狱请求1成功后执行请求2，，，Promise的链式调用解决回调地狱中断promise链的方法错误穿透

原创 2.GitHub

一：介绍GitHub 是一个 Git 仓库管理网站。可以创建远程中心仓库，为多人合作开发提供便利。二：使用流程先在Git上面创建一个新仓库，点右上角加号 -> 点GitHub 远程仓库使用流程较为简单，主要有以下几种场景：1.本地有仓库 注册并激活账号 创建仓库 获取仓库的地址 本地根据页面跳转配置远程仓库的地址 git remote add origin https://github.com/xiaohigh/test2.gi..

原创 1.①Promise(内是executor回调，两个函数参数resolve和reject)then值value和reason②catch只输出失败reason③all正确数组和race④封装ajax

一：准备：函数对象与实例对象1.函数对象：将函数作为对象使用时，简称为函数对象。有个注意事项：name不能修改是函数对象不可修改的属性2.实例对象：new构造函数或类产生的对象，我们称之为实例对象。...

原创 2.AJAX跨域问题

一：为什么会有跨域这个问题？原因是浏览器为了安全，而采用的同源策略（Same origin policy）二：什么是同源策略？1. 同源策略是由Netscape提出的一个著名的安全策略，现在所有支持JavaScript 的浏览器都会使用这个策略。2. Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。3. 所谓同源是指：协议，域名（IP），端口必须要完全相同。 即：协议、域名（IP）、端口都相同，才能算是在同一个域里。三：没有同源策略的危险场景：危险场景：..

原创 1.①AJAX简介（XMLHttpRequest）②解析json数据③解构赋值④请求异常与超时的处理⑤避免用户多次重复发送请求（前几次取消，只留最后一次）

一：AJAX简介1.页面无刷新获取数据：比如鼠标移动到充话费自动出div框又比如：刷今日头条新闻，每向下一点都会刷出一条新新闻2.允许根据用户的事件更新部分页面内容+-

原创 webpack相关

一：运行指令①开发环境指令：webpack src/js/index.js -o build/js/built.js --mode=development功能：webpack 能够编译打包 js 和 json 文件，并且能将 es6 的模块化语法转换成 浏览器能识别的语法。②生产环境指令：webpack src/js/index.js -o build/js/built.js --mode=production功能：在开发配置功能上多一个功能，压缩代码。二：webpack

原创 1.Node.js①下载安装②cmd交互③Buffer(缓冲器)④文件写入、读取、复制、移动+重命名、删除⑤文件夹创建、读取、删除⑥路径问题⑦查看是文件还是文件夹stat⑧换行\r\n⑨npm

一：介绍Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，是一个应用程序。官方网址，中文站二：作用 解析运行 JS 代码并且操作系统资源，如内存、硬盘、网络 比如说js代码在浏览器运行时无法对计算机的硬盘进行写入和删除的操作，但是我们通过Node.js可以实现三：应用场景 APP 接口服务 网页聊天室 动态网站, 个人博客, 论坛, 商城等 后端的Web服务，例如服务器端的请求（爬虫），代理请求（跨域）

原创 8.ES6新增（七）①基本和引用类型在赋值和拷贝的区别②直接赋值③浅拷贝concat、slice、扩展运算符...、assign④深拷贝用JSON，js和JSON相互转换⑤递归实现深拷贝

首先我们需要掌握一些基本的知识点：1、在JS中，数据类型分为：基本数据类型：Number，String，Undefined，Null，Boolean，Symbol，BigInt引用数据类型：（object) 分为 ????????Array, function, date, RegExp2、JS中，栈（stack）和 堆（heap）:栈（stack）为自动分配的内存空间，它由系统自动释放。堆（heap）为动态分配内存空间，大小不定，不会自动释放。栈里存放：基本类型全部和引用类型的名字堆

原创 7.ES6新增（六）对象的扩展①Object.is判断两个值是否完全相等②Object.assign对象的合并③ 修改原型__proto__ ④Object.setPrototypeOf()

一：判断两个值是否完全相等Object.is用来判断NAN其实就是=== let n = 100; let n2 = 200; console.log(Object.is(n, n2)); //false console.log(Object.is(NaN, NaN)); //true二：Object.assign对象的合并 const A = { ...

原创 6.ES6新增（五）数值Number扩展：①进制②isFinite是否是数字③isNaN是否是NAN④parseInt字符串转整数⑤trunc去除小数⑥isInteger是否为整⑦幂运算**或pow

目录一：进制：二进制，八进制，十进制，十六进制二：Number.isFinite检测结果是否是一个数字。三：Number.isNaN检测一个数值是否为Nax四：Number.parseInt字符串转整数从前自动分隔字符串提取整数部分输出（Number.parseInt方法和Number相比区别）五：Math.trunc将数字的小数部分抹掉六：Number.isInteger判断一个数是否为整数integer:整型七：幂运算**(ES7)...

原创 5.ES6新增（四）①ES5创建对象：字面量、Object构造函数、工厂、构造函数、Object.create()、构造+原型、②ES6中类、抽象类、接口③静态属性和方法④类的继承⑤get和set

一：class介绍与类创建ES6提供了更接近传统语言的写法，引入了Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。基本上，ES6的class可以看作只是一个语法糖，它的绝大部分功能，ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。1.class声明类......

原创 5.分解质因数 输入90，输出 90 = 2*3*3*5

<body> <!-- 输入90，输出 90 = 2*3*3*5 --> <!-- 从2开始 90 = 2 * 45 3 90 = 2 * --> <script> let x = 90 var s = '90' + '=' for (let i = 2; i < 90; i++) { if (.

原创 4.ES6新增（三）Set和Map

一：Set集合

原创 3.ES6新增（二）①rest参数（就是...可以i数组合并）和spread扩展运算符的区别②第七种数据类型Symbol③迭代器for...of和for...in的区别

一：ES6中rest剩余参数替代了arguments1.写法...args：rest剩余参数（用在形参上面，传递数组）2.和arguments的区别

原创 2.ES6新增（一）①let和const块级作用域②解构赋值（三点符号...做什么的）③模板字符串④对象的简化写法⑤箭头函数⑥forEach循环

目录一：块级作用域：二：解构数组：1.①原先的：将数组元素分别赋值给变量 ②现在的：将数组元素分别赋值给变量2. 还可以利用和...args剩余参数一样的特性将剩余的放进另一个数组里3.①原先的：数组里两个数交换位置②现在的：数组里两个数交换位置4.①原先的：数组求和②现在的：数组求和三：解构对象①原先的：赋值取对象属性并输出②现在的：取对象属性并输出四：模板字符串``1. ``可以保持原有格式2. 字符串中进行变量拼接 $(变量名)五：...

原创 1.ES5①严格模式‘use strict‘下this指向②Object.create()创建新对象③getset③Object.defineProperties④加属性计算总成绩⑤数组方法⑥创建函数

目录一:严格模式:1.声明方法:①全局下声明注意写法多一个空格都不行'usestrict';②函数内声明 在函数里写'usestrict'2. 严格模式特性①不允许使用未声明的变量​②函数内this指向：③eval作用域④⑤⑥:二:用Object.create()方法可以指定对象为原型创建新的对象，同时可以为新的对象设置属性, 并对属性进行描述 ，有两种方法:1.普通版:var P2= Object.create(P1,{age:{value:1...

原创 10：JQ案例:todolist

css: <style> .w { width: 600px; border: 1px solid #ccc; margin: 0 auto; border-radius: 10px; padding: 10px; box-sizing: border-box; } #enter...

原创 9.JS自定义扩展插件方法①本身：$.extend({a:fun...})②对象：$.fn.extend({a:fun...})③多库共存jQuery.noConflict()④轮播swiper插件

目录一两种方式，一种是jQuery本身的扩展方法，另一种是jQuery所选对象的扩展方法。1.jQuery.extend({a:fun...},{b:fun...});　　　// jQuery 本身的扩展方法2.jQuery.fn.extent((a:fun...),{b:fun...});　 // jQuery 所选对象扩展方法二：多库共存jQuery.noConflict()问题 : 如果有2个库都有$, 就存在冲突三：swiper插件一两种方式，一种是jQue...

原创 8.自定义动画①淡入淡出切换fadeIn、~Out、~Toggle②滑动slideDown、~Up、~Toggle③显示show隐藏hide切换toggle④通用动画animate（）⑤停stop（）

目录一：淡入淡出切换：不断改变元素的透明度来实现的参数毫秒1.fadeIn():带动画的显示2.fadeOut():带动画的显示3.fadeToggle():带动画的显示/隐藏二：滑动（从上到下出现） 参数毫秒1.slideDown():带动画的展开2.slideUp():带动画的收缩3.slideToggle():带动画的切换展开/收缩三：显示与隐藏（从左上角到右下角出现）如果不传递参数毫秒，默认是没有任何过渡效果的，瞬间出现1.show...

原创 7. window.onload与document.ready的区别

区别: window.onload与 $(document).ready() * window.onload * 包括页面的图片加载完后才会回调(晚) * 只能有一个监听回调，多次设置为赋值操作，只输出最后那个 * $(function(){}) * 全称:$(document).ready() * 页面加载完就回调(早) * 可以有多个监听回调，输出多个<body> <h1>测试window.onload与$(doc...

原创 6.事件委托（冒泡）新加子元素, 同有响应事件$(‘父‘).on(‘click‘,‘子‘,function(){})；$(‘父).delegate(‘子‘,‘click‘,~）删除$(父).off()

事件委托：方法1 $('ul').on('click','li',function(){}) 方法2 $('ul').delegate('li','click',function(){})取消事件委托：方法1 $('ul').off() 方法2 $('ul').undelegate()1. 事件委托: * 将多个子元素(li)的事件监听委托给父辈元素(ul)处理 * 监听回调是加在了父辈元素上 * 当操作任何一个子元素(l...

原创 4.JQ案例：①爱好选择器filter()②tab栏切换③回到顶部

一：爱好选择器注意事项：①如何用filter()②this指向③ 哪个是JQ对象哪个是DOM对象<body> <form> 你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选 <br /> <input type="checkbox" name="items" value="足球" />足球 .

原创 5.①节点插入（内后append前prepend；外前before后after）删除（empty；remove包括皮）替换replaceWith②事件绑定2种 与解除1种：鼠标mouse滑动移入移出3

目录一：页面节点的添加/替换元素：1.内部：选中元素的内部：*在当前匹配的所有元素内的最后插入指定内容*在当前匹配的所有元素内的最前面插入指定内容2.外部：选中元素的前后（兄弟节点）：*将指定内容插入到当前所有匹配元素的前面*将指定内容插入到当前所有匹配元素的后面*用指定内容替换所有匹配的标签二：页面元素节点的删除*删除所有匹配元素的子元素文本，标签节点不删：西瓜吃了，皮不吃*删除所有匹配的元素，标签节也点删：西瓜吃了，皮也吃了三：事件绑定与解除1.点

原创 4.给定一个数组，随机打乱数组输出