coderyy1-优快云博客

原创 uni-app开发微信小程序初体验以及项目目录结构理解

一、uni-app是什么uni-app是一个基于Vue的全平台开发框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。uni-app官网二、uni-app初体验初始化一个uni-app的方法有两种，1.使用HBuilderX的图形界面2.使用vue-clivue create -p dcloudio/uni-preset-vue my-project需要先安装@vue/cli运行时的

2020-10-30 11:03:15 950

原创 Vue2升级到Vue3

最近想玩玩Vue3如题，Vue3已经是beta版了，想玩玩Vue3，就对原来Vue2的项目进行了升级。参考了慕课网Dell Lee的课程内容和Vue3官方文档。一、main.js中的变化从技术上讲，Vue 2 没有“app”的概念，我们定义的应用只是通过 new Vue() 创建的根 Vue 实例。从同一个 Vue 构造函数创建的每个根实例共享相同的全局配置，因此在测试期间，全局配置很容易意外地污染其他测试用例。——Vue3中文文档这其实主要是创建Vue实例时发生了变化。现在使用一个新的全局A

2020-10-29 21:38:48 10163

原创函数节流与函数防抖

函数防抖和函数节流在某些时候，某些事件会频繁的触发，影响性能，所以需要防抖操作来进行性能优化。比如用户在输入框中输入内容而输入框会给出相关内容，此时如果监听input的内容变化则会多次触发对应事件，而这些事件是我们不希望触发的。我们希望当input框的内容改变并且一定时间内不再改变时，才将相关内容渲染在页面上。此时就可以用到函数防抖和函数节流。一、函数防抖函数防抖重点在于有足够的时间间隔才触发某个回调。实现方法的核心在于延时器的注销和重新注册。函数防抖在事件被触发n秒后再执行回调，如果在这

2020-10-21 22:30:42 117

原创 Vue的响应式原理

Vue的响应式原理Tips：根据coderwhy老师的讲解写的通过数据劫持和发布者-订阅者模式来实现。一旦发现属性发生改变就通知订阅者，触发相应的回调，来改变视图。一、数据劫持(Observer)Observer实现对vue各个属性进行监听通过Object.defineProperty方法(定义属性)来劫持属性的getter和setter，监听属性的改变和获取依赖(谁在使用这个值)。Object.defineProperty方法有三个参数，第一个是对象，第二个是key，第三个是value。可以

2020-10-16 00:21:21 233

原创 windows下nginx的命令

任务管理器关闭Nginx进程第一次使用Nginx时一次性点击了很多次exe文件导致修改配置之后想要通过任务管理器关闭Nginx时找了很久。然后在网上找了一下nginx在windows下的常用命令。需要在Nginx的根目录下使用命令start nginx : 启动nginx服务nginx -s reload : 重启nginx服务nginx -s stop : 快速关闭(不保存相关信息)nginx -s quit : 正常关闭(保存相关信息)nginx -V : 查看版本号nginx -t :

2020-10-14 23:27:10 128

原创 Vue中的一些常用的优化插件

记录一些在Vue开发中常用的优化插件一、Better-Scroll一个非常好用的滚动插件，由于js原生滚动在移动端可能会出现难以滑动或者出现一卡一卡的感觉，所以会使用到一些滚动插件，Better-Scroll就是一个很好的选择。GitHub地址使用方法1.npm install better-scroll --save2.import 导入3.new 一个BScroll实例即可二、FastClick一个用来解决移动端点击延迟的插件。GitHub地址使用方法1.npm insta

2020-10-14 18:47:58 476

原创 vue-router中replace当前路由报错

问题在做vue项目时，发现replace到当前路由path时会报错，然后在百度上找了挺久，发现了一个可行的解决方法。解决方法在main.js中添加如下代码即可const originalPush = router.replace;router.replace = function replace(location) { return originalPush.call(this, location).catch(err => err)};...

2020-10-14 18:25:36 2216

原创 vue中Toast插件的封装

vue中插件的封装类似于Toast这种功能，最好是封装成一个插件再来使用，更加方便。那么如何在vue中封装插件呢首先要先将对应的组件封装好，有了.vue的组件文件后就可以开始将组件封装成插件了。一、在对应的插件目录下创建一个js文件，一般习惯命名为index.js二、编辑index.js//导入组件import Toast from './Toast'const obj = {}// install方法obj.install = function(Vue) { // 1.创

2020-10-14 18:21:26 489

原创发布订阅模式与观察者模式的学习

观察者模式（Observer Pattern）观察者模式定义了对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知，并自动更新。观察者模式属于行为型模式，行为型模式关注的是对象之间的通讯，观察者模式就是观察者和被观察者之间的通讯。当观察者(Observer)订阅(Subscribe)之后，一旦主题的内容发生更新，就会触发Fire Event中的事件自己写的简易版观察者模式// 定义主题Subscribe class Subject {

2020-10-13 10:13:05 102

原创 Vuex

Vuex——状态管理模式创建const store = new Vuex.Store({state: { }, mutations: { }, actions: { }, getters: { }, modules: { }})statestate用来存放状态，也就是变量。Vuex 使用单一状态树，每个应用只对应一个vuex对象。创建state: { cartL

2020-10-12 16:23:12 106

原创有关vue组件的强制刷新

问题在做vue小项目的分类页面时，发现在点击相应的类别后详情页面依旧为空，想到是由于数据的异步请求造成。所以想在每次异步请求完成后强制vue刷新一下对应的分类详情页面子组件。三种强制刷新组件的方法1.使用v-if销毁对应子组件再重新创建，该方法不推荐，需要使用watch监听数据的变更。2.使用this.$forceUpdate方法，这个方法可以使当前组件调用这个方法时，重新渲染组件。3.更改key的值可以使组件重新渲染，这是官方推荐的一种方法。解决使用的是第三种方法，也就是修改组件的key

2020-10-09 18:48:57 380

原创关于Better-Scroll的高度计算问题

问题出现在做vue的商城小项目的时候，为了解决原生滚动的问题而使用了Better-Scroll插件。但是使用时发现Better-Scroll的高度计算出了点问题，导致整个内容无法滚动。原因所有的图片都是异步加载的，所以当Better-Scroll计算内容高度时图片的加载可能还没有完成，导致高度计算错误，从而出现内容高度没问题但是却无法滚动的情况。解决方法尝试在创建Better-Scroll对象时使用nextTick()方法来解决该问题，但是没有效果，所以又尝试给了一个200ms延迟，解决了该问题，

2020-10-08 18:50:01 1553

原创学习记录——axios的拦截器

axios的拦截器axios的拦截器有2种，请求拦截和响应拦截。请求拦截请求拦截又分为请求成功拦截和请求失败拦截。基本用法： //请求拦截器,两个参数(请求成功, 请求失败) // 注意：拦截掉之后要将config给返回出去才能完成请求 axios.interceptors.request.use(config => { console.log(config); return config; }, err => { co

2020-09-29 20:11:15 164

原创学习记录——偶然发现的js闭包理解

闭包闭包概念闭包：能够读取其他函数内部变量的函数也就是定义在一个函数内部的函数，这个内部的函数持有外部函数变量的引用。闭包可以让你从内部函数访问外部函数作用域。在 JavaScript 中，每当函数被创建，就会在函数生成时生成闭包。 ———MDN阮一峰老师的思考题（this和闭包)代码片段1：　　var name = "The Window";　　var object = {　　　　name : "My Object",　　　　getNameFunc : func

2020-09-29 18:50:02 250

qq_25346499的博客