fuhs_2-CSDN博客

原创 vue组件通讯

父传子：在父组件的子组件标签上绑定一个属性，挂载要传输的变量。在子组件中通过props来接受数据，props可以是数组也可以是对象，接受的数据可以直接使用 props:[“属性名”] props:{属性名:数据类型}子传父：在父组件的子组件标签上通过绑定自定义事件，接受子组件传递过来的事件。子组件通过$emit触发父组件上的自定义事件，发送参数兄弟组件传值：通过main.js初始化一个全局的bus,在发送事件的一方通过bus,在发送事件的一方通过bus,在发送事件的一方通过bus.emit(“事

2022-02-09 19:39:55 198

原创 vue-router

路由原理1.路由就是用来解析URL以及调用对应的控制器，并返回从视图对象中提取好的网页代码给web服务器,最终返回给客户端。hash模式：在浏览器中符号的“#”，以及#后面的字符称之为hash，用window.location.hash读取；特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 http://www.xxx.com，因此对于后端来说，即使没有做到对

2022-02-09 11:16:40 127

原创 slot插槽

插槽就是父组件往子组件中插入一些内容。有三种方式，默认插槽，具名插槽，作用域插槽默认插槽就是把父组件中的数据，显示在子组件中，子组件通过一个slot插槽标签显示父组件中的数据具名插槽是在父组件中通过slot属性，给插槽命名，在子组件中通过slot标签，根据定义好的名字填充到对应的位置。作用域插槽是带数据的插槽，子组件提供给父组件的参数，父组件根据子组件传过来的插槽数据来进行不同的展现和填充内容。在标签中通过slot-scope来接受数据。...

2022-02-08 02:57:18 453

原创 v-for中为何要使用key

key是给每一个vnode的唯一id，也是diff的一种优化策略，可以根据key，更准确，更快的找到对应的vnode节点

2022-02-08 02:55:30 97

原创 keep-alive

keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。在组件切换过程中把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性被包含在 keep-alive 中创建的组件，会多出两个生命周期的钩子: activated（组件激活时使用）与 deactivated（组价离开时调用）如果需要缓存整个项目，直接在app.vu

2022-02-08 02:53:32 79

原创 vue中的修饰符

事件修饰符.stop :阻止事件冒泡：由内而外，通俗的将就是阻止事件将向上级DOM元素传递.capture :事件捕获：由外而内，在捕获阶段，事件从window开始，之后是document对象，一直到触发事件的元素。.self :当事件作用在元素本身时才会触发.once :只触发一次.prevent: 阻止默认事件·passive:告诉浏览器你不想阻止事件的默认行为·trim:自动过滤用户输入的首尾空格语法：@事件名.修饰符=“方法名”...

2022-02-08 02:51:47 261

原创 mvvm和mvc

mvvmMVVM是 Model-View-ViewModel 的缩写，分别对应着：数据，视图，视图模型。Model是我们应用中的数据模型，View是我们的UI视图层，通过ViewModle，可以把我们Modle中的数据映射到View视图上，同时，在View层修改了一些数据，也会反应更新我们的Modle。简单理解就是双向数据绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。mvcmvc即Model、View、Controller即数据模型、视图、控制器。..

2022-02-08 02:49:23 192

原创 methods,watch,computed的区别

computed 计算属性计算结果会缓存,只有当依赖值改变才会重新计算watch 监听属性监听数据的变化触发执行函数methods 事件方法调用一次，执行一次,结果不会缓存

2022-02-08 02:45:41 54

原创 vue组件通讯

父传子：在父组件的子组件标签上绑定一个属性，挂载要传输的变量。在子组件中通过props来接受数据，props可以是数组也可以是对象，接受的数据可以直接使用 props:[“属性名”] props:{属性名:数据类型}子传父：在父组件的子组件标签上通过绑定自定义事件，接受子组件传递过来的事件。子组件通过$emit触发父组件上的自定义事件，发送参数兄弟组件传值：通过main.js初始化一个全局的bus,在发送事件的一方通过bus,在发送事件的一方通过bus,在发送事件的一方通过bus.emit(“事

2022-02-08 02:42:40 173

原创 vue生命周期

生命周期让我们在控制整个vue时更容易形成更好的逻辑，可以分为三个阶段，挂载阶段，更新阶段，销毁阶段分别有：创建前：beforeCreate() 只有一些实例本身的事件和生命周期函数创建后：Created() 是最早使用data和methods中数据的钩子函数挂载前：beforeMount() 指令已经解析完毕，内存中已经生成dom树挂载后：Mounted() dom渲染完毕页面和内存的数据已经同步更新前：beforeUptate() 当data的数据发生改变会执行这个钩子，内存中的数据是新的，

2022-02-08 02:40:53 48

原创 vue常用指令

v-if：是动态的向DOM树中添加或者删除元素；v-else是搭配v-if使用的，它必须紧跟在v-if或者v-else-if后面，否则不起作用v-show：是通过标签的CSS样式display的值是不是none，控制显示隐藏区别：当条件为真的时候没有区别当条件为假的时候 v-if通过创建或删除DOM节点来实现元素的显示隐藏，v-show通过css中的display属性来控制v-if更适合数据的筛选和初始渲染 v-show更适合元素的切换v-for： v-for是根据遍历数据来进行渲.

2022-02-08 02:37:37 45

原创为什么组件data必须是函数

根实例对象data可以是对象也可以是函数（根实例是单例），不会产生数据污染情况，如果不是一个函数，每个组件实例的data都是同一个引用数据，当该组件作为公共组件共享使用，一个地方的data更改，所有的data一起改变，如果data是一个函数，每个实例的data都在闭包中，就不会各自影响了。...

2022-02-08 02:32:01 152

原创数组部分方法

push可以接受一个或者多个参数，将参数追加到数组的尾部，返回添加后的数组的长度，原数组会发生改变。pop()从数组尾部删除一个元素，返回这个被删除的元素，原数组发生改变。unshift()可以接受一个或者多个参数，将参数放到数组的头部，返回添加后的数组的长度，原数组会发生改变。shift()从数组头部删除一个元素，返回这个被删除的元素，原数组发生改变。slice()截取数组，如果不传参数，则返回原数组；如果传一个参数，从该参数表示的索引开始截取，直至数组结束，返回这个截取数组，原数组不变

2022-01-23 11:23:08 605

原创 js数据类型判断

有五种方法typeof、instanceof、constructor、Object.prototype.toString.call()、jquery.type()typeof基本数据类型中：Number，String，Boolean，undefined 以及引用数据类型中Function ,可以使用typeof检测数据类型,分别返回对应的数据类型小写字符。用typeof检测构造函数创建的Number，String，Boolean都返回object基本数据类型中：null 。引用数据类型中的：Ar

2022-01-23 11:04:24 73

原创深拷贝浅拷贝

深拷贝和浅拷贝是只针对Object和Array这样的引用数据类型的。深浅拷贝：浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。但深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。赋值和浅拷贝的区别赋值：把一个对象赋值给一个新的变量时，赋的其实是该对象的在栈中的地址，而不是堆中的数据。也就是两个对象指向的是同一个存储空间，无论哪个对象发生改变，其实都是改变的存储空间的内容，因此，两个对象是联动的。浅拷贝：浅拷贝是按位拷贝对

2022-01-19 21:36:15 66

原创 js数据类型

js数据类型有哪些基本数据类型（值类型）： Number、String、Boolean、Undefined、Null、Symbol（es6新增）和 BigInt（es10新增）；引用数据类型： Object。其中包含Object、Array、 function、Date、RegExp。栈堆存储值类型存储：主要针对三种数据（Number、String、Boolean）。从下往上存储直接存储在栈中，占据空间小、大小固定，属于被频繁使用的数据，所以放入栈中存储。**引用数据类型存储：**主要针对O

2022-01-19 21:19:08 67

原创 js异步的宏任务和微任务

什么是宏任务和微任务宏任务：setTimeout、setYnterval、Ajax、DOM事件微任务：Promise、async/await微任务执行时机比宏任务要早***异步单线异步和单线程是相辅相成的，js是一门单线程脚本语言，所以需要异步来辅助他们的区别：异步不会阻塞程序的执行同步会阻塞程序的执行同步异步的问题javascript是单线程语言，js任务需要排队顺序执行，如果一个任务耗时过长，后边一个任务也的等着,所以将任务设计成了两类：同步任务、异步任务任务列队和even

2022-01-19 20:53:27 608

原创闭包、this、垃圾回收机制

1.闭包函数中套了一个函数，内层函数也可以访问外层函数的变量闭包的分类1.函数作为参数被传递2.函数作为返回的值被返出闭包的使用场景封装对象的私有属性和方法，用于隐藏数据，做一个简单的缓存工具作为回调函数使用利用闭包实现函数的防抖，节流防抖：例如一个倒计时，被连续点击时，关闭上一个倒计时，重新开启一个新的倒计时节流：例如一个倒计时，被连续点击时，规定时间内，无论点击多少次，只触发一次优点：闭包因为长期驻扎在内存中，可以重复使用变量，不会造成变量污染缺点：闭包会使函

2022-01-15 21:13:29 117

原创作用域与预解析

作用域定义：变量作用域：就是一个变量可以使用的范围。作用域种类：全局作用域：js中最外层的作用域函数作用域：js通过函数创建的一个独立作用域，函数可嵌套，所以作用域也可嵌套。块级作用域：是es6新增，如：if{}、for{}等，es6作用域,只适用于const,let作用域只限制于当前代码块{}，自由变量定义：当前作用域没有定义的变量就是自由变量一个变量在当前作用域没有定义，但被使用了向上级作用域一层层依次寻找，知直到找到为止若全局作用域没找到，则报错xx is not d

2022-01-14 19:20:48 180

原创 javascript原型与原型链

prototype每个函数都有一个prototype属性, 称为显示原型__proto__每个实例对象都会有__proto__属性, 称为隐式原型每个实例对象的隐式原型__proto__属性指向自身构造函数的显示原型prototypeconstructor每个prototype原型都有一个constructor属性, 指向关联的构造函数原型链获取对象属性时, 如果对象本身没有这个属性, 那就会去他的原型__proto__上找, 如果还查不到, 就去找原型的原型, 一直找到最顶层(obje

2022-01-14 18:58:17 72

原创前端常见浏览器兼容性问题解决方案

不同浏览器因为内核不同，所以对网页解析存在一定的差异。浏览器内核主要分为两种，一种渲染引擎，一种是js引擎浏览器兼容问题一般指：css兼容、js兼容浏览器及其内核：Chrome（谷歌）：之前Webkit，现在是BlinkOpera（欧朋）：现在是谷歌的Blink内核Firefox（火狐）：GeckoSafari（苹果）：webkitIE：TridentCSS兼容1. 不同浏览器的标签默认的margin和padding不同问题: 标签，不加样式控制的情况下，各自的margin.

2022-01-12 20:58:17 2379

原创 vue路由导航守卫

分为: 全局的、耽搁路由独享的、组件级的全局路由守卫全局前置守卫router.beforeEach全局解析守卫router.beforeResolve全局后置钩子router.afterEach全局前置守卫可以使用 router.beforeEach 注册一个全局前置守卫：每个守卫方法接收三个参数：to: Route: 即将要进入的目标路由对象from: Route: 当前导航正要离开的路由next: Function: 钩子函数，里面定义参数，确认下一步路由要做什么next(

2022-01-11 21:06:46 200

原创 html&css

行内元素有哪些？块级元素有哪些？空(void)元素有那些？CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，比如div默认display属性值为“block”，成为“块级”元素；span默认display属性值为“inline”，是“行内”元素。行内元素有：span a b i img input select strong块级元素有：div p h1-h6 ul table form ul ol li dl dt dd…空元素(没有内容)：

2022-01-11 20:54:54 50

原创 HTML5和css3新特性

css3新特性选择器背景和边框文本效果2D/3D转换-变形(transform)、过渡(transition)、动画(animation)1.选择器常规选择器：:last-child 选择元素最后一个子:first-child 选择选择元素第一个子:nth-child(n) 给第n个子设置样式:nth-child(even) 按偶数:nth-child(odd) 按奇数:disabled 选择每个禁用的dom元素:checked 选择每个选中的do

2022-01-11 20:42:46 185

原创圣杯、双飞翼布局

两栏布局，左边定宽，右边自适应左边浮动，右边加oveflow:hidden;变成BFC清除左侧浮动元素影响三栏布局，圣杯布局，双飞翼布局圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式。两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。（中间先加载渲染）圣杯布局来源于文章In Search of the Holy Grail，而双飞翼布局来源于淘宝UED。虽然两者的实现方法略有差异，不过都遵循了以下要点：* 两侧宽度固定，中间宽度自适应* 中间部

2022-01-10 20:20:27 292

原创 flex布局

flex基于盒状模型，依赖 display 属性 + position属性 + float属性。Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。flex属性flex-direction 主轴的方向（即项目的排列方向）。它有4个值row（默认值）：主轴为水平方向，起点在左端。row-reverse：主轴为水平方向，起点在右端。column：主轴为垂直方向，起点在上沿。column-reverse：主轴为垂直方向，起点在下沿。

2022-01-10 07:46:20 63

原创 position定位属性

position含义是指定位类型, 可取值有: static, relative, absolute, fixed, inherit, sticky(另: sticky是除css3新发布的属性)1. position: static;static(没定位)是position的默认值, 元素处于正常的文档流中, 会忽略left, top, right, bottom, z-index属性.2. position: relative;relative(相对定位)是给元素设置相对原本位置的定位, 不脱.

2022-01-07 19:57:19 343

空空如也

空空如也