- 博客(29)
- 收藏
- 关注
RSS订阅原创 Object常用的API
1.Object.prototype.hasOwnProperty()语法obj.hasOwnProperty(prop)参数prop:要检测的属性的 String 字符串形式表示的名称，或者 Symbol返回值返回用来判断某个对象是否含有指定的属性的布尔值作用所有继承了 Object 的对象都会继承到 hasOwnProperty 方法。这个方法可以用来检测一个对象是否含有特定的自身属性；和 for…in 运算符不同，该方法会忽略掉那些从原型链上继承到的属性。例：检测了对象 a 是否
2021-05-21 20:33:28
577
原创 Object原型上的方法
1.Object.prototype.toString()语法：obj.toString()返回值返回一个表示该对象的字符串。通过toString() 来获取每个对象的类型，为了每个对象都能通过 Object.prototype.toString() 来检测，需要以 Function.prototype.call() 或者 Function.prototype.apply() 的形式来调用，传递要检查的对象作为第一个参数，称为thisArg。console.log(Object.protot
2021-05-21 18:49:57
506
原创 面试题总结
1.this关键字(指向)在浏览器里，在全局范围内this 指向window对象；在函数中，this永远指向最后调用他的那个对象；构造函数中，this指向new出来的实例本身；call、apply、bind中的this被强绑定在指定的那个对象上；箭头函数中this始终指向父级上下文(就是父级的作用域)前四种方式都是调用时确定,而箭头函数的this指向是声明的时候就已经确定了下来。2.事件模型：事件委托、代理？如何让事件先冒泡后捕获？事件委托：又名事件代理。事件委托就是利用事件冒泡，就是把
2021-05-20 21:53:25
144
原创 Vue源码分析(MVVM)
代码如下：function MVVM(options) { //给实例新增一个$options属性,.并且把传递过来的配置进行暂存 this.$options = options; this.$options.beforeCreate && this.$options.beforeCreate(); //在实例上新增一个_data 保存传递过来的data数据 var data = this._data = this.$options.data;
2021-05-06 08:22:05
117
原创 Vue源码分析(Compiler)
解析每个元素中的指令/插值表达式，并替换成相应的数据可以编译模板，解析指令、小胡子表达式还可以页面首次渲染，以及修改数据变化后的重新渲染视图代码如下：function Compile(el, vm) { this.$vm = vm; //this Compile的实例 $vm 是MVVM的实例 (vm) // el == "#app" 判断当前用户传递的el属性是元素节点还是选择器,如果是元素节点则直接保存到$el中通, //如果不是 则根据选择器 去查找对应的元
2021-05-06 02:01:21
160
原创 仿小米商城(下)
这里就是总结了一些在写项目时遇到感觉比较难的一些技术点购物车结算的商品数据，传送到vuex中，确认订单获取vuex中state数据渲染页面
2021-05-06 01:48:42
120
原创 梦学谷会员管理系统(下)
这个项目是我们项目小组分工合作完成的，就写一下我写的员工管理模块的技术点编辑、修改功能使用同一个对话框点击编辑的表单回填新增或者修改数据
2021-05-06 01:32:45
180
原创 电商后台管理系统（下）
这里就是总结了一些在写项目时遇到感觉比较难的一些技术点项目各个模块的技术难点登录注册Element-UI自带的表单验证设置axios请求拦截器，在请求头挂载Authorization属性发送登录axios请求用户管理编辑用户数据功能权限管理分配权限商品管理动态参数、静态属性在计算属性里面计算当前选择的是否三级分类、当前选择的是动态还是静态的添加数据判断选择的是否是三级分类添加动态、静态的数据...
2021-05-06 01:02:21
141
原创 axios的封装
首先，在项目src中创建一个http文件夹，文件夹中创建一个index.js文件，在这个文件中配置一个网络请求的默认配置和拦截器的配置，然后将配置好的axios抛出去然后我们再创建一个API文件夹，这里放置项目各个模块封装好的接口将抛出去的数据写成对象形式，方便我们在vue中调用...
2021-05-05 21:48:48
91
原创 vuex的核心概念和运行机制
Vuex是什么呢？Vuex是一个专为Vue.js应用程序开发的状态管理模式，它采用集中式存储和管理程序的所有组件的数据核心概念：state 所有的数据都存储在state中 state是一个对象mutations 可以直接操作state中的数据actions只能调用mutations的方法 ，包含异步操作，使用dispatch调用getters类似计算属性实现对state中的数据做一些逻辑性的操作modules 将仓库分模块存储运行机制：在组件中通过dispatch来调用actio
2021-05-05 21:40:22
103
原创 vue-router钩子函数
路由导航守卫分为全局路由守卫、路由独享守卫、组件路由守卫全局路由守卫router.beforeEach() 全局前置守卫router.afterEach() 全局后置守卫路由独享守卫beforeEnter()组件路由守卫beforeRouteEnter 进入这个组建路由之前调用beforeRouteUpdate 同一页面，刷新不同数据时调用beforeRouteLeave 离开当前路由页面时调用都有三个参数：to 即将要进入页面的路由信息from 离开路
2021-05-05 21:31:31
88
原创 $nextTick()
官方解释：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。我们可以理解成，Vue 在更新 DOM时是异步执行的。当数据发生变化，Vue将开启一个异步更新队列，视图需要等队列中所有数据变化完成之后，再统一进行更新，所以nextTick本质是一种优化策略简单理解：因为Vue的异步更新队列，$nextTick是用来知道什么时候DOM更新完成的使用场景：如果想要在修改数据后立刻得到更新后的DOM结构，可以使用$nextTick第一个参数为：回调函数（.
2021-05-05 21:16:13
222
原创 修改数据页面不更新的原因和解决方案
我们使用vue会碰到数据更新，但是视图并未改变的情况。造成的原因是：因为对象是引用类型，直接改变对象的某属性但是指向地址没变，vue不一定能监控到，所以当我们新建一个对象，就直接改变了它的指向地址。解决方案：$forceUpdate() vue自带的强制更新this.$forceUpdate() 强制视图更新Vue.set()Vue.set( target, propertyName/index, value )参数：target：要修改的对象或数组propert.
2021-05-05 20:30:39
355
原创 v-for中的key值的作用
key的作用是什么呢？key是给每一个vnode的唯一id，也是diff的一种优化策略，可以根据key，更准确， 更快的找到对应的vnode节点在使用vue列表渲染v-for时，我们最好在后面加上: key，它的作用是当v-for所绑定的数据发声变化时只重新渲染变化的项，而不是重新渲染整个列表...
2021-05-05 20:10:06
122
原创 v-if和v-for的优先级
注意：不推荐v-if和v-for同时使用在同一个元素上v-if和v-for同时使用，在Vue 处理指令时，v-for 比 v-if 具有更高的优先级<ul v-if="isFalse"> <li v-for="item in users" :key="item.id" > {{ item.name }} </li></ul>如果两者同时存在，可在v-for的外层包裹元素这里来进行v-if判断，如果放在一起，每
2021-05-05 19:54:53
202
原创 v-if与v-show的区别
相同点 都可以动态控制着dom元素的显示与隐藏区别v-if: 控制DOM元素的显示隐藏是将DOM元素整个添加或删除v-show: 控制DOM 的显示隐藏是为DOM元素添加css的样式display，设置none或者是block，DOM元素是还存在的性能对比v-if有更高的切换消耗v-show有更高的初始渲染消耗使用场景v-if适合运营条件不大可能改变的场景下v-show适合频繁切换...
2021-05-05 19:43:46
73
原创 Vue双向数据绑定原理
是结合订阅发布模式，通过object.defineProperty来实现数据双向绑定。observer会对data里面所有的属性进行数据劫持和数据代理，给数据对象的某个值赋值，就会触发setter，那么就能监听到了数据变化。watcher是监听data里面所有的属性，当属性被改变之后才会被触发，自身必须有一个update()方法。compile对模版进行解析，将模板中的变量替换成数据，然后初始化渲染页面视图，添加监听数据的订阅者，一旦数据有变动，收到通知，就会去更新视图。v-model只是双向
2021-05-05 19:39:55
104
原创 组件中的data为什么是一个函数
vue实例中的data属性既可以是一个对象，也可以是一个函数组件中定义data属性，只能是一个函数 <script> function Info() { return { name: 'EXO', age: '9' } } var obj1 = Info() var obj2 = Info() o
2021-05-05 19:12:25
235
原创 史上最全组件传参方式
1.父传子 prop在父组件的子组件标签绑定一个属性，来进行传输参数<template> <div> <h1>父组件</h1> <!-- 子组件标签用绑定属性来传输数据 --> <Son :arr="list" /> </div></template>import Son from '子组件文件路径'<script scope>
2021-04-25 02:16:30
851
原创 事件冒泡和捕获
事件冒泡即事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点。看以下例子：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-w
2021-04-21 20:51:17
46
原创 Vue的常用指令
v-model : 多用于表单元素实现双向数据绑定v-for ：循环数组或者jsonv-show :显示内容，通过display=block/none来控制元素隐藏显示v-hide : 隐藏内容，通过display=block/none来控制元素隐藏显示v-if： 显示与隐藏，通过dom元素的删除添加来控制元素隐藏显示v-bind：动态绑定，作用：及时对页面的数据进行更改v-text : 解析文本v-html： 解析html标签v-cloak：防止闪烁，该属性需配合样式使用v-pre： .
2021-04-12 23:26:03
110
原创 JS中一些常用事件
鼠标事件onclick：鼠标单击的时候触发ondblclick ：鼠标双击的时候触发onmouseover：当鼠标指针移动到元素上的时候触发onmouseout：当鼠标指针移出元素的时候触发onmousemove ：当鼠标指针移动到元素上的时候触发窗口事件onload ：页面或图片加载完成的时候触发onunload ：用户离开页面的时候触发表单元素事件onchange ：当用户改变内容的时候触发oninput ：当表单值发生改变的时候触发onsubmit ：点击提交按钮的时
2021-04-11 23:04:59
70
原创 v-if v-show的区别
**相同点：**都可以动态控制dom元素的显示元素区别：v-if 控制dom元素的显示隐藏是将dom元素整个添加或删除v-show 控制dom的显示隐藏是为dom元素添加css的样式，dom元素还是存在的性能上的区别：v-if 有更高的切换消耗v-show 有更高的初始渲染消耗使用场景：v-if 适合运营条件不太可能改变的场景v-show 适合频繁切换的场景...
2021-04-05 19:55:59
70
原创 Generator函数
generator是一个迭代生成器，其返回值为迭代器(Iterator),是ES6标准引入的新的数据类型，主要用于异步编程，它借鉴于Python中的generator概念和语法。generator函数是分段执行的，有两个重要方法：yield表达式 ：是暂停执行的标记next() ：可以恢复执行优点：利用循环，每调用一次，就使用一次，不占内存空间，打破了普通函数执行的完整性缺点：需要用next()方法手动调用，直接调用返回无效Iterator简单理解：generator函数就是
2021-04-01 21:42:11
1692
1
原创 原生ajax创建过程
ajax是实现页面无刷新可以更新数据，提高了用户体验1.创建ajax原生实例var native = new xmlHttpRequest()2.调用open准备发送(有三个参数）如果是post请求传json文件，open发送数据的时候括号里面直接写对象请求方式url(请求地址 )async(true 异步 false 同步)native.open('post',url,true)3.如果是post请求，必须设置请求头设置编码方法：setRequestHeader语法：nat
2021-03-31 21:02:13
164
原创 JS数组方法sort( )
JS数组方法sort( )作用：将数组里的项进行排序，并返回这个数组语法：数组.sort( )sort()方法比较的是字符串，没有按照数值的大小对数字进行排序，要实现这一点，就必须使用一个排序函数例一：升序排列function Number(a , b){ return a - b}arr = [12, 27, 48, 7]console.log(arr.sort()); // [12, 27, 48, 7] console.log(arr.sort(N.
2021-03-30 21:02:52
141
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人