- 博客(47)
- 收藏
- 关注
RSS订阅原创 Vue的双向数据绑定原理
vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。具体步骤：第一步：需要observer(观察者)对数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化第二步：compile(模板解析器)解析模板指令，将模板中的变量替换成数据，
2021-06-21 07:50:48
533
原创 iframe的优缺点
iframe的优缺点答案：iframe也称作嵌入式框架，嵌入式框架和框架网页类似，它可以把一个网页的框架和内容嵌入在现有的网页中。优点：解决加载缓慢的第三方内容如图标和广告等的加载问题Security sandbox并行加载脚本方便制作导航栏缺点：iframe会阻塞主页面的Onload事件即使内容为空，加载也需要时间没有语意...
2021-06-14 20:23:39
300
2
原创 项目中如何修改element-ui的默认样式
（去除scoped,样式穿透 >>> , less/sass : /deep/）1.查找要修改元素的类名classF12打开网页元素审查，根据元素高亮提示找到要修改的元素（这里面我们以折叠面板为例为例）：左上是我们选中的元素（高亮显示）；然后逐级展开找到了他的类名“el-collapse-item__header”，双击之后在右边会显示出该类所包含的属性以及属性的值，所以我们只要写出想要更改的属性，再赋予我们想要的值就可以。这里面我们改一下背景颜色 background-Colo
2021-06-11 07:44:05
742
原创 elemeng-ui 中el-form 表单如何校验
前言表单校验是注册环节中必不可少的操作，表单校验可以提醒用户填写数据规则以确保用户提交数据的效性，也可以防止用户因误操作、填写错误数据或者恶意提交数据而占用服务器资源。ElementUI校验规则ElementUI封装了组件el-form来收集、校验和提交数据，其中的rules属性就是用来做数据校验的。ElementUI提供了一些常用的表单验证规则，我们可以直接使用该规则来实现数据校验。rules根据rules给出的规则会对prop中的值进行校验，当不满足要求时会弹出message相应的提示信息。&l
2021-06-08 07:56:19
270
原创 Nginx
Windows下安装Nginx前言Nginx (engine x) 是一个高性能的HTTP和反向代理服务器，也是一个IMAP/POP3/SMTP服务器。Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru 站 点（俄文：Рамблер）开发的它也是一种轻量级的Web服务器，可以作为独立的服务器部署网站（类似Tomcat）。它高性能和低消耗内存的结构受到很多大公司青睐，如淘宝网站架设。。安装步骤1、下载Nginx下载地址：Nginx （Nginx官网）2、下载之后，解压到指定
2021-06-07 11:00:39
96
原创 前端面试题大全
vue组件通信（父传子，子传父，兄弟组件通信）vue生命周期 （单词，每个钩子函数可以做什么，执行顺序）vuex (概念、几部分组成、map高级语法、数据持久化)vue-router （两种路由模式、编程式/组件式、如何传参(优缺点)、）深拷贝（什么是深拷贝，为什么要进行深拷贝，如何进行深拷贝js数据类型数据类型判断argument数组常用方法 （es4,es5,es6）call/apply/bind原型、原型链this指向问题、new的过程作用域、作用域链、自由变量、变量提升v.
2021-06-07 08:15:22
99
原创 vue-router 鉴权 守卫
路由导航守卫导航守卫就是路由跳转过程中的一些钩子函数。vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局路由守卫，组件路由守卫，路由独享守卫。每个守卫方法接受三个参数：作用：守卫页面跳转 监听页面跳转 在页面跳转前或者跳转后执行一些操作。路由的钩子函数 有三个参数 分别是 to到哪儿去 from 从哪儿来next执行下一步to：即将要进入的目标路由对象from：当前导航正要离开的路由next：执行下一步（必须要调用该方法）ne
2021-06-06 19:23:22
98
原创 webpack打包优化
1、路由懒加载在配置我们路由时，我们可以使用路由懒加载，当我们切换到这个路由时，才会加载这个页面。我们可以在路由规则中配置如下:{ path: '/', // 路由 name: 'Home', // 路由名称 component: () => import("@/views/Home.vue") // 使用这种方式来实现路由懒加载 }2、关闭生产环境下的SourceMap映射文件我们关闭这个后，打包时将不会生成后缀名为.map的文件。
2021-06-06 18:57:23
95
原创 vant-ui 按需引入
1.安装vant-ui插件#先安装vant-uicnpm install vant-ui --save # 再安装按需引入的插件cnpm i babel-plugin-import -D// babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式通过 npm 安装npm i vant -S通过 yarn 安装yarn add vant//这种导入方式直接在 main.js 文件下引入 以下两个文件就可以了
2021-06-03 20:57:25
281
原创 Vue axios接口封装和api管理
axios拦截为什么要进行接口封装？axios的封装和api接口的统一管理，其实主要目的就是在帮助我们简化代码和利于后期的更新维护。每个组件中走一遍axios流程，很多时候在前端需要设置header，保存token，对异常进行统一处理等，所以最好对其进行封装。使用步骤安装npm install axios --save-dev引入一般我会在项目的src目录中，新建一个request文件夹，然后在里面新建一个http.js和一个api.js文件。http.js文件用来封装我们的axio
2021-06-03 19:50:33
143
原创 去哪儿项目开发过程
1. 确定项目技术栈vue2.0vue-cli3/4vue-routeraxiosvuexvantremsasswebpac2. 搭建项目yarn，npm(cnpm) 包管理工具yarn add axios -Scnpm install axios -S-S: --save-dev 生产环境的依赖 （dependencies）-D: --dev 开发环境的依赖 （devDependencies）2.1从0开始搭建搭建vue create projectname.
2021-06-02 10:09:38
86
原创 多环境变量配置
多环境变量配置package.json 里的 scripts 配置 serve test build，通过 –mode xxx 来执行不同环境通过 npm run serve 启动本地 , 执行 development通过 npm run test 打包测试 , 执行 testing通过 npm run build 打包正式 , 执行 production在package.json 文件夹中 找到scripts 位置 进行配置 "scripts": { "serve
2021-06-02 07:44:59
171
原创 transition
一、transitiontransition ：过渡属性的简写 用于设置4个过渡属性transition-propertytransition-durationtransition-timing-functiontransition-delaytransition-property 规定设置过渡效果的 CSS 属性的名称。transition-duration 规定完成过渡效果需要多少秒或毫秒。transition-timing-function 规定速度效果的速度曲线。transi
2021-06-01 20:50:38
426
原创 keep-alive
概念keep-alive是Vue的内置组件，当他包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和transition相似，keep-alive是一个抽象组件：它自身不会渲染成一个DOM元素，也不会出现在父组件链中。作用在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性参数：include 只有名称匹配的会缓存exclude 任何名称匹配的组件都不会被缓存<template> <div id="app">
2021-06-01 20:35:56
121
原创 前端JavaScript-day06 DOM
JavaScript DOM操作理解DOM的概念和DOM树DOM 节点DOM 写入和查找DOM 操作DOM的概念DOM（Document Object Model ，文档对象模型）一种独立于语言，用于操作xml，html文档的应用编程接口。当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。通过可编程的对象模型，JavaScript ...
2021-06-01 08:08:51
261
原创 前端JavaScript-day05 数组
JavaSrprit的数组1.数组定义，数组的创建数组的概念所谓数组，就是将多个元素（通常是同一类型）按一定顺序排列放到一个集合中，那么这个集合 我们就称之为数组。数组的定义数组是一个有序的列表，可以在数组中存放任意的数据，并且数组的长度可以动态的调整。数组的创建1.通过数组字面量创建数组// 创建一个空数组 var arr1 = []; // 创建一个包含3个数值的数组，...
2021-06-01 08:08:44
214
原创 前端JavaScript-day04 函数
1.函数的概念和作思考：如果要在多个地方求1-100之间所有数的和，应该怎么做？ 什么是函数什么是函数函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。函数可以封装一段JavaScript 代码，它只定义一次，但可以被执行或调用任意多次函数的作用有哪些？使程序变得简洁清晰易于代码维护提高了代码的复用性，提高程序开发的效率（就是封装一段代码，将来可以重复使用2.函数...
2021-06-01 08:08:37
134
原创 前端JavaScript-day03 分支语句
1. 语句概念什么是表达式？一个表达式可以产生一个值，有可能是运算、函数调用、有可能是字面量。表达式可以放在任何需要值的地 方。什么是语句？语句可以理解为一个行为，循环语句和判断语句就是典型的语句。一个程序有很多个语句组成，一般情况下; 分割一个一个的语句声明语句 var和function都是声明语句，它们声明或定义变量或函数。这些语句定义标识符并给其赋值，这 些标识符可以在程序中...
2021-06-01 08:08:31
156
原创 前端JavaScript-day02 运算符
算术运算符 + - * / % ++ (自身加1) – (自身减一)console.log(10+20)console.log(10-20)console.log(10*20)console.log(10/20)console.log(10%20)var a=1;console.log(a++); //1 2console.log(a); 2// a++和++a...
2021-06-01 08:08:25
174
原创 前端JavaScript-day02 数据类型转换
1. 数据类型转换Number 数字类型String 字符串类型Boolean 布尔类型undefined 未定义类型null 空类型其他类型转为 NumberNumber（）String纯数字 23 23数字开头10px NaN其他类型的字符串张S NaNBooleantrue 1false 0...
2021-06-01 08:08:20
368
原创 前端JavaScript-day01
JavaScript历史回顾1990年，欧洲的伯纳斯·李 发明了浏览器，不可以浏览图片。1992年，NCSA开始开发一个独立的浏览器，叫做Mosaic，可以浏览图片。1994年12月，navigator发布了1.0版1995年5月，Brendan Eich只用了10天，就设计完成了这种语言的第一版。最初名字叫做 Mocha，1995年9月改为LiveScript。12月改名叫做Java...
2021-06-01 08:08:09
431
1
原创 var、let、const
var、let、const共同点：都可以声明一个变量。不同点：var存在变量提升，在全局任何地方都可以访问到。let不存在变量提升，遇到{}是一个作用域。被称为块级作用域const定义的常量，一旦定义，不可改变其值。不存在变量提升遇到{}也是一个作用域。...
2021-06-01 07:33:22
69
原创 前端面试题：闭包
一、什么是闭包：①要理解闭包，首先理解javascript特殊的变量作用域，变量的作用于无非就是两种：全局变量，局部变量。②javascript语言的特殊处就是函数内部可以读取外部作用域中的变量。③我们有时候需要得到函数内的局部变量，但是在正常情况下，这是不能读取到的，这时候就需要用到闭包。在javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成“定义在一个函数内部的函数”。闭包是指有权访问另一个函数作用域中的变量的函数。其本质是函数的作用域链中保存着外部函数变量
2021-05-30 18:43:18
783
原创 JS事件委托
经典面试题一张图看懂事件委托概念事件委托，又名事件代理。事件委托就是利用事件冒泡，就是把子元素的事件都绑定到父元素上。如果子元素阻止了事件冒泡，那么委托也就没法实现了。好处:提高性能，减少了事件绑定，从而减少内存占用怎么使用事件委托我们事件委托一般都是使用在列表里面的。这里就拿列表举例：我们在每一个循环的标签身上动态绑定一个自定义属性。给统一的父元素绑定事件。在事件中可以通过事件对象来获取自定义属性的值代码<template> <div class="ho
2021-05-30 18:36:31
87
原创 作用域、作用域链、自由变量、变量提升
作用域（定义）变量作用域：就是一个变量可以使用的范围。作用域 （种类）js中首先有一个最外层的作用域，全局作用域；js中可以通过函数来创建一个独立作用域称为函数作用域，函数可以嵌套，所以作用域也可以嵌套；es6中新增了块级作用域（大括号，比如：if{},for(){},while(){}…）；如下图所示：es6作用域,只适用于const,let自由变量自由变量的概念： 当前作用域没有定义的变量作用域链自由变量的向上级作用域一层一层查找，直到找到为止，最高找到全局
2021-05-27 19:41:44
81
原创 this指向和改变this指向
call、apply、bind三者的用法和区别1.callcall、apply、bind都是改变this指向的方法
2021-05-26 20:40:49
152
1
原创 javascript原型与原型链
一、原型每个函数都有一个prototype属性，被称为显示原型①所有引用类型都有一个__proto__(隐式原型)属性，属性值是一个普通的对象②所有函数都有一个prototype(原型)属性，属性值是一个普通的对象③所有引用类型的__proto__属性指向它构造函数的prototype...
2021-05-26 19:13:46
65
1
原创 什么是arguments
什么是arguments形参：函数定义的参数实参：函数调用时实际传递的参数。参数匹配是从左向右进行匹配。如果实参个数少于形参，后面的参数对应赋值undefined。实参的个数如果多于形参的个数，可以通过arguments访问。【案例】模拟封装Math的max方法。函数对象的length属性就是函数形参的个数。如果参数多于4个，那么开发人员很难记忆，最好将参数封装成对象来接受，对象的属性是无序的，可以方便开发人员使用。函数参数的值传递和引用传递引用传递的参数，是传递引用对象的地址。函数内部
2021-05-25 20:10:57
4019
1
原创 js数据类型判断
四种方法typeof、instanceof、constructor、Object.prototype.toString.call()、jquery.type()1 .typeofconsole.log( typeof 100, //"number" typeof 'abc', //"string" typeof false, //"boolean" typeof undefined, //"undefined" typeof null, //"object"
2021-05-24 20:46:49
115
1
原创 js的数据类型、堆栈存储、多数据类型计算
js数据类型有哪些基本数据类型（基本数据类型，又称值类型。） ：Number、String、Boolean、Undefined、Null、Symbol（es6新增独一无二的值） 和 BigInt（es10新增）；引用数据类型Object ：包含Object、Array、 function、Date、RegExp。栈堆存储值类型栈存储： 主要针对（Number、String、Boolean）三种数据。直接存储在栈（stack）中，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储。例如：当
2021-05-24 20:37:53
81
原创 -深拷贝-
在学习深拷贝之前，我们要先搞明白什么是深拷贝？1.深拷贝： 创建一个新的对象和数组，将原对象的各项属性的“值”（数组的所有元素）拷贝过来，是“值”而不是“引用”为什么要使用深拷贝？我们希望在改变新的数组（对象）的时候，不改变原数组（对象）在JS中，数据类型分为基本数据类型和引用数据类型两种，对于基本数据类型来说，它的值直接存储在栈内存中，而对于引用类型来说，它在栈内存中仅仅存储了一个引用，而真正的数据存储在堆内存中。1、当我们对数据进行操作的时候，会发生两种情况基本数据类型var a = 3;
2021-05-23 20:07:45
134
原创 vue-router
一.什么是vue-router？路由是指单页应用的路径管理器，使得我们构建单页面应用变得更加容易。Vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并且将路径和组件按映射起来，传统的界面跳转是通过a标签来进行跳转界面的，在我们使用vue-router管理单页面应用的时候，切换界面的时，则是路径之间的切换，此时也可以说为组件之间的切换。也就是说，路由模块的本质，就是建立起url和界面之间的映射联系。但在我们上边说到了传统的跳转界面方式是用a标签来进行跳转界面的，那么当我们使用vue的时候还要用a标
2021-05-23 19:55:45
177
原创 Vuex
1. vuex简介vuex是专门用来管理vue.js应用程序中状态的一个插件。他的作用是将应用中的所有状态都放在一起，集中式来管理。需要声明的是，这里所说的状态指的是vue组件中data里面的属性。了解vue的同学应该是明白data是怎么回事的吧，如果不懂的话，建议先学完vue的基础知识再看vuex。2. vuex的组成结构示意图vuex的特点是把数据单独隔离，形成一棵树状图。单独隔离就意味着它有自己的生态系统。输入和输出，其中action作为数据的输入，state作为数据的输出。如下图：vuex
2021-05-23 19:20:44
110
原创 vue生命周期
随着对 vue 的不断了解，会越来越发现它生命周期的重要性，只有了解了它的生命周期，才能在开发项目的时候在逻辑上的很好的判断什么时候该发生什么事件，即很好的控制页面。一、什么是 vue 生命周期Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。下面是官网中的生命周期照片二、生命周期函数Vue 的生命周期总共分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前/后。1、befor
2021-05-20 21:06:43
317
原创 Vue中的组件通信
一、组件通信可分为父传子、子传父、兄弟组件之间的通信1. 父传子在父组件中给子组件标签上绑定一个属性， 属性上挂载需要传递的值在子组件通过props:[“自定义属性名”]来接收数据父组件给子组件传值，可以在父组件的子标签中添加自定义属性名 绑定需要传递的参数，最后在子组件中通过props来接收这个参数props的用法有三种//第一种props:['call']//第二种props:{ call:String //可以指定类型，如数组、字符串···}//第三种props:{
2021-05-19 21:16:35
80
原创 Uniapp request封装
第一步1.在根目录下创建request文件夹这里我用的是http文件 在里面创建request.js文件2.进入到request.js文件 在里面进行封装请求接口module.exports={ request(url,method,data){ return new Promise((resolve,reject)=>{ uni.request({ //请求的地址 url:'http://api.intewl.cn/api'+url, metho
2021-05-19 21:10:18
508
原创 微信小程序优购商城项目
这篇文章主要就是把我写的优购商城进行简单的说明，希望可以对大家有所帮助1.先配置页面在app.json中设置所需要的页面路径2.然后再封装我们需要的组件和wx.requestwx.request可以不封装，但是封装可以减少重复代码，写起来也比较方便axios就是我封装的http文件，名字叫什么都可以2-1 api.js代码代码是导出需要的接口路径，module.exports={ "swiber":"/home/swiperdata",}2-2 request.js代码封装
2021-05-17 21:25:40
1155
原创 6.小程序支付流程
小程序支付流程①首先判断用户有没登录，②判断本地有没有token，如果本地没有token，就先让用户登录。如果本地有token就执行async add() { try { // 1 判断缓存中有没有token const token = wx.getStorageSync("token"); // 2 判断 if (!token) { wx.navigateTo({ url: '/pages/auth/au
2021-05-16 21:52:14
72
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人