炙@年-CSDN博客

原创对象和面向对象

对象和面向对象对象：属性和方法的集合叫做对象（万物皆对象）。面向对象：面向对象的三大特点（封装，继承，多态）缺一不可。通常“基于对象”是使用对象，但是无法利用现有的对象模板产生新的对象类型，继而产生新的对象，也就是说“基于对象”没有继承的特点。而“多态”表示为父类类型的子类对象实例，没有了继承的概念也就无从谈论“多态”。现在的很多流行技术都是基于对象的，它们使用一些封装好的对象，调用对象的方法，设置对象的属性。但是它们无法让程序员派生新对象类型。他们只能使用现有对象的方法和属性。所以当

2021-05-20 21:42:24 201

原创事件模型：事件委托、代理？如何让事件先冒泡后捕获

事件模型：事件委托、代理？如何让事件先冒泡后捕获事件委托：又叫事件代理，利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。原理：事件冒泡机制，从最深的节点开始，然后逐步向上传播事件。作用：①支持为同一个DOM元素注册多个同类型事件；②可将事件分为事件捕获和事件冒泡。addEventListener(event，function，useCapture布尔值)默认为false冒泡，true为捕获attachEvent() //IE8及IE更早版本

2021-05-20 21:32:15 659

原创 this关键字(指向)

普通函数this指向1.谁调用的函数，函数的this就指向谁，否则指向全局2.可以通过call apply bind修改函数内部this指向-----------------箭头函数this指向1. 箭头函数本身是没有 this，箭头函数 this 是定义箭头函数时父级作用域的 this，也就是说使用箭头函数时，箭头函数内部的 this，我们只需要看定义该箭头函数时，该箭头函数父级的 this 即可2. 于箭头函数自身没有this，所以call、apply、bind对箭头函数是不起...

2021-05-20 21:20:43 157

原创 window的onload事件和domcontentloaded

window的onload事件和domcontentloadedwindow.onload：当一个资源及其依赖资源已完成加载时，将触发onload事件。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>操作对象被加载</title> <script> window.οnlοad=function(.

2021-05-20 21:05:35 670

原创 for···in和for···of的区别

9.for···in和for···of的区别：(for···in取key，for··of取value)①从遍历数组角度来说，for···in遍历出来的是key(即下标)，for···of遍历出来的是value(即数组的值)；var arr = [99,88,66,77];for(let i in arr){console.log(i); //0,1,2,3}for(let i of arr){consoel.log(i); //99,88,66,77...

2021-05-20 20:55:47 132

原创函数柯里化

10.函数柯里化（卡瑞化、加里化）？概念：把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数，并且返回接受余下的参数而且返回结果的新函数的技术。容易理解的概念：Currying概念其实很简单，只传递给函数一部分参数来调用它，让它返回一个函数去处理剩下的参数（主要是利用闭包实现的）。特点：①接收单一参数，将更多的参数通过回调函数来搞定；②返回一个新函数，用于处理所有的想要传入的参数；③需要利用call/apply与arguments对象收集参数；④..

2021-05-20 20:49:39 58

原创数组扁平化

数组扁平化var arr = [1,2,[3,4,[5,6,[7,8,[9,10]]]]];1. reduce遍历数组每一项，若值为数组则递归遍历，否则concat。function flatten(arr) { return arr.reduce((result, item)=> { return result.concat(Array.isArray(item) ? flatten(item) : item); }, []);}2..

2021-05-20 20:33:29 70

原创查找数组重复项

查找数组重复项1.查找该元素首次出现的位置和最后出现的位置下标是否相同，同时判断新数组中是否不存在该元素，如果都满足则添加进新数组中去。var arr=[1,2,4,4,3,3,1,5,3];function res(arr){ var temp=[]; arr.forEach(function(item){ if(arr.indexOf(item)!==arr.lastIndexOf(item)&&temp.indexOf(item)===-1){

2021-05-20 20:24:47 1725

原创 iframe 的优缺点有哪些

iframe的优缺点有哪些？优点：iframe能原封不动的把嵌入的网页展现出来如果有多个页面都用iframe 那么只需要修改ifame的内容就可以调用每一个页面内容的修改网页若是为了统一风格，根部跟版本都一样，就可以写成一个页面，用iframe来嵌套可以增加代码的重复使用。 iframe可以解决加载缓慢的第三方内容（图标和广告）缺点： ①会产生很多页面不易管理； ②iframe框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的注意...

2021-05-20 19:48:28 435

原创小程序基础以及小程序生命周期

小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播不需要下载应用就可以直接使用，同时具有出色的使用体验。小程序开发准备：申请账号安装开发工具申请账号按照步骤一步一步的来网址：https://mp.weixin.qq.com注册完成之后他会在你的邮箱发一个这个文件点击绿色的地址然后进去完善个人信息进行绑定填写完信息和响应的资料，就可以拥有自己的小程序账然后下载个开发者工具安装登陆上去大多数电脑都是window64的点击下载就可..

2021-05-06 20:42:07 85

原创梦学谷（会员、供应商、商品、员工）

会员管理主要采用了增加删除修改删除和查询以及重置外加一个element-ui里的日期表代码如下：<template> <div> <bread></bread>  <el-form :model="searchMap" ref="searchRef" style="margin-top: 20px"> <el-row :gutter="10"&g

2021-05-05 21:12:40 167

原创梦学谷后台管理系统（登陆与首页界面）

梦学谷后台管理系统(一)一.项目结构梦雪谷主要采用了用mock来模拟数据接口来模拟数据的全局引入element-ui和css样式登陆界面用户登录主要采用element-ui中的表单验证来验证用户格式是否符合规范,符合则可以点击登录,重置可以把已输入的账号密码进行清空可以继续重新编辑代码如下：<template> <div class="all"> <el-form :model="ruleForm" :rules="rules"

2021-05-05 20:06:35 433

原创 vue 电商管理代码总结（下）

11.订单管理<template> <div>  <Breadcrumb></Breadcrumb> <el-card> <el-row> <el-col :span="8">  <el-input placeholder="请输入内容"&g

2021-05-05 17:45:21 176

原创 vue 电商管理代码总结（上）

项目架构（确定使用框架）首先是用的Vue框架进行组件化开发，Element框架支撑，js，css，html的代码逻辑通过ajax进行接口的请求调用，达到获取服务器数据的目的。再完美的渲染的页面。项目前（定制开发规范）团队协作/开发规范/统一开发规范命名规范（方法名，变量名。。）封装规范 (功能，参数，返回值，如何使用。。。)项目规范（主要模块，功能模块，组件...

2021-05-05 17:29:13 438 1

原创 vue 前端项目总结下

项目架构（确定使用框架）首先是用的Vue框架进行组件化开发，Element框架支撑，js，css，html的代码逻辑通过ajax进行接口的请求调用，达到获取服务器数据的目的。再完美的渲染的页面。项目前（定制开发规范）团队协作/开发规范/统一开发规范命名规范（方法名，变量名。。）封装规范 (功能，参数，返回值，如何使用。。。)项目规范（主要模块，功...

2021-05-05 01:14:35 469 1

原创 vue源码注释 compile

function Compile(el, vm) { this.$vm = vm; //this Compile的实例 $vm 是MVVM的实例 (vm) // el == "#app" 判断当前用户传递的el属性是元素节点还是选择器,如果是元素节点则直接保存到$el中通, //如果不是则根据选择器去查找对应的元素然后保存 this.$el = this.isElementNode(el) ? el : document.querySelector(el);.

2021-05-05 00:24:28 62

原创 vue watcher源码注释

function Watcher(vm, exp, cb) { //在watcher的实例上保存回调函数 this.cb = cb; //用于更新界面的回调函数 this.vm = vm; //MVVM的实例vm this.exp = exp; //对应的表达式 this.depIds = {}; //n个相关的dep的容器 this.value = this.get(); //当前表达式对应的value}Watcher.prototype = { .

2021-05-05 00:24:08 138

原创 web前端商城项目总结上

项目架构（确定使用框架）首先是用的Vue框架进行组件化开发，Element框架支撑，js，css，html的代码逻辑通过ajax进行接口的请求调用，达到获取服务器数据的目的。再完美的渲染的页面。项目前（定制开发规范）团队协作/开发规范/统一开发规范命名规范（方法名，变量名。。）封装规范 (功能，参数，返回值，如何使用。。。)项目规范（主要模块，功能模块，组件...

2021-05-05 00:05:10 1593

原创 vuex的核心概念和运行机制

vuex 中的核心概念及原理vuex 底层原理：vuex 推荐map的方式代替原生操作：VUE核心概念； state:提供一个响应式数据； Getter:借助Vue的计算属性computed来实现缓存； Mutation；更改state方法； Action:触发mutation 方法； Module:Vue.set 动态添加state 到响应式数据中； vuex 中核心原理：通过vue 实例，将state数据赋值给data(){...

2021-05-04 19:50:54 243

原创 axios 封装

一、axios的封装在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。他有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御cSRF等。所以我们的尤大大也是果断放弃了对其官方库vue-resource的维护，直接推荐我们使用axios库。如果还对axios不了解的，可以移步axios文档。安装npm install axios; // 安装axios复制代码引入一般我会在项目

2021-05-04 19:27:56 661

原创 vue 钩子函数运行顺序

在vue中，实例选项和钩子函数和{{}}表达式都是不需要手动调用就可以直接执行的。在页面首次加载执行顺序有如下：beforeCreate //在实例初始化之后、创建之前执行created //实例创建后执行beforeMounted //在挂载开始之前调用filters //挂载前加载过滤器computed //计算属性directives-bind //只调用一次，在指令第一次绑定到元素时调用directives-inserted //被绑定元素插入父节点时调用a.

2021-05-04 19:03:37 362

转载 vue nextTick

Vue.js中this.$nextTick()的使用this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。假设我们更改了某个dom元素内部的文本，而这时候我们想直接打印出这个被改变后的文本是需要dom更新之后才会实现的，也就好比我们将打印输出的代码放在setTimeout(fn, 0)中下面先看下例子<templat

2021-05-04 18:56:31 70

原创 vue 源码 oberser

function Observer(data) { //在Observer实例上暂存data this.data = data; this.walk(data);}Observer.prototype = { walk: function(data) { var me = this; //对data里所有的属性名进行遍历 Object.keys(data).forEach(function(key) { .

2021-05-04 14:11:31 110

原创 Vue修改数据页面不更新的问题解决

Vue修改数据页面不更新的问题解决解决方法1:Vue.$set(官方推荐) Vue.set( target, propertyName/index, value ) 参数： target：要修改的对象或数组 propertyName/index：属性或下标 value：修改后的value值官方对这个API的解释就是使用这个api修改的数据会为其添加响应式getter和setter让其拥有数据响应的特性this.$set(th...

2021-04-29 20:44:14 1052

原创 v-for中的key值的作用

v-for中的key值的作用1 .key是什么？当我们在使用v-for时，需要给单元加上key<ul> <li v-for="item in items" :key="item.id">...</li></ul> 用+new Date()生成的时间戳作为key，手动强制触发重新渲染<Comp :key="+new Date()" />2.key值的作用？当 Vue.js 用 v-fo...

2021-04-29 20:06:25 476

原创 v-if和v-for的优先级

v-if和v-for的优先级v-for和v-if不应该一起使用，必要情况下应该替换成computed属性。因为v-for比v-if优先，如果每一次都需要遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候错误写法： <li v-for="user in users" v-if="user.isActive" :key="user.id"> {{user.name}} </li>正确写法：c..

2021-04-29 19:50:12 74

原创 v-if和v-show的区别

v-if和v-show的区别1. v-if 在条件切换时，会对标签进行销毁而隐藏 <template> <div> <button @click="fun">click</button> <div v-if="pShow"> <label>UserName</label> <input type="text" place..

2021-04-29 19:37:51 58

原创 data为什么是一个函数

组件中data为什么是一个函数？vue实例中的data属性既可以是一个对象，也可以是一个函数 const app = new Vue({ el: "#app", data: { foo: "foo" }, data() { return {

2021-04-29 19:12:51 495

原创 MVVM源码注释

MVVM代码注释如下：function MVVM(options) { //给实例新增一个$options属性,.并且把传递过来的配置进行暂存 this.$options = options; //在实例上新增一个_data 保存传递过来的data数据 var data = this._data = this.$options.data; //保存this 为了之后使用this的时候保证this指向的正确性 var me = this; .

2021-04-29 18:51:29 177

原创 8个组件传值方法

一.父传子传递（1）在父组件的子组件标签上绑定一个属性，挂载要传输的变量（2）在子组件中通过props来接受数据，props可以是数组也可以是对象，接受的数据可以直接使用props: [“属性名”] props:{属性名:数据类型}代码：//父组件<template> <div> <i>父组件</i>  <son :data='name'></son>

2021-04-24 23:23:13 1843 2

转载 20道面试常会遇到的面试题

目录HTML语义化的理解HTML5新增了哪些语义化标签 H5的新特性input和textarea的区别用一个div模拟textarea的实现移动设备忽略将页面中的数字识别为电话号码的方法?你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?px和em和rem的区别你能描述一下渐进增强和优雅降级之间的不同吗?请描述一下cookies，sessionStorage和localStorage的区别？简述一下src与...

2021-04-22 20:23:12 85

原创 vue 双向绑定原理

先看效果图<div id="app"> <input v-model="name" type="text"> <h1>{{name}}</h1></div><script src="./js/observer.js"></script><script src="./js/watcher.js"></script><script src="./js/comp...

2021-04-21 19:46:48 346

原创 vue-router

初步我们分别从不同的视角来看 vue-router。从开发者角度来看，是这样的：var router = new VueRouter({ routes: [ {path: '/foo', component: {template: '<div>FOO</div>'}}, {path: '/bar', component: {template: '<div>BAR</div>'}} ]})var vm = new Vu..

2021-04-20 20:01:27 73

转载 keep-alive

利用Vue中keep-alive，快速实现页面缓存keep-alive有时候我们不希望组件被重新渲染影响使用体验；或者处于性能考虑，避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就可以用到keep-alive组件。应用场景如果未使用keep-alive组件，则在页面回退时仍然会重新渲染页面，触发created钩子，使用体验不好。在以下场景中使用keep-alive组件会显著提高用户体验，菜单存在多级关系，多见于列表页+详情页的场景如：商品列表页点击商品跳

2021-04-18 20:34:17 65

原创 vue 全局变量

1. 示例代码#include<iostream>using namespace std;int function(int a){ int b = 2,c = 0; //a,b,c仅在函数function()内有效 return a+b+c;}int main(){ int m,n; //m,n仅在函数main()内有效 cin>>m; n = function(m); cout<<n; retur

2021-04-18 18:35:22 3015

原创 Vue11个生命周期钩子函数

首先是光网的对于vue生命周期的图解这一张对于vue的生命周期已经讲解的特别详细了 ,但是光靠一张图还不于了解它的生命周期，我们需要实践，介绍一下vue的钩子函数生命周期钩子函数应该算是vue这次升级中broken changes最多的一部分了，对照1.0的文档和relea note,作了下面这样表vue 1.0+ vue2.0 description init beforeCreate 组件示例刚被创建，组件属性计算之前，如data属性等 created

2021-04-12 21:21:27 599

原创 JS鼠标事件大全

一般事件事件描述 onclick 鼠标点击事件，多用在某个对象控制的范围内的鼠标点击 onDblClick 鼠标双击事件 onMouseDown 鼠标上的按钮被按下了 onMouseUp 鼠标按下后，松开时激发的事件 onMouseOver 当鼠标移动到某对象范围上时触发的事件 onMouseMove 鼠标移动时触发的事件 onMouseOut 当鼠标离开某对象范围时触发的事件 onKe...

2021-04-09 19:48:51 91

原创原生Ajax的创建过程

1.创建xhr核心对象var xhr=new XMLHttpRequset()2.调用open准备发送参数一：请求方式参数一：请求地址参数一：是否异步 true异步/false同步xhr.open('post','http://www.baidu.com/api/search',true)3.如果是post请求，必须设置请求头。xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded

2021-04-08 16:57:17 63

原创 HTTP状态码（超详情）

目录1xx:信息2xx:成功3xx:重定向4xx:客户端错误4xx:服务端错误1xx:信息状态码含义100客户端应当继续发送请求。这个临时响应是用来通知客户端它的部分请求已经被服务器接收，且仍未被拒绝。客户端应当继续发送请求的剩余部分，或者如果请求已完成，忽略这个相应。服务器必须在请求完成后向客户端发送一个最终相应。101服务器已经理解了客户端的请求，并将通过Upgrade消息通知客户端采用不同的协议来完成这个请求。在发送晚这个响应最后的空行后，服务器将切换到在Upgrad

2021-04-08 11:57:13 150

原创 js、vue事件捕获、事件冒泡说明与使用

1、事件捕获(event capturing)事件从顶层（window对象）开始触发到被点击的精确元素事件触发的过程2、事件冒泡事件从点击元素事件触发到顶层对象事件触发的顺序触发过程3、流程图说明简单的来说，捕获：一个自顶层元素向最里层元素（HTML代码为包裹的形式的）执行事件的方式；冒泡：从最里层元素向最外层元素触发事件。代码说明1、普通方式，默认冒泡，先执行里层，再执行外层2、阻止冒泡e.stopPropagation()，事件不再向上传递。3.

2021-04-05 18:24:53 668

空空如也

空空如也