L289121-CSDN博客

原创 Vue项目优化（代码优化）

一、代码优化1、使用keep-aliive包裹动态组件在动态组件中的应用：<keep-alive :include="whiteList" :exclude="blackList" :max="amount"> <component :is="currentComponent"></component></keep-alive>在vue-router中的应用：<keep-alive :include="whiteList"

2020-10-30 11:38:34 473

原创简单了解CSS Hack

什么是CSS Hack？一般来说，CSS Hack 就是针对不同的浏览器写不同的css。CSS Hack常见的有三种形式：属性Hack、选择符Hack、条件注释Hack （Hack主要针对IE浏览器）例：1、条件Hack条件注释只有在IE浏览器下才能执行，这个代码在非IE浏览下被当做注释视而不见。可以通过IE条件注释载入不同的CSS、JS、HTML和服务器代码等。<!--[if IE]> <p>你在非IE中将看不到我的身影</p><!

2020-10-29 08:32:38 528

原创事件委托

概念：事件委托又称事件代理，就是利用事件冒泡，将子元素的事件绑定到父元素上，如果子元素阻止了事件冒泡，那么事件委托也无法进行。优点：提高性能；减少事件绑定，从而减少内存占用。案例我们经常遇到Vue中v-for一个列表，列表的每一项都绑定了@click处理事件。我们都知道绑定这么多监听，从性能方面来说是不太好的。那我们我们可以通过把每个item的click事件委托给父元素的形式来实现。例如：获取item元素中title值为edit的id//html<table @click="e

2020-10-28 10:32:16 339

原创 Null 与 Undefind 的区别

null表示没有对象，可能将来要赋值一个对象1、作为函数的参数，表示该函数的参数不是对象2、作为对象原型链的终点undefind表示缺少值，即此处应该有值，但没有定义1、定义了形参，没有传实参，显示undefined2、对象属性名不存在时，显示undefined3、函数没有写返回值，即没有写return，拿到的是undefined4、写了return，但没有赋值，拿到的是undefinednull和undefind的相同点在javaScript中null和Undefind几乎相等

2020-10-28 09:31:14 361

原创 for···in 与 for···of 的区别

for···in 取 key，for···of 取 value遍历数组：for···in 遍历的是key（下标），for···of 遍历的是value（数组的值）；var arr = [99,88,66,77];for(let i in arr){ console.log(i); //0,1,2,3}for(let i of arr){ consoel.log(i); //99,88,66,77}遍历字符串：同遍历数组一样；遍历对象：for···in 遍历的是

2020-10-28 08:58:13 376

原创常见浏览器内核

浏览器/RunTime内核（渲染引擎）Chrome谷歌之前Webkit，已改Blink内核FireFox火狐GeckoSafari苹果WebkitIETridentOpera欧朋现已改用Google Chrome的Blink内核

2020-10-26 09:36:15 123

原创文字超过一行（两行）显示省略号

//一行white-space:nowrap;overflow:hidden;text-overflow:ellipsis;//两行 text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;

2020-10-15 10:03:38 535

原创闭包——解决闭包缺陷

什么是闭包？可以把闭包简单理解成“定义在一个函数内部的函数”。即函数嵌套函数，内部函数可以访问外部函数的变量为什么要使用闭包？javascript语言的特殊处就是函数内部可以读取全局变量。我们有时候需要得到函数内的局部变量，但是在正常情况下，这是不能读取到的，这时候就需要用到闭包。闭包的应用场景1、封装对象的私有属性和方法（隐藏数据，做一个简单的缓存工具）2、闭包作用回调函数3、函数节流防抖函数节流：是确保函数特定的时间内最多执行一次。函数防抖：是函数在特定的时间内不被再调用后

2020-10-15 09:51:15 488

原创图片懒加载原理

什么是图片懒加载？当打开一个有很多图片的页面时，先只加载页面上可视区域的图片，等滚动到页面下面时，再加载所需的图片。这就是图片懒加载。图片懒加载的作用减少或延迟请求数，缓解浏览器的压力，增强用户体验。图片懒加载的基本原理1､设置图片src属性为同一张图片，同时自定义一个data-src属性来存储图片的真实地址2､页面初始化显示的时候或者浏览器发生滚动的时候判断图片是否在视野中3､当图片在视野中时，通过js自动改变该区域的图片的src属性为真实地址1.document.documentEl

2020-10-06 08:20:36 254 5

原创小程序生命周期

可参考：https://www.cnblogs.com/fozero/p/7868560.htmlonLaunch : function () { // 生命周期函数--监听初始化（全局只触发一次）onLoad: function () { // 生命周期函数--监听页面加载 onReady: function () { // 生命周期函数--监听页面初次渲染完成 }, onShow: function () { // 生命周期函数--监听页面显示 }, onHide: f

2020-10-05 09:28:23 132

原创 Vue2和Vue3的区别

1. vue2和vue3双向数据绑定原理发生了改变（重点）vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持结合发布订阅模式的方式来实现的。vue3 中使用了 es6 的 ProxyAPI 对数据代理。相比于vue2.x，使用proxy的优势如下1、defineProperty只能监听某个属性，不能对全对象监听2、可以省去for in、闭包等内容来提升效率（直接绑定整个对象即可）3、可以监听数组，不用再去单独的对数组做特异性操作

2020-09-29 09:00:58 872

原创 keep-alive

keep-alive是什么使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。它自身不会渲染一个DOM元素，也不会出现在父组件链中keep-alive的使用场景用户在某个列表页面选择筛选条件过滤出一份数据列表，由列表页面进入数据详情页面，再返回该列表页面，我们希望：列表页面可以保留用户的筛选（或选中）状态。keep-alive就是用来解决这种场景。当然keep-alive不仅仅是能够保存页面/组件的状态这么简单，它还可以避免组件反复创建和渲染，有效提升系统性能。总的

2020-09-28 10:51:20 152

原创 Vue路由守卫

一、全局路由守卫全局路由守卫有三个：全局前置守卫(router.beforeEach )全局后置守卫(router.afterEach)全局解析守卫（router.beforeResolve）router.beforeEach((to, from, next) => { console.log(to) => // 到哪个页面去？console.log(from) => // 从哪个页面来？next() => // 一个回调函数}router.afterEach（

2020-09-28 09:02:07 203

转载 MVVM和MVC

mvvm概念：MVVM是 Model-View-ViewModel 的缩写，分别对应着：数据，视图，视图模型。Model是我们应用中的数据模型，View是我们的UI视图层，通过ViewModle，可以把我们Modle中的数据映射到View视图上，同时，在View层修改了一些数据，也会反应更新我们的Modle。简单理解就是双向数据绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。以vue为例：model 对应 data，view对应 template，vm对应

2020-09-27 19:24:43 124

原创 JS实现图片放大镜效果

1.通过鼠标onmourseover监听鼠标的略过图片，改变透明小区域和放大区域的display，置为block2.通过鼠标onmourseover监听鼠标的略过图片，改变透明小区域和放大区域的display，置为none3.通过event对象获取鼠标的当前坐标位置，即方法event.layerX,event.layer.Y,然后通过放入鼠标事件onmoursemove监听，不停的将透明小区域的top和left置为event.layerX,event.layer.Y的值代码<!DOCTYPE

2020-09-22 22:02:26 246

原创简述Vue——mixins（混入）的使用

来自官方的描述混入 (mixins)：是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。项目中如何使用混入在vue组件内，如果想将一些公共功能，如组件、方法、钩子函数等复用，混入是一个很好的选择。下面简单介绍一下混入的方式及特点。你可以将一个对象作为混入的选项，在组件中复用。因为vue实例也是对象，所以你可以将vue实例作为混入选项传递进去。我们可以创建一个目录mixins，在创建一个comm

2020-09-22 21:39:22 263

原创 Vue中provide 和inject 依赖注入

provide：Object | () => Objectinject：Array < string > | { [key: string]: string | Symbol | Object }provide：提供依赖。是一个对象，或者是一个返回对象的函数。里面呢就包含要给子孙后代的东西，也就是属性和属性值。inject：注入依赖。一个字符串数组，或是一个对象。属性值可以是一个对象，包含from和default默认值。provide 和 inject 主要在开发高阶插件/组件.

2020-09-22 20:59:57 161

原创 Vue--虚拟dom和diff算法

虚拟DOM：用js来模拟DOM中的节点。1、虚拟 DOM 的最终目标是将虚拟节点渲染到视图上。但是如果直接使用虚拟节点覆盖旧节点的话，会有很多不必要的 DOM 操作。Diff算法a.用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中b.当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异C、把所记录的差异应用到所构建的真正的 DOM 树上，视图就更新了...

2020-09-20 21:36:06 139 1

原创 Vue自定义过滤器filter

过滤器就是一个数据经过了这个过滤器之后出来另一样东西。vue中的过滤器分为两种：局部过滤器和全局过滤器全局过滤器// global-filter是过滤器名称// 函数第一个参数是需要过滤的数据.// 函数第二个参数是给过滤器传递的值. Vue.filter('global-filter',(val,...args)=>{ console.log(`需要过滤的数据是:${val}`) return val + ' 过滤器追加的数据' })var app = ne.

2020-09-20 20:07:52 225

原创 Vue中自定义指令以及自定义指令的应用场景

一、Vue中如何自定义指令除了核心功能默认内置的指令 (如v-model 和 v-show等)，Vue 也允许注册自定义指令。有的情况下，对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。如何自定义指令1.创建局部指令var app = new Vue({ el: '#app', data: { }, // 创建指令(可以多个) directives: { // 指令名称 dir1: {

2020-09-20 19:46:10 852

原创 Vue -- 修饰符

一、事件修饰符.stop ：阻止事件冒泡.prevent ：阻止标签默认行为.capture ：触发事件捕获行为,（即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理）.self ：只有当event.target是当前元素自身时触发处理函数.once ：事件将只会触发一次.passive ：告诉浏览器你不想阻止事件的默认行为使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用v-on:click.prevent.self会阻止所有的点击，而 v-on:click.se

2020-09-18 09:01:46 147

原创 Vue自定义组件

组件的组织通常一个应用会以一棵嵌套的组件树的形式来组织：如图，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。Vue自定义组件自定义组件分为全局组件和局部组件1、全局注册整个项目经常用到的用全局写法，用到比较少的专供特定页面用的使用局部组件。全局组件引入写法：在项目的main.js中，例：import Vue from 'vue';import MyComponent from '@/components/MyComponent.vue'; //

2020-09-18 08:47:46 149

原创 Vue常用指令

v-model 多用于表单元素实现双向数据绑定v-for 格式： v-for="（item,index) in/of 数组json" 循环数组或jsonv-show 显示内容 ,通过display=block/none来控制元素隐藏出现v-hide 隐藏内容同上v-if 显示与隐藏（dom元素的删除添加同angular中的ng-if 默认值为false）v-else-if 必须和v-if连用v-else 必须和v-if连用不能单独使用否则报错模板编译错误v-bind 动态绑定作.

2020-09-17 09:52:52 90

原创 Vue双向数据绑定的原理

vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。步骤1、实现一个数据监听器Obverser，对data中的数据进行监听，若有变化，通知相应的订阅者。2、实现一个指令解析器Compile，对于每个元素上的指令进行解析，根据指令替换数据，更新视图。3、实现一个Watcher，用来连接Obverser和Compile, 并为每个属性绑定相应的订阅

2020-09-17 09:32:46 213

空空如也

空空如也