- 博客(37)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 js面试题
this关键字(指向)总结1.在全局范围内,this指向window对象2.在函数当中,指向它最后调用的那个对象3.在构造函数当中,this指向new的那个新对象4.在箭头函数当中,this指向父级的上下文全局范围之内1.this等价于window对象；2.用var声明一个变量和给this或者window添加属性是等价的；3.如果你在声明一个变量的时候没有使用var或者let、const(es6),你就是在给全局的this添加或者改变属性值。函数内的this对于函数中的this的指向问
2021-05-20 21:32:40
155
转载 微信小程序checkbox复选框变成圆型
checkbox .wx-checkbox-input{ border-radius: 50%;/* 圆角 */ width: 46rpx; /* 背景的宽 */ height: 46rpx; /* 背景的高 */}/* 选中后的 背景样式*/checkbox .wx-checkbox-input.wx-checkbox-input-checked{ border: 1rpx solid #f3333e; background: #f3333e;}che.
2021-05-16 19:22:08
4110
原创 原生ajax创建步骤
1.ajax是一种用于创建动态网页的技术2.创建步骤1.创建xhr核心对象var xhr= new XMLHTTPRequest()2.调用open准备发送在里面有三个参数参数一:请求方式参数二:请求地址参数三:true为异步,false为同步xhr.open('post','请求的文件',true)3.如果是post请求,必须设置请求头xhr.setRequestHeader('content-Type', 'application/x-www-form-urlencoded
2021-05-07 21:55:02
182
原创 原型与原型链
1.prototype每个函数都有一个prototype属性,被称之为显示原型2. _ _ proto_ _每个实例对象都会有_ _ proto _ _ 属性, 其被称为隐式原型每一个实例对象的隐式原型_ _ proto _ _ 属性指向自身构造函数的显示原型3.constructor每个prototype原型都有一个constructor属性,指向它关联的构造函数4.原型链获取对象属性时,如果对象本身没有这个属性,那就会去他的原型_ proto _上去找,如果还查不到,就去找原型
2021-05-07 21:45:03
84
原创 微信小程序之生命周期
小程序的生命周期分别是应用的生命周期页面的生命周期应用的生命周期对页面生命周期的影响路由变化对页面生命周期的影响1.应用的生命周期1.onLaunch:生命周期函数监听小程序初始化,当小程序初始化完成时,会触发onLaunch(全局只触发一次)2.onShow:生命周期函数监听小程序显示,当小程序启动,或从后台进入前台显示,会触发onShow3.onHide:监听小程序隐藏,当小程序从前台进入后台,会触发onHide**前台、后台定义:**当用户点击左上角关闭，或者按了设备 Home
2021-05-06 21:17:54
121
原创 微信小程序简介
1.什么是微信小程序微信小程序,简称小程序,英文名Wechat Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用触手可及的梦想,用户扫一扫或搜一下即可打开应用2.小程序与普通网页开发的区别(1)开发语言小程序的主要开发语言是javaScript同普通的网页开发有很大的相似性（2）逻辑层和渲染层网页开发渲染线程和脚本线程是互斥的(长时间的脚本运行可能会导致页面失去响应)说明:网页开发者可以使用到各种浏览器暴露出来的DOM APl,进行了DOM选中和操作小
2021-05-06 20:53:23
5980
原创 watcher源码分析
1.watcher监听简介Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是:1、在自身实例化时往属性订阅器(dep)里面添加自己2、自身必须有一个update()方法3、待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。2.源码function Watcher(vm, exp, cb) { this.cb = cb; this.vm = vm; this.exp = exp; th
2021-05-05 20:21:21
92
原创 Vue源码(observer)
1. observer简介observer对数据进行递归遍历，包括子属性对象的属性，都加上 setter和getter这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化2.源码function MVVM(options) { //给实例新增一个$options属性,.并且把传递过来的配置进行暂存 this.$options = options; //在实例上新增一个_data 保存传递过来的data数据 var data = this
2021-05-05 20:17:35
343
原创 Vue源码(compile)
compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图代码如下function Compile(el, vm) { this.$vm = vm; //this Compile的实例 $vm 是MVVM的实例 (vm) // el == "#app" 判断当前用户传递的el属性是元素节点还是选择器,如果是元素节点则直接保存到$el中通, //如果不是 则根据选
2021-05-05 20:03:48
239
原创 Vue源码(MVVM)
function MVVM(options) { //给实例新增一个$options属性,.并且把传递过来的配置进行暂存 this.$options = options; //在实例上新增一个_data 保存传递过来的data数据 var data = this._data = this.$options.data; //保存this 为了之后使用this的时候保证this指向的正确性 var me = this; //通过Object.key
2021-05-05 19:50:46
162
原创 梦学谷项目报告(下)
1.登录模块登录模块是使用element-ui里面的from表单输入框,对表单输入的信息进行了一个验证,防止用户输入凌乱的信息,请求接口获取权限2.首页框架首页框架使用啦element-ui里面的布局容器，来对整个页面进行了一个布局，左边选项卡使用菜单栏,在点击的时候,会有一个加载效果,这个使用啦element-ui的lodig加载框3.会员管理会员管理模块包含啦数据渲染,以及增删改查的功能,请求接口即可...
2021-05-05 19:48:31
101
原创 梦学谷项目报告(上)
1.项目介绍梦学谷这个项目是基于Vue进行开发,开发的过程中我们是采用啦团队开发,在这里我主要介绍下我负责的模块2.项目所用技术栈
2021-05-05 19:12:29
131
原创 后台管理项目(下)
模块分析1.登录模块登录模模块用到啦element-ui里面的表单框还有button按钮,为了防止用户在输入框里面输入一些混乱信息,对表单进行了一个验证,如果未登录不可以进入到其他页面,在这里我们做了一个路由鉴权,我们向后台请求到接口后,就可以进行登录路由鉴权代码router.beforeEach((to, from, next) => { if (to.path === '/login') return next() const token = window.sessionStora
2021-05-05 18:49:24
150
原创 后台管理项目分析(上)
1.项目介绍1.1电商后台管理功能介绍电商后台管理系统用于管理用户账号,商品的分类,用户列表,商品信息,订单,数据统计业务功能1.2项目所用技术栈2.项目所用模块
2021-05-05 17:47:25
404
原创 小米商城项目分析(下)
1.首页模块技术点头部文本是用ul标签进行的布局,每个标签都加上hover效果,鼠标滑动时颜色会进行改变,每个标签都设置了点击事件,这些点击事件都是用来触发别的模块,中间部分主要是使用啦element-ui的导航栏,可以进行路由的切换,轮播图是使用element-ui的走马灯进行实现2.商品展示区域技术点商品展示这块区域是进行了一个全局组件的注册,在main.js里面进行注册,然后在首页进行了一个调用,每个商品在鼠标滑动时会显示出一个阴影效果和一个图片放大的效果,代码如下,在点击浏览更多时,会根
2021-05-05 17:22:39
712
原创 小米商城项目分析(上)
1.项目介绍此项目是采用前后端分离,前端是采用Vue版本号3.12.0进行开发,基于Vue+Vue-router+Vuex+Element.ui-axios封装后端则采用啦Node.js来进行实现1.前端主要包含啦11个页面,实现了商品的展示,商品的分类,关键字搜索商品,商品信息详细展示,用户注册、登录,购物车我的订单,我的收藏,以及错误处理的功能2.后端采用MVC模式,根据前端的需要提供详细的接口,传送的地址为store-server 2.项目技术栈3.项目所有模块...
2021-05-03 01:57:01
2056
2
原创 axios封装
第一步:配置axios首先我们要创建个Service.js,然后存放axios的配置以及拦截器,最后导出一个axios对象import axios from 'axios';import router from '../router'const request = axios.create({ // baseURL: 'http://39.100.7.70:81/', timeout: 5000});request.interceptors.request.use(config=
2021-05-02 23:17:32
138
1
原创 $nextTick
Vue中nextTick涉及到Vue中DOM的异步更新用法:将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它一.示例<div class="app"> <div ref="msgDiv">{{msg}}</div> <div v-if="msg1">Message got outside $nextTick: {{msg1}}</div> <div v-if="msg2">Message got in
2021-05-02 23:02:37
83
原创 vuex的核心概念和运行机制
首先呢我们要知道vuex是干嘛的1.vuex的意义vuex是为vue.js应用程序开发的状态管理模式,它采用集中存储来管理组件的所有数据2.vuex的核心概念vuex有五大核心分别是:state:用来存储数据,是一个对象Mutations:用来操作state里面的数据Actions:调用Mutations的方法,进行异步操作Getters:类似于计算属性,对数据做些逻辑性操作Modules:将仓库分模块存储3.运行机制在组件中通过dispatch来调用actions中的方法在act
2021-04-29 21:41:16
74
1
原创 v-for中key的作用
在说这个问题时,我要举个例子没有key时的效果<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div id="app"> <div> <input type="text" v-model="name"> &l
2021-04-29 21:24:34
70
原创 修改数据页面不更新的原因和解决方案
使用vue，遇到几次修改了对象的属性后，页面并不重新渲染1.原因vue2是用object.defineproperty实现响应式数据,组件在初始化时,对data中的item进行了递归遍历对item的每一个属性进行劫持,添加了set,get方法.我们后来新加了个newproperty属性,并没有通过object,defineproperty设置响应式数据,修改后不会视图更新2. 解决方案Vue.set()Vue.set( target, propertyName/index, value )参
2021-04-29 20:55:43
220
原创 v-if和v-for的优先级
如果它们两个处在同一个标签当中,v-for的优先级是要大于v-if的,如图!v-for会对数据进行循环遍历,才会对数据进行一个判断这样的做法有利于提高浏览器的性能,造成不必要的资源浪费如果想要v-if的优先级大于v-for,那么可以这样做是v-if处在比v-for的父标签当中去,这样就会对数据先进行判断,然后进行遍历...
2021-04-29 20:38:47
367
原创 v-if和v-show的区别
1.相同点它们两个都是用来控制dom元素的显示与隐藏2.区别v-if:它是用来对dom元素进行一个切换,将dom元素进行一个删除或者是添加v-show:它是对dom元素进行一个显示与隐藏,为元素添加css样式,display:bloak;元素还存在3.性能对比v-if:有着更高的切换消耗v-show:对元素有着更高的显示与隐藏4.应用场景v-if适合运营条件不大可能改变的场景下；v-show适合频繁切换；说啦那么多,我们来个例子操作下v-if如果购物车里面没有数据那么则显示购物
2021-04-29 20:10:31
87
原创 Vue组件中data为什么是个函数
在说这道题之前呢,首先我来讲一下深拷贝和浅拷贝在js当中呢,简单的数据类型就是浅拷贝,复杂的数据类型就需要用到深拷贝现在给大家举一个例子var a = 0;var b = a;b = 1console.log('a···' + a,'b···' + b) //a···0 b···1这个时候大家可以看到,我把a的值赋给了b,将b的值赋给了a,a的值也没有发生改变var a{ name:'张三' }var b=ab.name='李四'console.log(a.name)
2021-04-29 19:45:40
159
1
原创 Vue高频面试题
1.为何组件的data必须是一个函数组件的实例必须是一个函数,目的时为了防止多个组件实例对象之间共有一个data,产生数据污染.采用函数的形式,initData时会将其作为工厂函数都会返回一个全新的data对象2.vue常用的指令1.v-model:用于表单的元素实现双向数据绑定2.v-for:遍历循环数组或json3.v-show：显示内容,通过display=block/none来控制元素隐藏出现4.v-hide：隐藏内容,与v-show一样5.v-if:显示与隐藏 dom 元素的删除添加
2021-04-28 22:02:34
154
1
原创 Vue组件传值方式
在这个前端不断工程化的时代,组件之间的通信已经成为我们工作当中不可缺的一部分组件传参呢也给我们带来不少好处: 1.如果有一个功能很多地方都会用到,写成一个组件就不用重复写这个功能2.页面会简洁一些,更方便管控接下来我给大家总结几种传参方式1.父传子首先在页面当创建两个组件,一个为父组件,一个为子组件第二步:将子组件挂载到父组件当中去,并进行注册<template> <div> <Som></Som> </div>&l
2021-04-24 13:29:48
293
2
原创 代码断点调试(让你看懂别人的代码入口)
第一步:打开浏览器控制台,点击Sources选中两个断点刷新就行调试接下来进行这几步操作我用一张图来给大家描绘出这几个步骤的意思
2021-04-23 11:50:26
608
原创 Node.nodeType的节点类型
今天我们来做一个简单的获取注释节点的操作,废话不多说,上代码第一步<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <input type="text" placeholder="请输入用户" id="Input"> <!-- 这是一个注释哦,请不要删
2021-04-22 11:54:15
275
1
原创 简单的实现一个数据的双向绑定
Vue数据的双向绑定是通过Object.defineProperty来实现,今天我就来写一个简单的数据绑定,废话不多说,上代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <input type="text" id="input" onchange="inputC
2021-04-21 19:16:02
677
1
原创 Object.defineProperty()的介绍和使用方法
Vue中的双向绑定的核心思想是通过Object.defineProperty()这个方法来实现的,它产生了两个方法,分别是set()和get()来对数据进行一个劫持那我们就来详细的解释一下Object.defineProperty()这个方法Object.defineProperty()可以添加属性,它还可以定义属性和修改属性语法:Object.defineProperty(obj, prop, descriptor)参数说明:1.obj:必须。目标对象2.prop:必须。需要定义或修改的属
2021-04-21 11:22:22
437
3
原创 Vue中key的作用
在diff算法里面,key可以管理可复用的元素,目的是为啦减少不必要元素的重新渲染,同时也要让必要的元素能够重新渲染Vue尽可能高效的渲染元素,而不是重新渲染元素,这就是diff算法神奇的地方,但是在某种情况下并不符合的要求,比如:允许用户在不同的登录方式之间切换<template> <div class="test"> <div v-if="loginType === 'username'"> <label>Username:</l
2021-04-21 10:40:48
90
原创 Vue注册全局组件-登录组件
在src中新建一个components文件夹1.在components文件夹里新建一个module文件夹,在创建一个Login.vue代码如下<template> <div> <el-dialog title="登录" center :visible.sync="loginFormVisible" width="20%" :before-close="handleClose"> <el-form :model="loginForm" :rules=
2021-04-18 18:09:27
549
1
原创 element-ui全局引入和按需引入
第一步命令窗口输入cnpm i elementui from --save进行下载第二步如果是全局引入在main.js里面进行配置import Vue from 'vue';import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);如果是按需引入先安装cnpm install babel-plugin-component -D然后，将 .b
2021-04-13 08:00:24
662
1
原创 JS事件类型有哪些?分别是什么?
JavaScript可以处理的事件类型为:鼠标类型、键盘类型和HTML类型!注意:所有的事件处理函数都由两个部分组成, on+事件名称。例如:click事件,处理函数就是onclick现在我们来看第一种鼠标事件click:单击鼠标按钮时触发dblclick:当用户双击鼠标按钮时触发mousedown :当用户释放鼠标按钮时触发mouseup:当用户释放鼠标按钮时触发mouseover：当鼠标移到某个元素上方时触发；mouseout：当鼠标移出某个元素上方时触发；mousemove：当鼠
2021-04-09 11:44:15
1336
1
原创 浏览器输入URL回车会发生什么
这是一个非常经典的面试题,这道题没有具体的答案,它涉及很多的知识点，面试官会通过这道题了解你对哪一方面的知识比较擅长，然后继续追问看看你的掌握程度。当然我写的这些也只是我的一些简单的理解，从前端的角度出发，我觉得首先回答必须包括几个基本的点，然后在根据你的理解深入回答。1、浏览器的地址栏输入URL并按下回车。2、浏览器查找当前URL是否存在缓存，并比较缓存是否过期。3、DNS解析URL对应的IP。4、根据IP建立TCP连接（三次握手）。5、HTTP发起请求。6、服务器处理请求，浏览器接收HT
2021-04-08 21:37:25
235
1
原创 HTTP与HTTPS的区别
超文本传输协议HTTP协议被用于在Web浏览器和网站服务器之间传递信息，HTTP协议以明文方式发送内容，不提供任何方式的数据加密，如果攻击者截取了Web浏览器和网站服务器之间的传输报文，就可以直接读懂其中的信息，因此，HTTP协议不适合传输一些敏感信息，比如：信用卡号、密码等支付信息。为了解决HTTP协议的这一缺陷，需要使用另一种协议：安全套接字层超文本传输协议HTTPS，为了数据传输的安全，HTTPS在HTTP的基础上加入了SSL协议，SSL依靠证书来验证服务器的身份，并为浏览器和服务器之间的通信加密。
2021-04-08 11:53:58
59
原创 全局过滤器filter的用法
过滤器filter的用法**1.**注册在全局的fliter(1)全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面(2) 过滤器函数始终以表达式的值作为第一个参数。带引号的参数视为字符串，而不带引号的参数按表达式计算(3)可以设置两个过滤器参数,前提是这两个过滤器处理的不冲突(4)用户从input输入的数据在回传到model之前也可以先处理废话不多说,上代码 vue自定义过滤器
2021-03-30 19:38:17
764
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人