weixin_45290022-CSDN博客

原创微信小程序页面中如何监听手指滑动事件

在开发中需要监听手指在页面的滑动事件来来实现操作需求，这里找到了一个解决方案虽然不知道是不是最佳但是满足了需求，所以分享给大家，希望在大家需要的时候能够起到作用，如有不足之处还望指出，谢谢！话不多说，直接展示实现过程（这里只展示主要代码段）实现的思路：手指在屏幕上的滑动可以看作是手指在页面最外层盒子上的滑动一、注册触摸开始事件、触摸移动事件、触摸结束事件<view class="container" bi

2021-05-12 17:04:52 4394

原创微信小程序自定义导航栏

在小程序开发过程中难免会遇到小程序原有的导航不能满足项目中的需求，所以需要自己去自定义导航栏，接下来就和大家分享一下如何实现自定义导航栏，如果有不足之处，还望指出，谢谢！（接下来只提供主要的代码段）一、更改小程序app.json配置文件在小程序app.json的配置文件中的window属性中添加**navigationStyle：“custom”**{ "pages":[ "pages/index/index", "pages/logs/logs" ], "window":

2021-05-11 15:32:52 272

原创 webpack自动编译工具

webpack中有几个不同的选项，可以在代码发生变化后自动编译代码：1、watch2、webpack-dev-server3、webpack-dev-middlewarewatch用法1：在webpack指令后边加上--watch参数即可作用：监视本地项目文件的变化，发现有修改的代码会自动编译打包，生成输出文件具体操作步骤：1、配置package.json的scripts中的"webpack --watch"2、运行npm run watch代码如下："scripts": {

2021-05-11 14:41:58 309

原创 es6中export和export default的区别

1.export与export default均可用于导出常量、函数、文件、模块等2.你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式，将其导入，以便能够对其进行使用3.在一个文件或模块中，export、import可以有多个，export default仅有一个4.通过export方式导出，在导入时要加{ }，export default则不需要注意： export default与普通的export不要同时使用，并且如果使用export default {

2021-01-30 16:39:53 94

原创 vue的路由模式

hash模式：在浏览器中符号“#”以及后边的字符称之为hash，用window.location.hash读取；hash虽然在URL中，但是不被包括在HTTP请求中；用来指导浏览器的动作，对服务端安全无用，hash不会重加载页面。history模式：history采用HTML5的新特性；提供了两个方：pushState()和replaceState()可以对浏览器的记录栈进行修改，以及popState事件的监听到状态改变。history 模式下，前端的 URL必须和实际向后端发起请求的URL一致，否则

2021-01-27 14:26:58 71

原创 Vue中组件生命周期调用顺序

简单概括：组件的调用顺序都是先父后子，渲染完成的顺序是先子后父。组件的销毁操作是先父后子，销毁完成的顺序是先子后父。加载渲染过程父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount- >子mounted->父mounted子组件更新过程父beforeUpdate->子beforeUpdate->子updated->父updated父

2021-01-27 14:23:51 164

原创 Vue模板编译原理

简单说： vue的编译过程就是将template转化成render函数的过程。具体过程：首先解析模板，生成AST语法树（一种用JavaScript对象的形式描述的模板），使用大量的正则表达式对模板进行解析，遇到标签、文本的时候都会执行相应的钩子函数进行相关处理。由于Vue的数据是响应式的，但是其实在模板中并不是所有的数据都是响应式的，有一部分数据在首次渲染加载之后就不会发生改变，对应的DOM也不会发生改变，那么优化的过程就是深度遍历AST语法树，按照相关的条件对树节点进行标记，那些被标记的节点（静态节

2021-01-27 14:19:24 219

原创对于MVVM的理解

什么是MVVMMVVM是Model-View-ViewModel的缩写。Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑，View代表UI组件，它负责将数据模型转化成UI展现出来。ViewModel监听数据模型的改变和控制视图的行为、处理用户交互。在MVVM框架中，View和Model之间并没有直接的联系，而是通过View Mode进行交互的，Model和ViewModel之间的交互是双向的，因此View数据的变化会同步的Model中，而Model数据的变化也会立即反映到View

2021-01-27 14:14:22 314

原创 Vue2.x组件通信有哪些方式

父子组件通信：父->子props，子->父 $on、$emit;获取父子组件实例 $parent、$children;通过Ref 获取实例的方式调用组件的属性或者方法;Provide、inject 官方不推荐使用，但是写组件库时很常用兄弟组件通信：Vuex和Event Bus实现跨组件通信Vue.prototype.$bus = new Vue跨级组件通信：vuex,$attrs、$listeners, provide、inject...

2021-01-27 14:09:43 216

原创 Computed和Watch的区别

Computed：本质是一个具备缓存的watcher，依赖的属性发生变化就会更新视图。适用于计算比较消耗性能的计算场景，当表达式过于复杂时，在模板中放入过多逻辑会让模板难以维护，可以复杂的逻辑放入计算属性中处理。watch：没有缓存性，更多的时观察作用，可以监听某些数据执行回调。使用时可以设置deep:true对对象中的每一项进行深度监听。但是这种方法会带来性能问题，可以通过字符串形式的监听。如果没有写到组件中，不要忘记使用unWatch手动注销。...

2021-01-27 11:18:17 74

原创 vue3.x双向绑定原理

实现原理Vue3.x是通过proxy（代理）实现的数据的双向绑定。proxy跟Object.defineProperty一样也可以给对象的属性添加两个方法get&set。区别：Object.defineProperty一次性只能给对象的一个属性添加get&set方法，而Proxy一次性给对象所有属性都设置get&set方法用法：创建一个新的proxy对象let p = new Proxy(obj,{get:function(){},set:function(){}})

2021-01-27 10:48:20 534

原创 vue2.x中双向数据绑定实现的原理

实现的原理vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter、getter，在数据发生变动时发布消息给订阅者，触发相应的监听回调。具体的步骤第一步：实现数据监听器observe，对数据进行递归遍历，包括子属性对象的属性，都相应的添加上getter、setter，这样在给某个属性赋值时都会触发setter，就能监听到数据的变化。第二步：实现解析模板指令compile,将模板中的变量替换成数据，然后初始化渲染页面视图，并

2021-01-27 10:40:19 192

原创 vue的diff算法理解

diff算法作用：用来修改dom的一小段，不会引起dom树的重绘diff算法实现的原理：diff算法将virtual dom的某个节点数据改变后生成的新的vnode与旧节点进行比较，并替换为新的节点，具体过程就是调用patch方法，比较新旧节点，一边比较一边给真实的dom打补丁进行替换具体过程详解：1：在采用diff算法进行新旧节点进行比较的时候，比较是按照在同级进行比较的，不会进行跨级比较2：当数据发生改变的时候，set方法会调用dep.notify通知所有的订阅者watcher，订阅者

2021-01-27 10:12:09 136

原创 http和https的区别

Http：超文本传输协议（Http，HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议。设计Http最初的目的是为了提供一种发布和接收HTML页面的方法。它可以使浏览器更加高效。Http协议是以明文方式发送信息的，如果黑客截取了Web浏览器和服务器之间的传输报文，就可以直接获得其中的信息。Https：是以安全为目标的Http通道，是Http的安全版。Https的安全基础是SSL。SSL协议位于TCP/IP协议与各种应用层协议之间，为数据通讯提供安全支持。SSL协议

2021-01-23 07:51:11 70

原创 ECMAScript6的常用的语法

var(变量)、let(变量)和const(常量)的区别var(变量)： 1、存在变量提升问题，降低js代码的可阅读性 2、没有块级作用域，容易造成变量污染let(变量)： 1、不存在变量提升问题，只有定义之后才能使用此变量 2、存在{}块级作用域 3、let定义的变量不会挂载到window上面const主要特性： 1、不存在变量提升问题，只有定义之后才能使用此变量 2、const定义的时常量，无法被重新赋值，如果时定义的是对象，则对象里面的值是可以被修改的 3、当定义常量的时候

2021-01-14 15:55:11 122

原创 JQuery简介以及常用的方法

简介：jquery是JavaScript框架库中的一种，写的少，做的多，链式编程，隐式迭代等。可以解决js的兼容性问题。JQuery中常用的方法1、获取对象的值和设置对象中的值 1. $(对象).val();//获取对象中的值 2. $(对象).html();//设置标签中间显示其他标签及内容,类似于innerHTML 3. $(对象).text();//设置标签中间显示的文本内容，类似于innerText 4. $(对象).css();//设置元素的样式，类似于style $(对

2021-01-13 22:55:48 333

原创字符串(String)对象

定义：String定义了一个字符串对象字符串的不可变：字符串的不可变指的是里面的值不可变，表面看上去是可以改变，其实是地址改变了，新开辟了一个内存空间。正因为如此，在大量拼接字符串的时候会有效率问题。字符串中常用的方法： 1. indexOf('要查找的字符'，开始的位置)开始的位置是index索引号返回指定的内容在原字符串中的位置，如果找不到就返回-1 2. lastIndexOf() 从后往前找只找第一个匹配的 3. charAt(index) 返回指定位置的字符（index字符串的索

2021-01-13 10:06:55 307

原创什么是数组以及数组常用的方法

数组的定义：一组有序的数据数组的本质：一组数据的集合，并且里面的数据是有序的数组的作用：把一组相关的数据存放在一起，并提供方便的访问（获取）方式数组的创建的方式： 1. 通过new方式创建语法：var 数组名 = new Aarray() 2. 通过字面量的形式创建语法：var 数组名 = []; 注意：字面量:源代码中一个固定值的表示方法注意：数组中可以存放任意类型的数据数组中的方法： 3. instanceof: 判断一个对象是否属于某种类型 4. Array.isArray(

2021-01-13 09:52:40 118

原创什么是Ajax，如何发起请求？

什么是Ajax即 Asynchronous Javascript And XML，是一种通过在后台与服务器进行少量的数据交换，可以使页面实现异步更新，这就意味着可以在不重新加载整个网页的情况下，对页面的某一部分进行数据的更新。AJAX 不是一门的新的语言，而是对现有持术的综合利用。基于web标签的xhtml+css。本质：是在HTTP协议的基础上以异步的方式通过XMLHttpRequest对象与服务器进行通信。作用：可以在页面不刷新的情况下，请求服务器，局部更新页面的数据；可以使用dom进行动态的显示

2021-01-12 17:00:30 252

原创如何防止在刷新时vuex中的数据被初始化

如何防止在浏览器刷新时vuex中的数据被初始化vuex是在中大型项目中必不可少的状态管理组件，但是在使用的过程中会出现刷新会重新更新状态的问题，有时候会影响我们获取某些数据，例如全局相关的，如登录状态、token、以及一些不常更新的状态等，所以为了能后将不经常更新的数据固定化，减少接口的请求次数，这里推荐一种方法：使用vuex持久化来解决。使用方法：1、安装npm i -S vuex-persistedstate我自己安装的版本号 "vuex-persistedstate": "^3.0.1"

2020-12-02 15:09:52 324

原创 vue项目中路由懒加载及组件懒加载

vue路由懒加载及组件懒加载一、为什么要使用路由懒加载为给客户更好的客户体验，首屏组件加载速度更快一些，解决白屏问题。二、定义懒加载简单来说就是延迟加载或按需加载，即在需要的时候的时候进行加载。三、路由懒加载使用常用的懒加载方式有两种：即使用vue异步组件和 ES中的import1、未使用懒加载，vue中的代码如下import Vue from 'vue'import Router from 'vue-router' import HelloWorld from '@/componen

2020-07-10 17:18:47 1011 6

原创 elementUI中table行上下移动

vue中 el-table中如何控制行的上下移动在vue项目中遇到一个问题： el-table中的数据如何手动控制行的上下移动进行数据排序。现在问题已经解决了，分享一下。直接上代码：（只粘贴主要的代码）html中的代码：<el-table :data="tableData" :height="tableHeight" :header-cell-style="tableHeaderColor" stripe border>

2020-06-04 17:32:56 3880 3

转载节流和防抖的理解

函数节流和函数防抖的理解一、概念理解函数防抖(debounce)触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间函数节流(throttle)高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率二、函数节流和防抖的目的都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。三、实现方式函数防抖(debounce)每次触发事件时设置一个延迟调用方法，并且取消之前的延时调用方法。但是这种方式有一

2020-06-02 13:45:10 409

转载 Cookie、LocalStorage与SessionStorage的理解

Cookie、LocalStorage与SessionStorage的区别一、基本概念CookieCookie是小甜饼的意思。顾名思义，cookie 确实非常小，它的大小限制为4KB左右。它的主要用途有保存登录信息，比如你登录某个网站市场可以看到“记住密码”，这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。localStoragelocalStorage 是 HTML5 标准中新加入的技术，它并不是什么划时代的新东西。早在 IE 6 时代，就有一个叫 userData 的东西

2020-06-02 11:27:52 111

原创什么是CSRF攻击？应如何防御？

一、什么是CSRF攻击？跨站请求伪造（英语：Cross-site request forgery），也被称为 one-click attack 或者 session riding，通常缩写为 CSRF 或者 XSRF，是一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法。跟跨网站脚本（XSS）相比，XSS 利用的是用户对指定网站的信任，CSRF 利用的是网站对用户网页浏览器的信任。二、CSRF攻击原理是什么？依据上图的原理简单点说就是攻击者通过一些技术手段欺骗用户的浏览器去访问一

2020-05-23 08:58:29 454

weixin_45290022的博客