- 博客(49)
- 收藏
- 关注
RSS订阅
原创 H5项目实现仿外卖页面左右联动滚动
浏览器的滚动条大家都会遇到，当页面内容的高度超过视口高度的时候，会出现纵向滚动条；当页面内容的宽度超过视口宽度的时候，会出现横向滚动条。也就是当我们的视口展示不下内容的时候，会通过滚动条的方式让用户滚动屏幕看到剩余的内容。前端技术栈：vue2.0。
2023-07-21 10:51:15
739
1
原创 div仿input的使用
需求描述，输入框支持文本输入，以及支持标签在对应节点的插入。1、首先封装组件，通过父子组件传参的方式进行数据的处理用富文本插件体积略大通过div标签的contenteditable属性来处理成仿input框同时要处理在输入时，光标位置的问题。 <div ref="divInput" class="edit-div" style="-webkit-user-select: auto" :contenteditable="canEdit" @bl.
2022-01-04 17:07:46
2637
2
原创 电子凭证文件上传
最近，一直在做一些关于文件上传，以及凭证导出打印的工作，做一些记录，方便日后的查阅。对了，我在这里用的是antDesign这个第三方组件文件上传vue模板中 <p> <a @click="uploadElect(item, item.key)">上传电子凭证</a> </p> <-->调用第三方相关的上传组件</--> <a-upload :
2021-10-02 19:19:16
259
2
原创 react之jsx语法规则
开始之前也没什么，先说点别的，前段事件一直在忙找工作这件事，所以对于学习新的知识这块也耽误了不少，不过还好，最终进入了一家不错的公司，公司名就不说了，技术太菜，怕你找到我，当面Diss我！！！ 公司用的是react，对于我这样一直用Vue的人来说，并不是十分的友好，毕竟，当面对一个新的事物的时候，我们总要花一番经历去进行了解他，所以，我就开始了！！！但…加油吧！希望在之后的日子里，能够时常更新！定义虚拟DOM时，不要写引号标签中混入JSX表达式时，要用{}样式的类名不要用cla
2021-06-27 00:35:19
208
1
原创 理论杂记
1、this的指向关于this的指向是一个比较关键的问题，不论什么时候我们都能遇到首先：在全局中 function foo() { var length = 10; console.log(this);//window } var length = 5; foo(); // 5此时的this指向的是全局window在构造函数中 function A(name, age) { this.na
2021-05-21 01:10:32
137
原创 小程序`uin-app`之列表循环
首先： 我们 先来复习一下vue的列表循环 。通过v-for指令基于一个数组来渲染一个列表。基础语法就是v-for="(item,index )in items" :key="index"key值的作用就是作为列表循环中列表项的唯一值，可以使下标，也可以是id值。<ul id="example-1"> <li v-for="item in items" :key="item.message"> {{ item.message }} &l.
2021-05-07 21:21:33
1839
1
原创 MVVM源码解析之Watcher监听
MVVM源码解析之Watcher监听关于watcher的监听，我觉得还是上一篇中的那张图比较明了实现Watcher监听 vm.$watch('child.someStr', function() { console.log(arguments); });watcher的第一次出现是在compile模板解析中，在模板解析中，Watcher中回调视图更新函数，在Observer()中，当数据发生变化，通知订阅者当数据发生改变，在watcher中监听，调用视图更新的函数，
2021-05-05 20:53:19
246
原创 MVVM源码解析之Observer()篇
Observer()Observe的第一次出现是在数据代理中[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1eFCmYmG-1620215805788)(D:\全栈学习\学习总结笔记\img\博客发文\Observe7.png)]首先：通过Observer给每个数据对象进行了递归遍历，包括子属性对象的属性，都加上setter和getter的方法，如果我们改变这个对象的值的话，就会触发setter，那么就能监听到数据的变化。源码以及注释解析function Obs.
2021-05-05 19:57:15
529
1
原创 MVVM源码解析之模板解析篇
源码解析之模板解析解析表达式解析普通指令解析表达式解析步骤：从文本节点中取出表达式从data中取出表达式对应的属性值将属性值设置为文本节点的textContent const vm = new MVVM({ el: "#app", data: { name: "aa" } });在源码中，判断当前节点是否存在{{}}，从而进行解析。通过正则进行匹配大括号表达式，匹配成功后，判断当前元素是否包含文本节点
2021-05-05 19:15:54
347
原创 MVVM源码解析之数据代理篇
源码解析之数据代理学习准备数据代理学习准备了解以下几点[].slice.call()：将arguments转为数组node.nodeType：判断节点类型了解Object.defineProperty是什么？理解：Object.hasOwnPropertyDocumentFragment文档碎片<ul id="liBox"> <li>[].slice.call(childNodes)</li> <li>Object.de
2021-05-05 18:20:23
209
原创 电商后台管理项目d02
电商项目d02商品管理1、商品分类2、分类参数：3、商品列表页面数据统计1、数据报表商品管理在做商品管理之前，首先我们要进行分析，三个组件页面的顺序，商品管理模块的顺序就是，先对商品进行添加分类后才有参数，所以三个模块的顺序是1、商品分类。2、分类参数。3、商品列表。1、商品分类第一步：首先创建对应路由注意：依旧是子级路由 { path: '/categories', name: "categories", component: (
2021-05-05 00:39:57
202
1
原创 电商后台管理项目d01
1、项目技术栈VueVue-RouterElement-UIAxiosEcharts2、项目初始化安装Vue脚手架通过脚手架创建项目(手动配置)路由配置配置Element-UI，安装[babel-plugin-component]，实现按需导入配置Axios实现Axios的发呢改装3、Element-UI的按需引入。在目录src下新建一个util文件夹，在util文件中新建一个elementUI文件。在main.js文件中导入。import './util/elemt'
2021-05-04 20:26:20
487
10
原创 v-if和v-show的区别
要想了解v-if和v-show的区别，我们还是需要了解一下这两者是什么。v-if和v-show就是用来判断视图层从而展示效果的。v-if是通过创建或者删除DOM节点来实现元素的显示以及隐藏的v-show是通过CSS中的display属性来控制元素的显示以及隐藏的。一般的来说，v-if拥有更改的切换开销，而v-show有更高的初始渲染开销，所以如果要频繁的切换，则使用v-show是比较好的，但是如果运行时条件很少改变，还是要用v-if在实际的开发中，我们经常用到v-if或者v-show来进行
2021-05-04 14:46:44
265
原创 v-if和v-for的优先级
v-if和v-for的优先级在官方文档中v-if是根据表达式的值truthiness来有条件的渲染元素，在切换元素以及它的数据绑定/组件被销毁并重建，如果元素是<template>，将提出它的内容作为条件块。首先，v-for和v-if是不应该一起使用的，必要的情况下应该替换成commpouted属性，是因为：v-for在官方文档的解释中本身就比v-if优先，如果每一次都需要遍历整个数组，将会影响速度，尤其是当只需要渲染很小一部分的时候。同时：在vue处理指令时。v-for比v-if具
2021-05-02 23:23:16
297
原创 修改数据页面不更新的原因和解决方案
在Vue项目中，有时候在我们修改或者添加新的对象属性后，明明data中的数据已经更新了，但是页面依旧没有更新。1、分析：在vue2中是通过Object.defineProperty对于data中的数据进行数据劫持，实现数据的双向绑定的。 defineReactive: function(data, key, val) { //为data中所有层次的属性都创建一个dep实例 var dep = new Dep(); //递归遍历d
2021-05-02 19:44:13
1059
原创 Vuex的核心概念和运行机制
Vuex的核心概念和运行机制1、vuex是什么？vuex是一个专为vue.js应用程序开发的状态管理工具，他采用集中存储的方式来管理程序的所有组件的数据2、Vuex都有什么核心概念？state：用来存储数据。数据类型是一个对象类型。Getters：借助vue的计算属性computed来实现实现缓存，通过Vue的计算属性实现对state中的数据做一些逻辑性的操作。actions：在actions中只能调用muations中的方法，是一个异步的muationsmuations：更改Vuex的
2021-05-02 17:48:54
436
原创 Vue中key值的作用
Vue中key值的作用首先v-for在列表渲染时，我们可以用v-for基于一个数组来渲染一个列表。v-for指令需要使用item in arr形式的特殊语法来进行渲染列表，arr是源数据，<ul id="example-1"> <li v-for="item in arr" :key="item.id"> {{ item.message }} </li></ul>v-for中的key值在vue.js文档中是这样写的当Vue
2021-04-29 21:16:38
4662
1
原创 vue中的data为什么是一个函数
首先：组件是一个可复用的Vue实例，一个组件被创建好之后，就可能被用在各个地方，而组件不管被复用多少次，组件中data数据都应该是相互隔离，互不影响的，基于这一理念，组件每复用一次，data数据就会被复制一次，、也就是说如果data是一个函数的话，那么我们每次创建一个新的实例之后，就会调用一个新的data函数。也就是给每一个data数据定义一个新的内存地址。这样的话，修改A而不会影响B.function Person() { this.data = this.data();}Person
2021-04-29 20:17:17
2982
转载 Vue的双向绑定原理
Vue的双向绑定原理面试话术vue.js是采用数据劫持结合发布者和订阅这的模式，通过Object.defineProperty()来劫持各个属性的getter和setter，在数据发生变动时发布消息给订阅者，触发响应的回调来渲染视图。具体步骤1、通过observer的数据对象进行递归遍历，包括子属性的对象的的属性，都加上setter和getter，从而给这个对象的某个值赋值，就会触发setter,这样来监听数据的变化2、通过compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染
2021-04-29 18:53:52
139
原创 vue-router路由导航守卫
共有这几种：路由守卫（导航守卫）：router.beforeEach：全局前置守卫。router.beforeResolve：全局解析守卫。router.afterEach：全局后置钩子。组件内守卫：beforeRouteEnterbeforeRouteUpdatebeforeRouteLeave路由独享守卫：beforeEnter总结：导航被触发。在失活的组件里调用 beforeRouteLeave 守卫。调用全局的 beforeEach 守卫。在重用的组件里调用
2021-04-29 18:50:56
1534
原创 vue的生命周期
1、beforeCreate(创建前)：在此生命周期函数执行的时候，data和methods中的数据都还没有初始化。2、created(创建后)：在此生命周期函数中，data和methods都已经被初始化好了，如果要调用 methods中的方法，或者操作data中的数 据，最早只能在created中操作。3、beforeMount(载入前)：在此生命周期函数执行的时候，模板已经在内存中编译好了，但是尚未挂载到页面中去，此时页面还是旧的。4、mounted(载入后)：此时页面和内存中都是最新的数据，这个
2021-04-29 18:48:21
452
1
转载 Es6学习笔记 Object.assign()
首先Object.assign()产生的是一个引用类型的内存地址基本用法object.assign方法用于对象的合并，将源对象source的所有可枚举属性，复制到目标对象targetconst target = { a: 1 };const source1 = { b: 2 };Object.assign(target, source1);target // {a:1, b:2, }Object.assign方法的第一个参数是目标对象，后面的参数都是源对象。注意：如果目标对象
2021-04-25 10:14:45
411
原创 组件通信大全
首先组件时vue.js最强大的功能之一，而组件实例的作用的域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系如图所示A是父级、B是A的子级C和D的父级，C和D是兄弟关系，A和C、D是隔代关系。针对于不同的场景，我们可以使用不同的组件方式。第一种：父子组件传值1、父传子在父组件的子组件标签上绑定一个属性，挂载要传输的变量在子组件中通过props来接收数据，props可以是数组也可以是对象，接受的数据可以直接是props:['属性名']或prop
2021-04-25 00:21:31
294
1
原创 debugger断点应用
1、首先了解一下设置断点的目的是为了调试状态下运行程序，是的编程开发人员可以看到程序运行过程中的数据变化情况， 检查代码是否正确可以让程序终端在需要的地方，从而方便开发人员进行分析，也可以在一次调试中设置断点，下一次只需要让程序自动运行到设置断点的位置，便可以在上次设置断点的位置中断下来，极大的方便了操作，从而节省了时间。2、断点是如何使用的？第一步：两种方法：第一种：在js代码中加上debugger debugger const obj1 = { age
2021-04-23 11:58:10
1157
1
原创 js中的文档碎片的理解与使用
js中的文档碎片的理解与使用首先要了解 在js每次操作dom时都会对DOM进行一次重排，所谓重排也就是当元素的大小，位置结构发生变化的时候，就会引起浏览器对当前页面的结构进行一次重新的计算，这是非常耗费浏览器性能的。 虚拟DOM的出现很好的解决了这一问题，而js中的文档碎片就类似于虚拟DOM。什么是文档碎片？document.createDocumentFragment() 利用上述语法，创建一个空的容器，用于存放创建的DOM元素利用普通的方式修改页面内
2021-04-22 20:13:47
566
原创 关于Object.defineProperty()
1、什么是Object.defineProperty()是vue2.0的基础语法，利用Object.defineProperty()能够实现数据的双向绑定Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。2、语法Object.defineProperty(obj, prop, descriptor)参数说明：obj：必需。目标对象prop：必需。需定义或修改的属性的名字descriptor：必需
2021-04-21 21:02:48
243
原创 Vue中的$nextTick()
官方定义：在下次DOM更新循环结束后执行延迟回调，在修改数据之后立即使用这个方法，获取更新后的DOM面试总结 Vue中DOM的更新采取的时候更新队列，Vue在观察到数据变化时候不是直接更新DOM，而是开启一个队列并缓冲在同一个事件循环中发生的所有数据改变。 虽然Vue推荐我们采用数据驱动但是有些时候我们仍然需要使用一些原生DOM操作，当数据改变后，DOM并没有更新，这个时候是获取不到最新的DOM对象的，nextTick就是让我们知道DOM是什么时候更新完成的，所以我
2021-04-20 23:51:52
369
原创 vue组件开发的props验证
1、什么是keep-alive？keep-alive是vue的内置组件,而这个组件作用就是能够缓存不活动的组件，一般情况下，组件在进行切换的时候，默认会进行销毁，如果有需求，某个组件切换后不进行销毁，而是保存之前的状态，那么可以利用keep-alive来实现。简单的说就是：在vue项目中，难免会有列表页面或者搜索结果的列表页面，在点击某个结果之后，返回回来时，如果不对结果页面进行缓存，那么返回列表页面的时候会回到初始状态，但是我们想要的结果是返回是这个页面还是之前的搜索结果列表，这个时候就需要keep
2021-04-19 18:21:59
465
3
原创 Vue常用指令
vue中经常用v-表示一些指令，总结一下插入文本：v-text相当于元素的innerText属性，必须是双标签插入HTML：相当于元素的innerHTML属性循环遍历v-for的使用，除了item属性，还有一些其他辅助属性 在html中使用v-for指令进行渲染/* 普通数组 data:{ list:[1,2,3,4,5,6] } <p v-for="(item,i) in list">--索引值--{{i}} --每一项--{{item}}.
2021-04-18 16:50:20
192
1
原创 Vue中引入自定义公共组件方法以及步骤
什么是公共组件，公共组件的使用场景项目中如果多个页面都显示有相同的区域内容，则该公共区域内容可以封装成公共组件进行使用。步骤：1、创建自定义公共组件，在src下的components目录中自定义创建需要的公共组件2、在main.js文件中将组件挂载到全局范围内。至于如何挂载…en。。。。。// 注册全局组件import mylist from './components/Home/MyList.vue'Vue.component('my-list', mylist)就这样，就可以了
2021-04-15 09:33:08
2534
原创 vue项目中axios的简单封装
前言： 很多朋友的vue项目的开发过程中，习惯性的将数据的请求放在了组建中，如下图，这样的话，当后台数据发生变化的时候，当项目体量较大，文件较多时，更改起来就不太方便，所以为了方便管理数据接口，实现快速的开发，我们可以将数据接口通过API封装的形式来进行管理。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-izgdSoMk-1618278390082)(D:\全栈学习\学习总结笔记\img\未命名1618275359.png)]实现AP
2021-04-13 09:52:22
350
原创 js中的事件委托
1、什么是事件委托？ 事件委托， 他还有一个名字叫做事件代理，是JavaScript中常用的绑定事件的常用技巧，顾名思义，事件代理即是把原本需要绑定在子元素的响应事件委托给父元素，让父元素担当事件监听的职务，2、为什么要用事件委托?简单来说就是：访问次数越多，引起浏览器重绘和重排次数就越多，延长整个页面交互就绪事件减少与dom操作的的交互次数，提高性能。3、事件委托原理：利用事件冒泡原理来实现，从事件从最深的节点开始，然后逐步向上传播事件。例如：有这样的一个DOM树，
2021-04-12 10:09:15
259
原创 JavaScript事件汇总
js事件汇总整理1、键盘事件常用的键盘事件键盘事件触发条件onkeyup某个键盘按键被松开是触发onkeydown某个键盘按键被按下时触发onkeypress某个键盘按键被按下时触发，但是它不识别功能键比如ctrl shift箭头等<script> // 常用的键盘事件 //1. keyup 按键弹起的时候触发 document.addEventListener('keyup', functi
2021-04-11 22:19:52
228
2
原创 关于事件流的简单理解
JS事件1、首先，什么是事件？ JavaScript和Html发生交互是通过事件来实现的，事件，就是文档或浏览器窗口发生一些特定的交互的瞬间2、什么是事件流？事件流就是，事件传播的过程。DOM中完整的事件流包括了三个阶段：事件捕获阶段、目标阶段和事件冒泡阶段事件通过捕获到达目标元素，这个时候就是目标阶段，从目标节点元素将事件上传到根节点的构成阶段，冒泡阶段3、关于事件冒泡以及事件捕获事件冒泡，也就是自下而上，从目标触发的元素逐级向上传播，直至window对象事件
2021-04-09 17:22:29
3770
转载 DOM的渲染
浏览器的渲染过程思考:作为前端程序员，最为熟悉的就是HTML,CSS,javascript，我们通过编写他们，就可以在浏览器呈现一个漂亮的页面,但是这是怎么做到的呢？1、关键渲染路径(Critical Rendering Path)构建对象模型对象(DOM,CSSOM)构建渲染数(Render Tree)布局渲染注意：在从构建模型对象到渲染这一过程中，还少不了JS脚本的执行2、DOMTree的构建第一步：解析，将读取到的HTML原生字节码，通过设置的charset编码，转换成相
2021-04-08 18:47:53
947
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人