- 博客(35)
- 收藏
- 关注
RSS订阅原创 vue虚拟dom，diff算法
虚拟dom是根据模板生成一个js对象（使用createElement方法），根据这个js对象再去生成真实的dom，对复杂的文档DOM结构，提供一种方便的工具，进行最小化的DOM操作 diff算法当data发生改变 会根据新的数据生成一个新的虚拟dom ，新的虚拟dom和旧的虚拟dom进行对比，这个对比的过程就是diff算法，会找到不同地方，只去渲染不同的地方...
2021-06-21 07:54:05
116
原创 vue双向数据绑定
是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图,实现数据和视图同步。第一步：需要observer的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter，这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化 第二步：compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指..
2021-06-17 08:20:57
176
原创 ifram 优点、缺点
iframe作为HTML标签使用，iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。简单来说，iframe能够将网页插入到另一个网页中现在已逐步被ajax所代替使用：iframe的优点：1.iframe能够原封不动的把嵌入的网页展现出来。2.如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。3.网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可
2021-06-16 07:51:38
186
原创 项目中如何修改element-ui的默认样式 （去除scoped,样式穿透 ＞＞＞ , less/sass : /deep/）
当我们在vue中引入第三方组件库的时候，vue组件中样式的scoped会阻碍样式的修改，有以下三种方法修改样式，且不影响全局样式：①在样式外新增一个样式不添加scoped<style> .my{ margin: 20px; } .my .el-input__inner{ border-radius: 15px;/* 这个样式起效果 */ }</style><style scoped> .my .el-input__inner{ bor
2021-06-11 08:26:56
292
原创 elemeng-ui中表单如何校验
首先下载与引入element-ui：下载：npm i element-ui -S引入：在main.js中引入（有全局引入和按需引入，详情参考官方网站）规则校验：ElementUI封装了组件el-form来收集、校验和提交数据，其中的rules属性就是用来做数据校验的。ElementUI提供了一些常用的表单验证规则，我们可以直接使用该规则来实现数据校验。rules根据rules给出的规则会对prop中的值进行校验，当不满足要求时会弹出message相应的提示信息。代码示例：
2021-06-10 21:59:27
125
原创 Windows下安装Nginx
npm run build dis文件夹Nginx (engine x) 是一个高性能的HTTP和反向代理服务器，也是一个IMAP/POP3/SMTP服务器。Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru 站 点（俄文：Рамблер）开发的。它也是一种轻量级的Web服务器，可以作为独立的服务器部署网站（类似Tomcat）。它高性能和低消耗内存的结构受到很多大公司青睐，如淘宝网站架设一、安装Nginx...
2021-06-09 08:28:10
83
原创 vue-router 守卫 鉴权
路由守卫使用的方式有3种 ：全局的 、单个路由独享的、 组件级的一、vue-router全局有三个守卫：router.beforeEach 全局前置守卫 进入路由之前 router.beforeResolve 全局解析守卫(2.5.0+) 在beforeRouteEnter调用之后调用 router.afterEach 全局后置钩子 进入路由之后二、组件内的守卫：beforeRouteEnter beforeRouteUpdata(2.2新增) beforeRouteLeave三、单
2021-06-07 08:27:41
177
原创 vant-ui 按需引入
vant-ui有全局引入和按需引入，推荐自动按需引入组件，这样有利于项目打包优化，减少项目体积第一步安装vantnpm i vant -S（vue2.x的下载方式）npm i vant@next -S （vue3.x的下载方式)安装babel-plugin-import 插件npm i babel-plugin-import -D （babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式）...
2021-06-07 07:51:18
258
原创 去哪项目开发流程(简述)
一、1、该项目是对移动端去哪儿网的仿写，实现了从首页、城市选择、详情页面，是一个前后端分离的开源目，实现了前端内容的编写。 2、主要技术栈：vue2.0 + vue-cli3/4 + vue-router + axios + vuex + vant + rem + sass + webpack二、项目搭建yarn，npm(cnpm) 包管理工具yarn add axios -Scnpm install axios -S-S: --save-dev 生产环境的依赖 （depen...
2021-06-02 22:01:23
208
原创 多环境变量配置
在实际的开发中，经常会有多个环境用来测试，打包，发布等，需要手动更改一些参数来保证环境的正确，在发布生产版本的时候很容易造成因为参数错误造成打包错误出现生产问题，本文介绍一种简单的配置方式，用来切换多个环境，防止手动更改多个环境变量引发的问题。1、package.json 里的 scripts 配置 serve、stage、build，通过 --mode xxx 来执行不同环境通过 npm run serve 启动本地 , 执行 development通过 npm run stage 打包测试 ,
2021-06-02 21:26:34
211
原创 Vue：transition过渡
transition 属性是一个简写属性，用于设置四个过渡属性：transition-property transition-duration transition-timing-function transition-delay注释：请始终设置transition-duration属性，否则时长为 0，就不会产生过渡效果。默认值： all 0 ease 0 继承性： no 版本： CSS3 JavaScript 语法： object.style.tr..
2021-06-01 20:59:16
937
原创 keep-alive
keep-alive概念：keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。在组件切换过程中 把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性被包含在 keep-alive 中创建的组件，会多出两个生命周期的钩子: activated（组件激活时使用） 与 deactivated（组价离开时调用）...
2021-06-01 20:40:21
101
原创 作用域、作用域链、变量提升
1、作用域 作用域就是一个变量和函数可以使用的范围，主要分为全局作用域和局部（函数）作用域 全局作用域就是Js中最外层的作用域。2、全局变量、局部变量： 1）.全局变量： 在全局范围内声明的变量，如var a=1; 只有赋值没有声明的值，如a=2; （注：如果a=2在函数环境中，也是全局变量） 2）局部变量： 写入函数中的变量，叫做局部变量。 3）作用： 程序的安全。 内存的释放。3、自由变量：...
2021-05-27 21:52:20
237
原创 new的过程
function Foo(name,age){ this.name=name; this.age=age;}Foo.prototype.fn=function(){ console.log(this.name)}let a=new Foo('张三',20);console.log(a); //Foo {name:'张三';age:20}//new Foo (){ //第一步：创建对象 var obj={}; //第二步：原型赋值 obj.__proto__=Fo...
2021-05-27 21:22:18
61
原创 this指向与call/apply/bind
在js中this不是固定不变的，它会随着执行环境的改变而改变。this取什么值，是在执行时确认的，定义时无法确认。this的调用大概分为五种场景：1.浏览器里，在全局范围内的this 指向window对象；...
2021-05-27 19:43:22
139
原创 原型和原型链
1、prototype：在JavaScript中，每个函数都有一个prototype属性，这个属性指向函数的原型对象，被称之为显示原型。2、_ _proto_ _每个实例对象都会有_ _proto_ _属性,其被称为隐式原型,指向自身构造函数的显式原型prototype，prototype 和__proto__是等价的。3、constructor每个prototype原型都有一个constructor属性，指向它关联的构造函数。(指向我们的prototype属性)4、原型
2021-05-27 07:58:48
64
原创 argument
argument是一个伪数组伪数组:就是长得跟数组差不多，有索引有长度，但是不能使用数组的操作方法例： var 伪数组 = { 0:"admin", 1:18, length:2 }; console.log(伪数组[0]); console.log(伪数组.length); console.log(typeof 伪数组); for(var i=0;i<伪数组.length;i++){ console.log
2021-05-26 08:31:11
98
原创 数组常用的方法(es4/es5/es6)
1、unshift()：头部添加，可以添加多个，返回添加后数组的长度let arr = [1,2,3];let arr1 = arr.shift();console.log(arr); // [2,3]console.log(arr1);// 12、shift()：头部删除，只能删除一个，返回删除后的数据 let arr = [1,2,3]; let arr1 = arr.unshift(4,5); console.log(arr); // [4,5
2021-05-26 08:15:50
154
原创 数据类型判断
数据类型判断大概有四种：typeof、instanceof、constructor、Object.prototype.toString.call()1.Typeof:基本数据类型中：Number，String，Boolean，undefined 以及引用数据类型中Function ,可以使用typeof检测数据类型,分别返回对应的数据类型小写字符。另：用typeof检测构造函数创建的Number，String，Boolean都返回object基本数据类型中：null 引用数据类型中的..
2021-05-25 08:15:03
166
原创 js数据类型
数据类型：分为简单数据类型和复杂数据类型 1).基本数据类型又叫简单数据类型: number string Boolean null undefined symble 简单数据类型存在栈里（从上往下） 2).复杂数据类型又叫引用数据类型 object array data function regexp （正则）瑞杰可四 复杂数据类型存在堆里 但是在栈里有一个地址指向真正的堆内存（从下往上）...
2021-05-25 08:00:30
60
原创 深拷贝、浅拷贝
1. 深复制和浅复制概念数据类型分为简单数据类型和复杂数据类型两种， 深复制复制的是真正的值 简单数据类型都是深复制 浅复制复制的是地址 复杂数据类型普通的复制都是浅复制2.如何实现数组的深拷贝（3种方法）数组是一个引用数据类型 普通的复制只能实现浅拷贝 （1）使用concat合并数组，会返回一个新的数组 对象是一个引用数据类型 普通的复制是一个浅拷贝 *对象的深拷贝方法 1.(转换)let obj2 = JSON.parse(JSON.string...
2021-05-24 07:56:11
94
原创 vue-router
1、路由原理路由就是用来解析URL实现不同页面之间的跳转2、两种模式（1）hash模式：符号“#”，以及#后面的字符称之为hash，用window.location.hash读取； 特点： hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用， hash不会重加载页面。 hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 http://www.xxx.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。（2）h.
2021-05-23 22:00:31
122
原创 vue组件生命周期函数
总共分为8个阶段。创建前/后，载入前/后，更新前/后，销毁前/后（共11个）创建前/后： 在beforeCreated阶段，vue实例的挂载元素$el和数据对象 data 都为undefined，还未初始化。在 created阶段，vue实例的数据对象data有了，$el还没有。载入前/后： 在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲
2021-05-21 08:11:29
536
原创 vue路由的钩子函数
有三种类型，共6个一、全局的守卫（全局的守卫代表所有的页面）守卫所有的页面，写在router/index.js文件中1、router.beforeEach在所有页面跳转之前自动执行，守卫所有的页面，必须执行next()才能正常往后进行例：router.beforeEach((to,from,next)=>{})to:代表到哪个页面去，from：代表从哪个页面来2、router.afterEach全局的守卫，在页面跳转成功后自动执行例：router.afterEach
2021-05-21 08:01:42
171
原创 组件通讯
1.父传子：在父组件中给子组件标签上绑定一个属性， 属性上挂载需要传递的值在子组件通过props:[“自定义属性名”]来接收数据2.子传父：在父组件中给子组件标签绑定一个自定义事件，给这个事件挂载需要调用的方法在子组件的方法通过this.$emit(‘自定义事件名’)来调用这个方法3.兄弟组件传值：通过main.js初始化一个全局的$bus,在发送事件的一方通过$bus.$emit(“事件名”，传递的参数信息)发送，在接收事件的一方通过$bus.$on("事件名",参数)接收传递的事件.
2021-05-20 07:48:09
46
原创 优购项目
先创建整体页面"pages":[ "pages/index/index", "pages/category/index", "pages/goods_list/index", "pages/goods_detail/index", "pages/cart/index", "pages/collect/index", "pages/order/index", "pages/search/index", "pages/user/ind
2021-05-18 08:11:17
76
原创 2002/6画板小程序发布流程
2002画板发布流程一、前提1、首先要导入项目2、打开微信公众平台（百度）扫描登陆3、配置服务器域名 配置：uploadFile合法域名https://images.ac.cn;二、发布流程1、在代码编写完毕后，在他顶部的导航条上找到【上传】点击【确定】2、输入版本号，项目备注,点击【上传】3、上传成后的提示开发代码这块就完工了，剩下的就是去微信小程序平台发布三、提交审核1、进入微信小程序平台的官网:https://mp.weixin.qq.com
2021-05-17 11:49:46
79
原创 小程序支付流程
小程序支付流程？①首先判断用户有没登录，②判断本地有没有token，如果本地没有token，就先让用户登录。如果本地有token就执行async add() { try { // 1 判断缓存中有没有token const token = wx.getStorageSync("token"); // 2 判断 if (!token) { wx.navigateTo({ url: '/pages/...
2021-05-17 01:33:45
50
原创 小程序授权登录
小程序授权登录？先建一个demo文件，在demo.wxml写<!-- 需要使用 button 来授权登录 --><button wx:if="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">授权登录</button><view wx:else>请升级微信版本</view>在demo.js中写Page({ data: { c...
2021-05-17 01:32:49
238
原创 小程序获取收货地址流程
小程序如何获取收货地址的流程？首先注册点击事件，用微信小程序自带的APIwx.chooseAddress( )获取用户收货地址。调起用户编辑收货地址原生界面，并在编辑完成后返回用户选择的地址，它会返回一个成功的回调函数getAddress() {// 获取用户收货地址。调起用户编辑收货地址原生界面，并在编辑完成后返回用户选择的地址。wx.chooseAddress({success: (res) => {let address = ...
2021-05-17 01:31:52
363
原创 小程序中这怎么写收藏、分享、客服功能
小程序中这怎么写收藏、分享、客服功能？一、收藏：①先进入详情页，需要获取本地存储收藏的数据，②之后拿这个数据和当前获取到详情页的id进行对比，如果有相同的id，就把一个变量变为true，再把收藏的图片的类名根据这个变量的true或false来改变。在。wxml中写<text class="iconfont {{flag?'icon-Collection cor':'icon-shoucang1'}} "></text>// 使用三元运算符...
2021-05-17 01:31:03
82
原创 数组方法
数组方法：①some():检测数组中元素是否满足指定条件，会依次执行数组的每个元素。若有一个元素满足条件，表达式将返回true,剩余的元素不会再执行检测，若没有满足条件的元素，就返回false。some()不会检测空数组以及不会改变原始数组。②every():检测数组所有元素是否都符合指定条件，使用指定函数检测数组中的所有元素。若数组中检测出有一个元素不满足，整个表达式返回false,剩下元素不再进行检测，若元素都满足条件，就返回true。every()不会检测空数组，也不会改变原始数组。③fi
2021-05-17 01:29:42
55
原创 小程序下拉刷新，上拉加载
小程序下拉刷新，上拉加载更多？上拉加载：①首先，固定一个包含列表数据的view高度，让它里面列表的数据溢出可以滚动：<scroll-view scroll-y lower-threshold="100" bindscrolltolower="scrollToLower" style="height: 100vh;"> <view wx:for="{{listData}}" wx:key="{{index}}" style="height: 40px;line-heig...
2021-05-17 01:28:24
84
原创 如何使用Promise封装wx.request()
如何使用Promise封装wx.request()？①首先，在根目录下创建一个http文件夹,在这个文件夹中创建api.js、fetch.js、http.js文件；在根目录下创建一个env文件夹，在这个文件夹中建一个index.js文件写配置和导出多个开发环境；module.exports={ //开发环境 Dev:{ "BaseUrl":"https://www.develep.com" }, //测试环境 Test:{ "Bas...
2021-05-17 01:27:20
100
原创 Promise、async await、Generator
Promise什么是Promise：promise是es6 中专门用来处理异步回调的，可以解决回调地狱(一个函数内嵌套很多回调函数)Promise是一个构造函数 ，这个构造函数中放一个回调函数作为参数，这个回调函数中放的是异步的操作 。自己身上有all、reject、resolve等方法，原型上有then、catch等方法。说白了 promise就是把原来的回调函数嵌套在里面的写法变成了链式写法（.then的写法）promise三种状态：Promise对象的状态不受外界影响1
2021-05-07 21:25:11
171
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人