- 博客(42)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 vue中如何自定义指令directive
自定义指令的理解.我们看到的v-开头的行内属性，都是指令，不同的指令可以完成或实现不同的功能，对普通 DOM元素进行底层操作，这时候就会用到自定义指令。除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令如何自定义指令注册一个自定义指令有全局注册与局部注册全局注册注册主要是用过Vue.directive方法进行注册Vue.directive第一个参数是指令的名字（不需要写上v-前缀），第二个参数可以是对象数据，也可以是一个指令函数// 注册一个全局自定义
2021-06-28 09:14:44
196
原创 vm.$nextTick 是干什么用的？为什么用？
简单粗暴的回答this.$nextTick是一个回调函数，这个回调函数会在下次 DOM 更新结束之后执行。Vue的数据更新是采用延迟异步更新的，就是说当我们修改了数据之后，页面并不会马上就更新,如果这个时候我们通过DOM操作来获取数据的话，获取的还是之前的旧的数据，这个时候我们就可以使用$nextTick方法，因为这个方法知道什么时候DOM更新完成。使用场景Vue的生命周期函数created()执行的时候DOM 其实并未进行任何渲染,这个时候我们可以要进行DOM操作的代码放到Vue.nextTic
2021-06-21 18:54:14
1452
原创 vue中data为什么是一个函数
vue中的data是一个对象类型，对象类型的数据是按引用传值的，这就会导致所有组件的实例都共享同一份数据，这是不对的，我们要的是每个组件实例都是独立的为了解决对象类型数据共享的问题，我们需要将 data 定义成一个函数，每个实例需要通过调用函数生成一个独立的数据对象总结根实例对象data可以是对象也可以是函数（根实例是单例），不会产生数据污染情况组件实例对象data必须为函数，目的是为了防止多个组件实例对象之间共用一个data，产生数据污染。采用函数的形式，initData时会将其作为工厂函数都会返
2021-06-21 14:40:56
1393
原创 函数防抖和函数节流
使用节流防抖函数(性能优化)那么在 vue 中怎么使用呢：在公共方法中（如 untils.js 中），加入函数防抖和节流方法// 防抖export function _debounce(fn, delay) { var delay = delay || 200; var timer; return function () { var th = this; var args = arguments; if (timer) {
2021-06-18 07:50:38
190
原创 双向数据绑定原理
vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。具体步骤：第一步： 需要observer的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化第二步： compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并.
2021-06-16 19:34:13
236
原创 iframe优缺点
iframe的优点：iframe能够原封不动的把嵌入的网页展现出来。如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。iframe的缺点：会产生很多页面，不容易管理。iframe框架结构有时会让人感到迷惑，如果框架个数多
2021-06-14 18:45:29
139
原创 项目中如何修改element-ui的默认样式
项目中如何修改element-ui的默认样式？原因是因为我们在使用vue编写css样式时,会在style添加scoped属性添加了scoped的组件无法修改的样式，去掉scoped就可以了。vue中的scoped属性的效果主要通过PostCSS转译实现，那么有没有办法在不改变原来写好的css样式的情况，修改默认的element-ui样式呢？解决方法在样式外新增一个样式不添加scoped<style> .my{ margin: 20px; } .my .
2021-06-10 19:21:52
389
原创 Vue之ElementUI Form表单校验
表单校验是前端开发过程中最常用到的功能之一，根据个人的工作经验总结在此对表单校验功能的基础用法进行整理说明首先对el-form标签中的几个关键属性进行说明，ref: 当前表单的唯一标识model: 表单绑定的对象rules: 字段校验规则而最关键的一点是el-form-item标签中的prop属性，属性值必须与绑定的字段名称保持一致。rules字段用来定义各个字段具体的校验规则，用法请查阅开篇的demo示例，其中required标识字段是否必填，message为校验提.
2021-06-07 20:08:25
3816
原创 Nginx的安装以及访问
参考文章: https://www.runoob.com/w3cnote/nginx-setup-intro.html.序言Nginx是lgor Sysoev为俄罗斯访问量第二的rambler.ru站点设计开发的。从2004年发布至今，凭借开源的力量，已经接近成熟与完善。Nginx功能丰富，可作为HTTP服务器，也可作为反向代理服务器，邮件服务器。支持FastCGI、SSL、Virtual Host、URL Rewrite、Gzip等功能。并且支持很多第三方的模块扩展。Nginx的稳定性
2021-06-07 11:30:28
2262
原创 webpack打包优化
webpack打包原理把所有依赖打包成一个 bundle.js 文件，通过代码分割成单元片段并按需加载。webpack的优势(1) webpack 是以 commonJS 的形式来书写脚本滴，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。(2)能被模块化的不仅仅是 JS 了。(3) 开发便捷，能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等。(4)扩展性强，插件机制完善webpack优化方法：1.移除插件某些包，减少插件体积比如说通用
2021-06-04 16:00:08
2110
原创 使用keep-alive缓存项目
缓存整个项目在 App.vue 里面如果需要缓存整个项目，则如下设置(直接包裹根router-view即可)：<template> <div id="app"> <keep-alive> <router-view/> </keep-alive> </div></template>使用keepAlive后生命周期发生了哪些变化<script>export defa
2021-06-03 16:54:03
140
原创 vant-ui的按需引用
首先安装vant-ui插件如果你想按需引入一定要安装按需加载的配置#先安装vant-uicnpm install vant-ui --save # 再安装按需引入的插件cnpm i babel-plugin-import -Dbabel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式在babel.config.js中添加配置plugins: [ ['import', { libraryNa
2021-06-03 16:21:32
170
原创 axios拦截，api统一管理
简介axios的封装和api接口的统一管理，其实主要目的就是在帮助我们简化代码和利于后期的更新维护。在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。他有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。所以我们的尤大大也是果断放弃了对其官方库vue-resource的维护，直接推荐我们使用axios库axios封装步骤1.安装axios npm install axi
2021-06-03 15:17:29
132
原创 多环境变量配置
package.json 里的 scripts 配置 serve stage build，通过 --mode xxx 来执行不同环境通过 npm run serve 启动本地 , 执行 development通过 npm run stage 打包测试 , 执行 staging通过 npm run build 打包正式 , 执行 production"scripts": { "serve": "vue-cli-service serve --open", "stage": "vue-cli
2021-06-02 17:05:12
126
原创 去哪儿项目开发流程
1. 确定项目技术栈vue2.0 + vue-cli3/4 + vue-router + axios + vuex + vant + rem + sass + webpack2. 搭建项目yarn，npm(cnpm) 包管理工具yarn add axios -Scnpm install axios -S-S: --save-dev 生产环境的依赖 （dependencies）-D: --dev 开发环境的依赖 （devDependencies）2.1 从0搭建指令vue crea
2021-06-02 13:52:52
174
原创 css中过渡transition
定义过渡transition是一个复合属性，包括transition-property、transition-duration、transition-timing-function、transition-delay这四个子属性。通过这四个子属性的配合来完成一个完整的过渡效果transition-property: 过渡属性(默认值为all)transition-duration: 过渡持续时间(默认值为0s)transiton-timing-function: 过渡函数(默认值为ease函数)t
2021-06-01 19:43:56
439
原创 keep-alive缓存
概念keep-alive 是vue的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和transition相似，keep-alive 是一个抽象组件：它自身不会渲染成一个DOM元素，也不会出现在父组件链中作用在组件切换过程中把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验。原理在 created钩子函数调用时将需要缓存的 VNode 节点保存在 this.cache 中／在 render（页面渲染） 时，如果 VNode 的 name 符
2021-06-01 19:02:53
861
原创 js中的事件委托
一张图看懂事件委托概念事件委托，又名事件代理。事件委托就是利用事件冒泡，就是把子元素的事件都绑定到父元素上。如果子元素阻止了事件冒泡，那么委托也就没法实现了。为什么要用事件委托：一般来说，dom需要有事件处理程序，我们都会直接给它设事件处理程序就好了，那如果是很多的dom需要添加事件处理呢？比如我们有100个li，每个li都有相同的click点击事件，可能我们会用for循环的方法，来遍历所有的li，然后给它们添加事件，那这么做会存在什么影响呢？在JavaScript中，添加到页面上的
2021-05-28 20:51:57
102
原创 js中闭包知识点
如何产生闭包（closure）上传代码：// 函数作为返回值function create() { const a = 100 return function () { console.log(a) }}const fn = create()const a = 200fn() // 100// 函数作为参数被传递function print(fn) { const a = 200 fn()}const a = 100fu
2021-05-28 19:42:58
120
原创 js中let、const、var的区别
在ES5中，声明变量只有var和function两种形式。但是因为var声明的变量会有一定的缺点，ES6提出了使用let和cinst声明变量，弥补了ES5中var的缺点1.是否存在变量提升？var声明的变量存在变量提升(将变量提升到当前作用域的顶部)。即变量可以在声明之前调用，值为undefinedlet 和 const不存在变量提升。即它们所声明的变量一定要在声明后使用，否则报ReferenceError错console.log(f) //undefinedvar f = 1 ;
2021-05-28 18:55:57
95
原创 作用域、作用域链、自由变量、变量提升
作用域及作用域链何为作用域任何编程语言都有作用域的概念，简单来说，作用域就是变量与函数的可访问范围，即作用域控制着变量与函数的可见性和生命周期js的作用域是靠函数来形成的，也就是说一个函数的变量在函数外不可以访问。作用域种类js中首先有一个最外层的作用域，全局作用域；js中可以通过函数来创建一个独立作用域称为函数作用域，函数可以嵌套，所以作用域也可以嵌套；es6中新增了块级作用域（大括号，比如：if{},for(){},while(){}…）；全局作用域任何地方都能访问到的对象拥有
2021-05-27 20:23:23
93
原创 this指向问题、new的过程
this的指向： 谁调用就指向谁 事件监听函数内部，this指向绑定事件监听的那个元素节点 构造函数内部，this指向创建的新对象 对于箭头函数，由于没有自身变量，this指向环境中的this 一个函数没有前缀调用(被引用)，也就是普通调用，this指向全局变量。在严格模式下，this为undefine.实例代码// 全局下的this指向window console.log(this); // var a = 100; // window.a = 100; // this.a
2021-05-27 19:39:41
80
原创 js中this与call/apply/bind的关系
简单总结在浏览器里，在全局范围内this 指向window对象；在函数中，this永远指向最后调用他的那个对象；构造函数中，this指向new出来的那个新的对象；call、apply、bind中的this被强绑定在指定的那个对象上；箭头函数中this比较特殊,箭头函数this为父作用域的this，不是调用时的this.要知道前四种方式,都是调用时确定,也就是动态的,而箭头函数的this指向是静态的,声明的时候就确定了下来；apply、call、bind都是js给函数内置的一些API，调用他们可以
2021-05-26 20:47:25
82
原创 原型与原型链
javascript原型与原型链原型每个函数都有一个prototype属性，被称为显示原型 function fn() { } console.log(fn.prototype);每个实例对象都会有_ _proto_ _属性,其被称为隐式原型每一个实例对象的隐式原型_ _proto_ _属性指向自身构造函数的显式原型prototype每个prototype原型都有一个constructor属性，指向它关联的构造函数。原型链获取对象属性时，如果对象本
2021-05-26 18:54:38
75
原创 数组学习方法
ES3~ES7的数组方法学习参考文章：数组方法1、数组方法2JavaScript数组方法总结1.push()可以接受一个或者多个参数，将参数追加到数组的尾部，返回添加后的数组的长度，原数组会发生改变。2.pop()从数组尾部删除一个元素，返回这个被删除的元素，原数组发生改变。3.unshift()可以接受一个或者多个参数，将参数放到数组的头部，返回添加后的数组的长度，原数组会发生改变。4.shift()从数组头部删除一个元素，返回这个被删除的元素，原数组发生改变。5.s
2021-05-25 21:03:06
216
原创 js中的argument参数
参考文献：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/arguments1.简介在JavaScript中，arguments是对象的一个特殊属性。arguments对象就像数组，但是它却不是数组。 argument 对象包含了函数调用的参数数组，通过这种方式你可以很方便的找到最后一个参数的值 :arguments是收到的实参副本 在词法分析中, 首先按形参形成AO的属性,值为undefi
2021-05-25 20:31:28
888
原创 js数据类型判断
五种方法typeof、instanceof、constructor、Object.prototype.toString.call()、jquery.type()简单了解：typeof typeof对于基本数据类型判断是没有问题的，但是遇到引用数据类型（如：Array）是不起作用 instanceof 判断 new关键字创建的引用数据类型不考虑 null和 undefined（这两个比较特殊）以对象字面量创建的基本数据类型 constructor似乎完全可以应对基本数据类型和引用数...
2021-05-24 19:43:41
104
原创 js数据类型
js数据类型有哪些基本数据类型（值类型）：Number、String、Boolean、Undefined、Null、Symbol（es6新增独一无二的值）和BigInt（es10新增）； 引用数据类型:Object。包含Object、Array、 function、Date、RegExp。 备注：基本数据类型，又称值类型。1. 常见的值类型：2.常见的引用类型： 说明：因typeof 检测null返回object，故有些地方也成null为特殊引用类型。但我们最好...
2021-05-24 19:03:21
134
原创 深拷贝与浅拷贝
1. 什么是深拷贝深拷贝： 创建一个新的对象和数组，将原对象的各项属性的“值”（数组的所有元素）拷贝过来，是“值”而不是“引用”2.为什么要使用深拷贝？在改变新的数组（对象）的时候，不改变原数组（对象）3.理解值类型与引用类型值类型：number，string，boolean，undefined，null ，symbol（简单数据类型，每次赋值是）第1步a=100；第2步b=a;第2步a=200；引用类型：对象，函数（复杂数据类型，每次赋值是指向变量内存地址）..
2021-05-23 21:44:16
161
原创 vue-router知识点
1. 路由的概念 通过改变 URL，在不重新请求页面的情况下，更新页面视图。2. vue-router 两种路由模式 更新视图但不重新请求页面，是前端路由原理的核心之一，目前在浏览器环境中这一功能的实现 Hash — 默认值，利用 URL 中的hash("#") history-- 利用URL中的路径（/home）3. 如何设置路由模式const router=new VueRouter({ mode:'history', routes:[...]})...
2021-05-23 21:09:52
232
1
原创 vuex
1.什么是vuex？Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。Vuex背后的基本思想，就是前面所说的单向数据流它由五部分组成，分别是：state,actions,mutations,getters,modules2.vuex的五大核心：state: 所有的数据都存储在state中， state是一个对象 mutations: 唯一可以修改state数据的场所 actions:可以包含异步操作只能调用mutations的方法 getters: 类似于vue组...
2021-05-23 20:10:15
74
原创 vue生命周期钩子函数有哪些
每个vue实例从创建到销毁的过程就是vue的一个生命周期，每个阶段都有对应的钩子函数，当我们想在vue的不同时期操作vue实例是，就可以在不同的钩子函数中进行vue有8种生命周期函数：beforeCreate(实例创建前)官方解释：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。 说明：这个时候this还不能使用，data中的数据、methods中的方法，以及watcher中的事件都不能获得。created(实例创建后)
2021-05-20 21:31:56
1144
原创 不同组件之间是如何通信的
不同组件之间是如何通信的？请永远牢记vue是单向数据流①props / $emit父组件通过props的方式向子组件传递数据，而通过$emit子组件可以向父组件通信。1. 父组件向子组件传值：接下来我们通过一个例子，说明父组件如何向子组件传递值：在子组件 Users.vue 中如何获取父组件 App.vue 中的数据 users:["Henry","Bucky","Emily"]App.vue父组件<template> <div id="app">.
2021-05-19 21:04:31
241
原创 黑马优购项目讲解
文章目录项目搭建 初始化项目 首页 商品分类 商品列表 商品详情 购物车页面 订单支付 搜索 登录页面 意见反馈 收藏页面 授权页面 我的页面帮助⽂档 1. ⼩程序开发⽂档 3. 阿⾥巴巴字体 iconfont1.项目搭建1.1目录搭建1.2页面搭建2.初始化项目2.1后期可能会引用外部文件es6转es5语法 下载 facebook的regenerator库中的 regenerator/packages/reg...
2021-05-17 20:52:18
1153
原创 小程序发布流程
发布流程，大概分三个大步骤：上传代码 提交审核 发布版本发布之前需要配置服务器域名白名单1.上传代码在微信开发者工具中点击上传 上传代码 然后点击确定输入版本号以及项目备注 点击上传上传成功后的提示微信开发者工具中的操作到这里就已经完成了2.提交审核进入微信小程序的官网:https://mp.weixin.qq.com在小程序的版本管理中找到开发版本首次提交 会弹框提示填写小程序的基本资料填写信息添加开发者 点击编辑.
2021-05-17 11:32:06
185
原创 小程序授权登陆流程
微信小程序登录授权 我们在项目中，登录，授权页面，都必须要传递token值。 一般商品详情页面的商品收藏，加入购物车。购物车页面都需要传递token。微信官方文档授权登录流程图1.点击封装的登录按钮<button type="primary" plain bindtap="login"> 登录 </button>2.调用微信官方方法wx.getUserProfilePage({ login(){ wx.getUserPr...
2021-05-14 19:19:11
105
原创 小程序支付流程
1.业务逻辑： 获取微信收货地址 渲染购物车中要结算的的商品 实现支付获取微信的登录信息 获取自己后台 返回的支付相关参数 调用微信接口实现支付2.支付流程： 创建订单，获取订单号 order_number 准备预支付，获取支付参数pay 发起微信支付，提交pay参数 查询订单3.给支付按钮绑定点击事件<!-- 结算 --> <view class="order_pay_wr...
2021-05-14 19:01:27
161
原创 小程序获取收货地址流程
1.在小程序中，一般在支付订单时，会获取用户的收货地址，分为两种情况：一是用户第一次登录时需要获取收货地 二是用户已经登录过，所以只需要选择地址情况一：情况二：获取用户的收货地址的详细流程：1 写一个button按钮，绑定点击事件2调用小程序内置api获取用户的收货地址wx.chooseAddress 3获取用户对小程序所授予获取地址的权限状态scope (1)假设用户点击获取收货地址的提示框确定authSet...
2021-05-14 17:09:25
1839
原创 小程序如何写收藏、分享、客服功能
前言： 商品收藏 发送请求获取数据 页面onShow的时候加载缓存中的商品收藏的数据 判断当前商品是不是被收藏 是改变页面的图标 不是 则不改变 点击商品收藏按钮 判断该商品是否存在于缓存数组中 已经存在把该商品删除 没有存在把商品添加到收藏数组中存入到本地存储中即可代码如下：结构以及样式布局<view class="detail_swiper"> <swiper auto...
2021-05-13 21:49:56
212
原创 微信小程序下拉刷新&上拉加载
前言：下拉刷新和上拉加载是业务上一个很常见的需求，在微信小程序里，提供了下拉刷新的方法onPullDownRefresh() 上拉加载触底onReachBottom() 也可以scroll-view进行布局，这个就要个人喜好，比如滚动条滚动、触底、触顶着三个事件，中的三个属性scroll-top：设置滚动条的位置，scroll-y：是否允许竖向滑动，height:是组件的高度Bindscrolltolower是绑定触底触发的事件 Bindscroll 是滚动触发的时间 Bind...
2021-05-13 21:27:43
366
空空如也
上传文件使用FormData时，appent报错
2022-05-10
TA创建的收藏夹 TA关注的收藏夹
TA关注的人